Extjs-工具条和菜单 Ext.menu和Ext.Toolbar

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Extjs-工具条和菜单 Ext.menu和Ext.Toolbar，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5956字，纯文字阅读大概需要9分钟。

内容图文

转载自：http://blog.csdn.net/itlwc/article/details/7878002

1.创建一个简单工具条
效果图

[javascript] view plaincopy

 

1. <script type="text/javascript" defer>    
2.     Ext.onReady(function(){  
3.         // 创建带三个按钮的工具条  
4.         var tb = new Ext.Toolbar({  
5.             width : 300,  
6.             items : [{  
7.                 text: ‘新建‘  
8.             },{  
9.                 text: ‘修改‘  
10.             },{  
11.                 text: ‘删除‘  
12.             }]  
13.         });  
14.         // 为工具条再添加一个按钮  
15.         tb.add({  
16.             text: ‘显示‘  
17.         });  
18.         //tb.doLayout();//重新计算容器的布局尺寸  
19.         new Ext.Viewport({    
20.             items: [tb]    
21.         });    
22.     });    
23. </script>  

2.创建一个简单菜单
效果图

代码

[javascript] view plaincopy

 

1. <script type="text/javascript" defer>    
2.     Ext.onReady(function(){  
3.         //创建工具条  
4.         var tb = new Ext.Toolbar({  
5.             width : 300  
6.         });  
7.         //创建一个菜单  
8.         var menuFile = new Ext.menu.Menu();  
9.         menuFile.add({text: ‘新建‘});  
10.         menuFile.add(‘-‘);  
11.         menuFile.add({text: ‘打开‘});  
12.         menuFile.add(‘separator‘);  
13.         menuFile.add({text: ‘保存‘});  
14.         menuFile.add(new Ext.menu.Separator());  
15.         menuFile.add({text: ‘关闭‘});  
16.         // 为工具条再添加一个菜单  
17.         tb.add({  
18.             text: ‘文件‘,  
19.             menu: menuFile  
20.         });  
21.         //tb.doLayout();//重新计算容器的布局尺寸  
22.         new Ext.Viewport({    
23.             items: [tb]    
24.         });    
25.     });    
26. </script>  

3.多级菜单

 

[javascript] view plaincopy

 

1. <script type="text/javascript" defer>    
2.     Ext.onReady(function(){  
3.         var menuFile = new Ext.menu.Menu({    
4.             items:[{    
5.                 text: ‘历史‘,    
6.                 menu: [{    
7.                     text: ‘今天‘    
8.                 },{    
9.                     text: ‘昨天‘    
10.                 }]  
11.             }]    
12.         });   
13.         var tb = new Ext.Toolbar({  
14.             width : 300,  
15.             items : [{  
16.                 text: ‘文件‘,  
17.                 menu : menuFile  
18.             }]  
19.         });  
20.         new Ext.Viewport({    
21.             items: [tb]    
22.         });    
23.     });    
24. </script>  

4.多选菜单

[plain] view plaincopy

 

1. 单选和多选都使用Ext.menu.CheckItem,唯一不用的是group参数  

效果图

代码

[javascript] view plaincopy

 

1. <script type="text/javascript" defer>  
2.     Ext.onReady(function(){  
3.         var menuCheck = new Ext.menu.Menu({  
4.             items : [  
5.                 new Ext.menu.CheckItem({  
6.                     text : ‘粗体‘,  
7.                     checkHandler : function(item,checked){  
8.                         Ext.Msg.alert(‘多选‘,(checked ? ‘选中‘:‘取消‘)+‘粗体‘);  
9.                     }  
10.                 }),  
11.                 new Ext.menu.CheckItem({  
12.                     text : ‘斜体‘,  
13.                     checkHandler : function(item,checked){  
14.                         Ext.Msg.alert(‘多选‘,(checked ? ‘选中‘:‘取消‘)+‘斜体‘);  
15.                     }  
16.                 })  
17.             ]  
18.         });  
19.           
20.           
21.         var tb = new Ext.Toolbar({  
22.             items : [{  
23.                 text : ‘字形‘,  
24.                 menu : menuCheck  
25.             }]  
26.         });  
27.         new Ext.Viewport({  
28.             items : [tb]  
29.         });  
30.     });  
31. </script>  

