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);

     }

 });

巴特西

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

最新文章

热门文章