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

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

菜单组件常用配置：

 1 /*
 2 Ext.menu.Menu主要配置项表:
 3 items          Mixed                   有效的菜单项数组
 4 shadow         Boolean/String          阴影显示方式，默认true(sides方式)，sides,frame,drop
 5 
 6 菜单项主要类型表:
 7 Ext.menu.TextItem            文本元素
 8 Ext.menu.Separator           菜单分隔符
 9 Ext.menu.CheckItem           包含选择框的菜单项
10 
11 菜单组件常用方法表:
12 addElement()          Mixed el                添加Element元素
13 addItem()             Ext.menu.Item item      添加一个已存在的菜单项
14 addMenuItem()         Object config           根据菜单项配置对象，添加菜单项
15 addSeparator()                                添加菜单分隔符
16 addText()             String text             添加一字符串
17 */

1.简单菜单栏

 1 <mce:script type="text/javascript"><!--
 2 /*
 3 简单菜单栏
 4 分别创建2个菜单fileMenu和editMenu，通过调用工具栏(Toolbar)的add方法将菜单与工具结合形成菜单栏
 5 */
 6 
 7 Ext.onReady(function(){
 8     Ext.BLANK_IMAGE_URL = '../extjs2.0/resources/images/default/s.gif';
 9     
10     var config = {
11         renderTo:'simplyMenu',
12         width:300
13     }
14     
15     var toolBar = new Ext.Toolbar(config);              //创建工具栏
16     
17     config = {
18         shadow:'frame',
19         items:[
20             {text:'新建',handler:onMenuItem},
21             {text:'打开',handler:onMenuItem},
22             {text:'关闭',handler:onMenuItem}
23         ]
24     }
25     
26     var fileMenu = new Ext.menu.Menu(config);           //创建文件菜单
27     
28     config = {
29         shadow:'drop',
30         //有效菜单项数组
31         items:[
32             {text:'复制',handler:onMenuItem},
33             {text:'粘贴',handler:onMenuItem},
34             {text:'剪切',handler:onMenuItem}
35         ]
36     }
37     
38     var editMenu = new Ext.menu.Menu(config);           //创建编辑菜单
39     
40     //菜单加入工具栏
41     toolBar.add(
42         {text:'文件',menu:fileMenu},
43         {text:'编辑',menu:editMenu}
44     );
45     
46     //菜单项的回调方法
47     function onMenuItem(item)
48     {
49         //alert(item.text);
50         Ext.MessageBox.alert('提示','单击的是:' + item.text);
51     }
52 });
53 // --></mce:script>

2.创建二级或多级菜单

 1 /*
 2 创建二级或多级菜单
 3 */
 4 Ext.onReady(function(){
 5     Ext.BLANK_IMAGE_URL = '../extjs2.0/resources/images/default/s.gif';
 6     
 7     var config = {
 8         renderTo:'multilevelMenu',
 9         width:300
10     }
11     
12     var toolBar = new Ext.Toolbar(config);
13     
14     config = {
15         shadow:true,
16         items:[
17             //个人信息
18             {
19                 text:'个人信息',
20                 menu:new Ext.menu.Menu({                              //二级菜单
21                     items:[
22                         {text:'身高',handler:onMenuItem},
23                         {text:'体重',handler:onMenuItem},
24                         {
25                             text:'生日',
26                             menu:new Ext.menu.DateMenu({              //三级菜单，为日期选择菜单
27                                 handler:onClickDate
28                             })
29                         }
30                     ]
31                 })
32             },
33             //公司信息
34             {text:'公司信息',handler:onMenuItem}
35         ]
36     }
37     
38     var infoMenu = new Ext.menu.Menu(config);                         //一级菜单
39     
40     toolBar.add(
41         {text:'设置',menu:infoMenu}
42     );
43     
44     function onClickDate(dm,date)
45     {
46         Ext.Msg.alert('您选择的日期是:',date.format('Y-m-j'));
47     }
48     
49     function onMenuItem(item)
50     {
51         //Ext.Msg.alert('您选择的菜单项是:',item.text);
52         /*Ext.Msg.buttonText = {
53             yes:'确定'
54         }*/
55         
56         Ext.Msg.buttonText.ok = '确定';
57         
58         var config = {
59             title:'您选择的菜单项是:',
60             msg:item.text,
61             width:200,
62             closable:false,
63             buttons:Ext.Msg.OK
64         }
65         
66         Ext.Msg.show(config);
67     }
68 });

3.使用菜单适配器

 1 /*
 2 使用菜单适配器(Ext.menu.Adapter)
 3 将非菜单组件包装成一菜单项
 4 */
 5 Ext.onReady(function(){
 6     Ext.BLANK_IMAGE_URL = '../extjs2.0/resources/images/default/s.gif';           //便于将来换肤用
 7     
 8     var config = {
 9         renderTo:'adapterMenu',
10         width:300
11     }
12     
13     var toolBar = new Ext.Toolbar(config);
14     
15     config = {
16         items:[
17             //使用适配器将按钮加入菜单
18             new Ext.menu.Adapter(new Ext.Button({
19                 text:'新建',
20                 handler:onButtonClick
21             })),
22             new Ext.menu.Adapter(new Ext.Button({
23                 text:'打开',
24                 handler:onButtonClick
25             })),
26             new Ext.menu.Adapter(new Ext.Button({
27                 text:'关闭',
28                 handler:onButtonClick
29             }))
30         ]
31     }
32     
33     var fileMenu = new Ext.menu.Menu(config);
34     
35     //菜单加入工具栏
36     toolBar.add(
37         {text:'文件',menu:fileMenu}
38     );
39     
40     //菜单项回调方法
41     function onButtonClick(btn)
42     {
43         var config = {
44             title:'您选择的菜单项是:',
45             msg:btn.text,
46             width:200,
47             buttons:Ext.Msg.OK
48         }
49         
50         Ext.Msg.show(config);
51     }
52 });

4.具有选择框的菜单

 1 /*
 2 具有选择框的菜单
 3 */
 4 Ext.onReady(function(){
 5     Ext.BLANK_IMAGE_URL = '../extjs2.0/resources/images/default/s.gif';           //便于将来换肤用
 6     
 7     var config = {
 8         renderTo:'chooseMenu',
 9         width:300
10     }
11     
12     var toolBar = new Ext.Toolbar(config);
13     
14     config = {
15         items:[
16             {
17                 text:'主题颜色',
18                 menu:new Ext.menu.Menu({
19                     items:[
20                         {
21                             text:'红色主题',
22                             checked:true,                   //初始状态选中
23                             group:'theme',                   //为单选分组
24                             checkHandler:onItemCheck         //选中后事件响应函数
25                         },
26                         {
27                             text:'蓝色主题',
28                             checked:false,
29                             group:'theme',
30                             checkHandler:onItemCheck
31                         },
32                         {
33                             text:'黑色主题',
34                             checked:false,
35                             group:'theme',
36                             checkHandler:onItemCheck
37                         }
38                     ]
39                 })
40             },
41             {text:'是否启用',checked:false,checkHandler:onItemCheck}
42         ]
43     }
44     
45     var themeMenu = new Ext.menu.Menu(config);
46     
47     toolBar.add(
48         {text:'风格选择',menu:themeMenu}
49     );
50     
51     function onItemCheck(item)
52     {
53         var config = {
54             title:'你选的是:',
55             msg:item.text,
56             width:200,
57             buttons:Ext.Msg.OK
58         }
59         
60         Ext.Msg.show(config);
61     }
62 });

posted on 2017-10-16 14:06 Sharpest 阅读(259) 评论(0) 编辑收藏举报