Ext.Menu.jpg

一、菜单容器

1. Ext.menu.Menu 菜单容器的基类
2. Ext.menu.ColorMenu及Ext.menu.DateMenu 菜单基类的子类

1.菜单容器的使用

/*menu有三种类型*/
/*基类菜单的使用*/
menu:new Ext.menu.Menu({//菜单基类
    items:[]            //可以添加其它菜单类或者菜单选项
})

/*Ext.menu.ColorMenu的使用*/
menu:new Ext.menu.ColorMenu({ //颜色菜单
    handler:function(cm,color){Ext.MessageBox.alert('提示','你选择了'+color)}
})

/*Ext.menu.DateMen的使用*/
menu:new Ext.menu.DateMenu({ //日期菜单
    handler:function(cm,date){Ext.MessageBox.alert('提示','你选择了'+date)}
})

二、菜单选项

1.菜单选项基类

• Ext.menu.BaseItem BaseItem 提供默认的渲染、活动状态管理和由菜单组件共享的基本配置

2.菜单选项

1. Ext.menu.item 普通选项 -->简写{text:" "}
2. Ext.menu.CheckItem 添加一个默认为多选框的菜单选项或单选项 -->简写{text:" ",checked:true/false} 配置gorup则同值组为单选项
3. Ext.menu.Separator 添加一个分隔栏到菜单中-->简写"-"
4. Ext.menu.TextItem 添加一个静态文本到菜单中，通常用来作为标题或者组分隔符-->简写"xxx"

3.菜单选项的使用

<script type="text/javascript">
    Ext.onReady(function(){
        var toolbar= new Ext.Toolbar({  
            renderTo:'toolbar',  //渲染到某个节点上
            items:[{
               text:'菜单按钮',
               menu:new Ext.menu.Menu({
                   items:[
                      new Ext.menu.Item({text:"普通选项"}),
                      {text:"普通选项另外写法"},//普通选项 简写
                      {text:"配置href的选项",href:'http://www.baidu.com'},
                      new Ext.menu.Item({text:"这个是带图标的选项",iconCls:'menuIcon menuIcon1'}),//定义了背景图的CSS样式类。类名，可以多个
                      new Ext.menu.Separator(),//也可以配置属性，但都是从baseItem继承过来的
                            '-',//分隔符 简写
                      new Ext.menu.CheckItem({text:"这个是check选项",checked:false}),//checked 默认false
                            {text:"check选项另外写法",checked:false},//check选项 简写
                      new Ext.menu.CheckItem({text:"这个是默认勾选的check选项",checked:true}),
                      new Ext.menu.Separator(),
                      new Ext.menu.CheckItem({text:"这个check加入到了单选组",group:'groupOne'}),
                      new Ext.menu.CheckItem({text:"这个check加入到了单选组",group:'groupOne'}),//通过group把其加入一个单选组
                      new Ext.menu.Separator(),
                      new Ext.menu.TextItem({text:"这个是静态文本"}),
                            '静态文本简写',//静态文本简写
                      new Ext.menu.Item({
                          text:"这个是菜单选项",
                          menu:new Ext.menu.Menu({
                              items:[
                                  {text:"普通选项"},
                                  {text:"普通选项"},
                                  {text:"普通选项"}]
                          })
                      }),
                      new Ext.menu.Separator(),
                      new Ext.menu.Item({text:"color菜单",menu:new Ext.menu.ColorMenu()}),
                      new Ext.menu.Item({text:"date菜单",menu:new Ext.menu.DateMenu()})
                   ]
               })
            }]
        })      
    })
</script>

/*引入菜单，图标样式*/
 <link href="css/two_menu.css" rel="stylesheet" type="text/css" >

/*toolbar渲染到这个节点上*/
 <div id="toolbar"></div> 

4.菜单选项简写总结

1. {text:" "} 普通选项
2. 配置checked。成check选项（复选）
3. 配置checked，group。成check单选框
4. 配置iconCls。前面带小图标
5. 配置 href。成超链接选项
6. 配置menu。成菜单选项
7. 其它选项，"-"分隔符，"XXX"静态文本

5.图示

菜单