87.Ext_菜单组件_Ext.menu.Menu

转自：https://blog.csdn.net/lms1256012967/article/details/52574921

菜单组件常用配置：

/*
Ext.menu.Menu主要配置项表:
items          Mixed                   有效的菜单项数组
shadow         Boolean/String          阴影显示方式，默认true(sides方式)，sides,frame,drop

菜单项主要类型表:
Ext.menu.TextItem            文本元素
Ext.menu.Separator           菜单分隔符
Ext.menu.CheckItem           包含选择框的菜单项

菜单组件常用方法表:
addElement()          Mixed el                添加Element元素
addItem()             Ext.menu.Item item      添加一个已存在的菜单项
addMenuItem()         Object config           根据菜单项配置对象，添加菜单项
addSeparator()                                添加菜单分隔符
addText()             String text             添加一字符串
*/

1.简单菜单栏

<mce:script type="text/javascript"><!--
/*
简单菜单栏
分别创建2个菜单fileMenu和editMenu，通过调用工具栏(Toolbar)的add方法将菜单与工具结合形成菜单栏
*/

Ext.onReady(function(){
    Ext.BLANK_IMAGE_URL = '../extjs2.0/resources/images/default/s.gif';
    
    var config = {
        renderTo:'simplyMenu',
        300
    }
    
    var toolBar = new Ext.Toolbar(config);              //创建工具栏
    
    config = {
        shadow:'frame',
        items:[
            {text:'新建',handler:onMenuItem},
            {text:'打开',handler:onMenuItem},
            {text:'关闭',handler:onMenuItem}
        ]
    }
    
    var fileMenu = new Ext.menu.Menu(config);           //创建文件菜单
    
    config = {
        shadow:'drop',
        //有效菜单项数组
        items:[
            {text:'复制',handler:onMenuItem},
            {text:'粘贴',handler:onMenuItem},
            {text:'剪切',handler:onMenuItem}
        ]
    }
    
    var editMenu = new Ext.menu.Menu(config);           //创建编辑菜单
    
    //菜单加入工具栏
    toolBar.add(
        {text:'文件',menu:fileMenu},
        {text:'编辑',menu:editMenu}
    );
    
    //菜单项的回调方法
    function onMenuItem(item)
    {
        //alert(item.text);
        Ext.MessageBox.alert('提示','单击的是:' + item.text);
    }
});
// --></mce:script>

2.创建二级或多级菜单

/*
创建二级或多级菜单
*/
Ext.onReady(function(){
    Ext.BLANK_IMAGE_URL = '../extjs2.0/resources/images/default/s.gif';
    
    var config = {
        renderTo:'multilevelMenu',
        300
    }
    
    var toolBar = new Ext.Toolbar(config);
    
    config = {
        shadow:true,
        items:[
            //个人信息
            {
                text:'个人信息',
                menu:new Ext.menu.Menu({                              //二级菜单
                    items:[
                        {text:'身高',handler:onMenuItem},
                        {text:'体重',handler:onMenuItem},
                        {
                            text:'生日',
                            menu:new Ext.menu.DateMenu({              //三级菜单，为日期选择菜单
                                handler:onClickDate
                            })
                        }
                    ]
                })
            },
            //公司信息
            {text:'公司信息',handler:onMenuItem}
        ]
    }
    
    var infoMenu = new Ext.menu.Menu(config);                         //一级菜单
    
    toolBar.add(
        {text:'设置',menu:infoMenu}
    );
    
    function onClickDate(dm,date)
    {
        Ext.Msg.alert('您选择的日期是:',date.format('Y-m-j'));
    }
    
    function onMenuItem(item)
    {
        //Ext.Msg.alert('您选择的菜单项是:',item.text);
        /*Ext.Msg.buttonText = {
            yes:'确定'
        }*/
        
        Ext.Msg.buttonText.ok = '确定';
        
        var config = {
            title:'您选择的菜单项是:',
            msg:item.text,
            200,
            closable:false,
            buttons:Ext.Msg.OK
        }
        
        Ext.Msg.show(config);
    }
});

3.使用菜单适配器

/*
使用菜单适配器(Ext.menu.Adapter)
将非菜单组件包装成一菜单项
*/
Ext.onReady(function(){
    Ext.BLANK_IMAGE_URL = '../extjs2.0/resources/images/default/s.gif';           //便于将来换肤用
    
    var config = {
        renderTo:'adapterMenu',
        300
    }
    
    var toolBar = new Ext.Toolbar(config);
    
    config = {
        items:[
            //使用适配器将按钮加入菜单
            new Ext.menu.Adapter(new Ext.Button({
                text:'新建',
                handler:onButtonClick
            })),
            new Ext.menu.Adapter(new Ext.Button({
                text:'打开',
                handler:onButtonClick
            })),
            new Ext.menu.Adapter(new Ext.Button({
                text:'关闭',
                handler:onButtonClick
            }))
        ]
    }
    
    var fileMenu = new Ext.menu.Menu(config);
    
    //菜单加入工具栏
    toolBar.add(
        {text:'文件',menu:fileMenu}
    );
    
    //菜单项回调方法
    function onButtonClick(btn)
    {
        var config = {
            title:'您选择的菜单项是:',
            msg:btn.text,
            200,
            buttons:Ext.Msg.OK
        }
        
        Ext.Msg.show(config);
    }
});

4.具有选择框的菜单

/*
具有选择框的菜单
*/
Ext.onReady(function(){
    Ext.BLANK_IMAGE_URL = '../extjs2.0/resources/images/default/s.gif';           //便于将来换肤用
    
    var config = {
        renderTo:'chooseMenu',
        300
    }
    
    var toolBar = new Ext.Toolbar(config);
    
    config = {
        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,checkHandler:onItemCheck}
        ]
    }
    
    var themeMenu = new Ext.menu.Menu(config);
    
    toolBar.add(
        {text:'风格选择',menu:themeMenu}
    );
    
    function onItemCheck(item)
    {
        var config = {
            title:'你选的是:',
            msg:item.text,
            200,
            buttons:Ext.Msg.OK
        }
        
        Ext.Msg.show(config);
    }
});