5.单选按钮菜单

[plain] view plaincopy

 

1. 单选和多选都使用Ext.menu.CheckItem,唯一不用的是group参数  

效果图

代码

[javascript] view plaincopy

 

1. <script type="text/javascript" defer>  
2.     Ext.onReady(function(){  
3.         var menuRadio = new Ext.menu.Menu({  
4.             items : [  
5.                 new Ext.menu.CheckItem({  
6.                     text : ‘宋体‘,  
7.                     group : ‘font‘,  
8.                     checkHandler : function(item,checked){  
9.                         Ext.Msg.alert(‘单选‘,(checked ? ‘选中‘:‘取消‘)+‘宋体‘);  
10.                     }  
11.                 }),  
12.                 new Ext.menu.CheckItem({  
13.                     text : ‘黑体‘,  
14.                     group : ‘font‘,  
15.                     checkHandler : function(item,checked){  
16.                         Ext.Msg.alert(‘单选‘,(checked ? ‘选中‘:‘取消‘)+‘黑体‘);  
17.                     }  
18.                 }),  
19.                 new Ext.menu.CheckItem({  
20.                     text : ‘楷体‘,  
21.                     group : ‘font‘,  
22.                     checkHandler : function(item,checked){  
23.                         Ext.Msg.alert(‘单选‘,(checked ? ‘选中‘:‘取消‘)+‘楷体‘);  
24.                     }  
25.                 })  
26.             ]  
27.         });  
28.           
29.         var tb = new Ext.Toolbar({  
30.             items : [{  
31.                 text : ‘字体‘,  
32.                 menu : menuRadio  
33.             }]  
34.         });  
35.         new Ext.Viewport({  
36.             items : [tb]  
37.         });  
38.     });  
39. </script>  

6.日期菜单
效果图

代码

[javascript] view plaincopy

 

1. <script type="text/javascript" defer>  
2.     Ext.onReady(function(){  
3.         var tb = new Ext.Toolbar({  
4.             items : [{  
5.                 text : ‘日期‘,  
6.                 menu : new Ext.menu.DateMenu({  
7.                     handler : function(dp, date){  
8.                         Ext.Msg.alert(‘选择日期‘, ‘选择的日期是 {0}.‘, date.format(‘Y年m月d日‘));  
9.                     }  
10.                 })  
11.             }]  
12.         });  
13.         new Ext.Viewport({  
14.             items : [tb]  
15.         });  
16.     });  
17. </script>  

7.颜色菜单

[plain] view plaincopy

 

1. Ext本身一些问题,颜色选中的时候handler会执行两次,第二次的参数传入一个event对象,  
2. 所以要加typeof进行判断,以免出现问题  
3. 最后颜色值返回6位的字符串,在它前面加#就可以使用了  

效果图

 

代码

[javascript] view plaincopy

 

1. <script type="text/javascript" defer>  
2.     Ext.onReady(function(){  
3.         var tb = new Ext.Toolbar({  
4.             items : [{  
5.                 text : ‘颜色‘,  
6.                 menu: new Ext.menu.ColorMenu({  
7.                     handler : function(cm, color){  
8.                         if (typeof color == ‘string‘) {  
9.                             Ext.Msg.alert(‘选择颜色‘, ‘选择的颜色是 ‘ + color);  
10.                         }  
11.                     }  
12.                 })  
13.             }]  
14.         });  
15.         new Ext.Viewport({  
16.             items : [tb]  
17.         });  
18.     });  
19. </script>  

8.右键弹出菜单

[javascript] view plaincopy

 

1. <script type="text/javascript">  
2.     Ext.onReady(function(){  
3.         var contextmenu = new Ext.menu.Menu({  
4.             items: [{  
5.                 text: ‘新建‘  
6.             },{  
7.                 text: ‘修改‘  
8.             },{  
9.                 text: ‘删除‘  
10.             },{  
11.                 text: ‘显示‘  
12.             }]  
13.         });  
14.         Ext.get(document).on(‘contextmenu‘, function(e) {  
15.             e.preventDefault();  
16.             contextmenu.showAt(e.getXY());  
17.         });  
18.     });  
19. </script>  

9.使用Ext.menu.MenuMgr统一管理菜单

 

