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

2023-08-15 12:33:40

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

1.创建一个简单工具条
效果图
Extjs-工具条和菜单 Ext.menu和Ext.Toolbar

  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.创建一个简单菜单
效果图

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

  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.多级菜单

  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.多选菜单

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

效果图
Extjs-工具条和菜单 Ext.menu和Ext.Toolbar
代码

  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. var tb = new Ext.Toolbar({
  20. items : [{
  21. text : '字形',
  22. menu : menuCheck
  23. }]
  24. });
  25. new Ext.Viewport({
  26. items : [tb]
  27. });
  28. });
  29. </script>

5.单选按钮菜单

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

效果图
Extjs-工具条和菜单 Ext.menu和Ext.Toolbar
代码

  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. var tb = new Ext.Toolbar({
  29. items : [{
  30. text : '字体',
  31. menu : menuRadio
  32. }]
  33. });
  34. new Ext.Viewport({
  35. items : [tb]
  36. });
  37. });
  38. </script>

6.日期菜单
效果图
Extjs-工具条和菜单 Ext.menu和Ext.Toolbar
代码

  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.颜色菜单

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

效果图

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

代码

  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.右键弹出菜单

  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统一管理菜单

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

代码

  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工具条加文本框和时间框
效果图
Extjs-工具条和菜单 Ext.menu和Ext.Toolbar
代码

  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标签
效果图
Extjs-工具条和菜单 Ext.menu和Ext.Toolbar
代码

  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.工具条加按钮的三种方法

  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

  1. Ext.Toolbar.Spacer向菜单添加空白元素,
  2. xtype = tbspacer它是一个2px的空白
  1. tb.add({
  2. xtype : 'tbspacer'
  3. });

14. Ext.Toolbar.Separator

  1. Ext.Toolbar.Separator向菜单添加一个竖线
  2. xtype = tbseparator 或者 –
  1. tb.add({
  2. xtype : 'tbseparator'
  3. });

15. Ext.Toolbar.Fill

  1. 将处于它右侧的工具条组件以右对齐的方式排列在工具条右侧
  2. xtype=tbfill 或者->
    1. tb.add({
    2. xtype : 'tbfill'
    3. });
上一篇：关于iTunes11.1 不能刷自制固件的解决方案


下一篇：分布式系统间通信之RPC简单Demo(七)