Ext菜單Ext.menu.Menu

<h2>1、簡單菜單欄</h2>
<div id="toolbar"></div>
<h2>2、多級菜單欄</h2>
<div id="toolbar2"></div>
<h2>3、更多組件菜單欄</h2>
<div id="toolbar3"></div>
<h2>4、帶選擇框的菜單欄</h2>
<div id="toolbar4"></div>

Ext.onReady(function(){
    //Ext菜單Ext.menu.Menu
    
    //1、簡單菜單欄
    //1.建立工具欄
    var toolbar = new Ext.toolbar.Toolbar({
        width : 300,
        renderTo : 'toolbar'
    });
    //2.建立文件菜單
    var fileMenu = new Ext.menu.Menu({
        shadow : 'frame',//設置菜單四條邊有陰影
        allowOtherMenus : true,
        items : [
            new Ext.menu.Item({
                text : '新建',
                handler : onMenuItem //處理函數
            }),
            {text : '打開', handler : onMenuItem },
            {text : '關閉', handler : onMenuItem }
        ]
    });
    //3.建立編輯菜單
    var editMenu = new Ext.menu.Menu({
        shadow : 'drop',
        allowOtherMenus : true,
        items : [
            {text : '複製', handler : onMenuItem},
            {text : '粘貼', handler : onMenuItem},
            {text : '剪貼', handler : onMenuItem}
        ]
    });
    //4.將菜單加入工具欄
    toolbar.add(
        {text : '文件',menu : fileMenu},
        {text : '編輯',menu : editMenu}
    );
    //5.回調方法
    function onMenuItem(item){
        //取的菜單項的text屬性
        console.info(item.text);
    }
    
    
    //2、多級菜單欄
    
    //1.建立工具欄
    var toolbar2 = new Ext.toolbar.Toolbar({
        width : 300,
        renderTo : 'toolbar2'
    });
    //2.建立設置菜單
    var infoMenu = new Ext.menu.Menu({ //一級菜單
        ignoreParentClicks : true,//忽略父菜單的點擊事件
        plain : true, //菜單前面沒有縮進
        items : [
            { 
                text : '我的信息',
                menu : new Ext.menu.Menu({//二級菜單
                    ignoreParentClicks : true,//忽略父菜單的點擊事件
                    items : [
                        { 
                            text : '基本信息' ,
                            menu : new Ext.menu.Menu({//三級菜單
                                items : [
                                    { text : '性別' , handler : onMenuItem},
                                    { text : '身高' , handler : onMenuItem},
                                    { text : '體重' , handler : onMenuItem}
                                ]
                            })
                        }
                    ]
                })
            },
            { text : '公司信息' , handler : onMenuItem}
        ]
    });
    //3.把菜單加入到工具欄
    toolbar2.add(
        { text : '設置', menu : infoMenu}
    );
    //回調方法見上5
    
    //3、更多組件菜單欄
    //1.建立工具欄
    var toolbar3 = new Ext.toolbar.Toolbar({
        width: 300,
        renderTo : 'toolbar3'
    });
    //2.建立菜單
    var fileMenu = new Ext.menu.Menu({
        items : [
            //表單字段
            { 
                xtype : 'textfield' ,
                hideLabel : true,
                width : 100
            },
            //顏色選擇器
            { 
                text : '顏色選擇',
                menu : new Ext.menu.ColorPicker()
            },
            //日期選擇器
            {
                xtype : 'datepicker'
            },
            //按鈕組
            { 
                xtype : 'buttongroup',
                columns : 3,
                title : '按鈕組',
                items : [
                    {
                        text : '用戶管理',
                        scale : 'large',
                        colspan : 3,
                        width : 170,
                        iconCls : 'iconfont icon-dakaiwenjianjia',
                        iconAlign : 'top'
                    },
                    {
                        text : '新建',
                        iconCls : 'iconfont icon-mianxingtubiaoxinjianwenjianjia1'
                    },
                    {
                        text : '打開',
                        iconCls : 'iconfont icon-dakaiwenjianjia'
                    },
                    {
                        text : '保存',
                        iconCls : 'iconfont icon-baocun'
                    }
                ]
            }
        ]
    });
    //3.把菜單加入到工具欄
    toolbar3.add(
        { text : '文件' , menu : fileMenu}
    );
    
    //4、帶選擇框的菜單欄
    //1.建立工具欄
    var toolbar4 = new Ext.toolbar.Toolbar({
        width : 300,
        renderTo : 'toolbar4'
    });
    //2.建立菜單
    var themeMenu = new Ext.menu.Menu({
        items : [
            { 
                text : '主題顏色',
                menu : new Ext.menu.Menu({
                    items : [
                        //紅色
                        {
                            text : '紅色主題',
                            checked : true,//初始選中
                            group : 'theme',//爲單選框分組, 同組中只能有一個被選中
                            checkHandler : onItemCheck //回調
                        },
                        //藍色
                        {
                            text : '藍色主題',
                            checked : false,
                            group : 'theme',
                            checkHandler : onItemCheck
                        },
                        //黑色
                        {
                            text : '黑色主題',
                            checked : false,
                            group : 'theme',
                            checkHandler : onItemCheck
                        }
                    ]
                })
            },
            { text : '是否啓用' , checked : false }
        ]
    });
    //3.把菜單加入到工具欄
    toolbar4.add(
        { text : '風格選擇' , menu : themeMenu}
    );
    //4.回調方法
    function onItemCheck(item){
        alert(item.text);
    }
});