[plain] view plaincopy

 

1. Ext为我们提供了MenuMgr来统一管理页面上的所有菜单  
2. 每创建一个菜单都会注册到Ext.menu.MenuMgr中,可以使用MenuMgr的函数对菜单进行操作,  
3. Ext.menu.MenuMgr是一个单例,我们不需要创建就可以直接调用功能函数get(),根据id获取对应的菜单  

代码

[javascript] view plaincopy

 

1. var menuWj = new Ext.menu.Menu({  
2.     id: ‘menu1‘,  
3.     allowOtherMenus: true,  
4.     items: [  
5.         {text: ‘今天‘},  
6.         {text: ‘昨天‘}  
7.     ]  
8. });  
9. Ext.get(‘showButton‘).on(‘click‘, function() {  
10.     //获取menu实例  
11.     var menu1 = Ext.menu.MenuMgr.get(‘menu1‘);  
12.     menu1.show(tb.el);  
13.     Ext.getDoc().removeAllListeners();  
14. });  
15. Ext.get(‘hideButton‘).on(‘click‘, function() {  
16.     Ext.menu.MenuMgr.hideAll();  
17. });  

10工具条加文本框和时间框
效果图

代码

[javascript] view plaincopy

 

1. <script type="text/javascript">  
2.     Ext.onReady(function(){  
3.         var tb = new Ext.Toolbar({    
4.             items : [  
5.                 ‘文本框‘,  
6.                 new Ext.form.TextField({  
7.                     name: ‘text‘  
8.                 }),  
9.                 ‘时间框‘,  
10.                 new Ext.form.DateField({  
11.                     name: ‘date‘  
12.                 })  
13.             ]    
14.         });    
15.         new Ext.Viewport({    
16.             items : [tb]    
17.         });   
18.     });  
19. </script>  

11工具条加HTML标签
效果图

代码

[javascript] view plaincopy

 

1. <script type="text/javascript">  
2.     Ext.onReady(function(){  
3.         var tb = new Ext.Toolbar({    
4.             items : [  
5.                 ‘<span style="color:red;font-weight:bold;">红字</span>‘,  
6.                 ‘<input type="text">‘,  
7.                 ‘<button>按钮</button>‘  
8.             ]    
9.         });    
10.         new Ext.Viewport({    
11.             items : [tb]    
12.         });   
13.     });  
14. </script>  

12.工具条加按钮的三种方法

[javascript] view plaincopy

 

1. <script type="text/javascript">  
2.     Ext.onReady(function(){  
3.         var tb = new Ext.Toolbar({    
4.             items : [{  
5.                 text : ‘按钮1‘  
6.             },  
7.             new Ext.Button({  
8.                 text : ‘按钮2‘  
9.             }),  
10.             new Ext.Toolbar.Button({  
11.                 text : ‘按钮3‘  
12.             })]    
13.         });    
14.         new Ext.Viewport({    
15.             items : [tb]    
16.         });   
17.     });  
18. </script>  

13. Ext.Toolbar.Spacer

[plain] view plaincopy

 

1. Ext.Toolbar.Spacer向菜单添加空白元素,  
2. xtype = tbspacer它是一个2px的空白  

 

[javascript] view plaincopy

 

1. tb.add({  
2.     xtype : ‘tbspacer‘  
3. });  

14. Ext.Toolbar.Separator

 

 

[plain] view plaincopy

 

1. Ext.Toolbar.Separator向菜单添加一个竖线  
2. xtype = tbseparator 或者 –  

 

 

[javascript] view plaincopy

 

1. tb.add({  
2.     xtype : ‘tbseparator‘  
3. });   

15. Ext.Toolbar.Fill

 

 

[plain] view plaincopy

 

1. 将处于它右侧的工具条组件以右对齐的方式排列在工具条右侧  
2. xtype=tbfill 或者->  

[javascript] view plaincopy

 

1. tb.add({  
2.     xtype : ‘tbfill‘  
3. });  

原文：http://www.cnblogs.com/walter371/p/4837177.html

内容总结

以上是互联网集市为您收集整理的Extjs-工具条和菜单 Ext.menu和Ext.Toolbar全部内容，希望文章能够帮你解决Extjs-工具条和菜单 Ext.menu和Ext.Toolbar所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---