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',
         width: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',
         width: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,
             width: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',
         width: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,
             width: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',
         width: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,
             width:200,
             buttons:Ext.Msg.OK
         }

         Ext.Msg.show(config);
     }
 });