Ext_菜单组件_Ext.menu.Menu

最新推荐文章于 2019-06-26 10:49:05 发布

转载最新推荐文章于 2019-06-26 10:49:05 发布 · 3.4k 阅读

文章标签：

#Extjs基础学习 Ext.menu.m

Extjs基础学习专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何使用 ExtJS 创建多种类型的菜单组件，包括简单的菜单栏、二级或多级菜单、利用适配器实现的功能扩展及具有选择框的菜单等。通过具体实例展示了菜单配置与交互处理的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

连接地址：http://blog.youkuaiyun.com/lulu_jiang/article/details/5473035

菜单组件常用配置：

[javascript]view plaincopy 
   
 /* 
 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.简单菜单栏

[c-sharp]view plaincopy 
   
 <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.创建二级或多级菜单

[javascript]view plaincopy 
   
 /* 
 创建二级或多级菜单 
 */  
 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.使用菜单适配器

[javascript]view plaincopy 
   
 /* 
 使用菜单适配器(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.具有选择框的菜单

[javascript]view plaincopy 
   
 /* 
 具有选择框的菜单 
 */  
 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);  
     }  
 });  