码迷，mamicode.com
首页 > Web开发 > 详细

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

时间：2015-09-25 09:39:03      阅读：338      评论：0      收藏：0      [点我收藏+]

标签：

转载自：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. });  

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

标签：

原文地址：http://www.cnblogs.com/walter371/p/4837177.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！