您的位置: 首页  >  文章  >  ExtJS2 0开发与实践笔记 3 ——Ext中的Menu

ExtJS2 0开发与实践笔记 3 ——Ext中的Menu

分类: 文章 • 2023-02-25 00:13:29
                在桌面程序gui开发中,menu是我们所经常使用的组件之一，它为用户提供了便利的程序功能选择项；而在web开发中，如何制作menu菜单效果一直是个很棘手的问题，如何让菜单通用，如何令菜单响应事件都需要我们自己动手来完成。所幸Ext也为我们提供了Menu组件，以Ext进行开发时，我们的不必要工作量将大大的减少。

Ext的Menu组件，是通过几个类的联合来使用的，这些类包括：Ext.Toolbar、Ext.menu.Menu、Ext.menu.Item、 Ext.menu.CheckItem，以及一些特殊类型的菜单或菜单项，例如菜单Ext.menu.DateMenu、菜单项Ext.menu.ColorItem。 

其中组织关系如下图：
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu

Ext.Toolbar：
该类表示一个菜单条，构建函数接受两个参数，第一个是指定toolbar的容器（contrainer）；第二个参数是包含全部按钮的数组。

Ext.menu.Menu：
该类表示一个菜单，包含菜单标识id和菜单中所含的菜单项。

Ext.menu.Item：
该类表示一个菜单项，菜单项包括一些属性，如上面的text和handler，根据不同菜单项类型，属性的使用略有不同，最基本的包括文本内容text和事件处理器函数handler/ checkHandler，具体请参考Ext 的API文档。

Ext.menu.CheckItem：
可选菜单项，从Ext.menu.Item继承而来，表示可选的菜单项。

Ext.menu.DateMenu：
特定的表示时间的菜单，从Ext.menu.Menu继承而来 。

Ext.menu.ColorItem：
特定的表示颜色选择的菜单项集合，可直接作为Menu构造函数中的items属性值。

下面我给出一个简单的用例代码：(Ext2.0配置方法见此)

MenuExt.js
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExtJS2 0开发与实践笔记 3 ——Ext中的Menu/**//**
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu * <p>Title: LoonFramework</p>
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu * <p>Description:Ext的Menu用例</p>
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu * <p>Copyright: Copyright (c) 2008</p>
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu * <p>Company: LoonFramework</p>
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu * <p>License: http://www.apache.org/licenses/LICENSE-2.0</p>
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu * @author chenpeng
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu * @email：[email protected]
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu * @version 0.1
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu */
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExtJS2 0开发与实践笔记 3 ——Ext中的MenuExt.onReady(function()...{
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu    Ext.QuickTips.init();
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu    //菜单选项
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExtJS2 0开发与实践笔记 3 ——Ext中的Menu    var dateMenu = new Ext.menu.DateMenu(...{
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExtJS2 0开发与实践笔记 3 ——Ext中的Menu        handler: function(dp, date)...{
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu            Ext.MessageBox.alert('日期选择', '选择日期为: ' + date.format('Y/m/d'), '');
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu        }
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu    });
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu    
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExtJS2 0开发与实践笔记 3 ——Ext中的Menu    var colorMenu = new Ext.menu.ColorMenu(...{
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu        id: 'colorMenu',
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExtJS2 0开发与实践笔记 3 ——Ext中的Menu        handler: function(cm, color)...{
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu             var rgb=Ext.color.hexToRGB(color);
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu             Ext.MessageBox.alert('颜色','R='+rgb.R+',G='+rgb.G+',B='+rgb.B, '');
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu        }
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu    });
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu    
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExtJS2 0开发与实践笔记 3 ——Ext中的Menu    function onItemCheck(item, checked)...{
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu        Ext.MessageBox.alert('选择', '当前点选[' + item.text + '],状态为 ' + (checked ? 'checked' : 'unchecked'), '');
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu    }
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu    
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExtJS2 0开发与实践笔记 3 ——Ext中的Menu    var menu = new Ext.menu.Menu(...{
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu        id: 'mainMenu',
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExtJS2 0开发与实践笔记 3 ——Ext中的Menu        items: [...{
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu            text: '选项1',
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu            //默认为选中
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu            checked: true,
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu            //选中处理方式为onItemCheck      
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu            checkHandler: onItemCheck
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExtJS2 0开发与实践笔记 3 ——Ext中的Menu        }, ...{
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu            text: '选项2',
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu            checked: true,
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu            checkHandler: onItemCheck
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExtJS2 0开发与实践笔记 3 ——Ext中的Menu        }, ...{
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu            text: '选项3!',
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu            checked: true,
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu            checkHandler: onItemCheck
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu        }, //分隔菜单
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExtJS2 0开发与实践笔记 3 ——Ext中的Menu '-', ...{
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu            text: '单选菜单',
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExtJS2 0开发与实践笔记 3 ——Ext中的Menu            menu: ...{
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExtJS2 0开发与实践笔记 3 ——Ext中的Menu                items: [...{
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu                    text: 'A',
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu                    checked: false,
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu                    group: 'theme',
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu                    checkHandler: onItemCheck
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExtJS2 0开发与实践笔记 3 ——Ext中的Menu                }, ...{
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu                    text: 'B',
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu                    checked: true,
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu                    group: 'theme',
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu                    checkHandler: onItemCheck
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExtJS2 0开发与实践笔记 3 ——Ext中的Menu                }, ...{
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu                    text: 'C',
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu                    checked: false,
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu                    group: 'theme',
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu                    checkHandler: onItemCheck
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExtJS2 0开发与实践笔记 3 ——Ext中的Menu                }, ...{
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu                    text: 'D',
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu                    checked: false,
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu                    group: 'theme',
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu                    checkHandler: onItemCheck
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu                }]
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu            }
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExtJS2 0开发与实践笔记 3 ——Ext中的Menu        }, ...{
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu            text: '日期选择',
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu            iconCls: 'calendar',
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu            menu: dateMenu
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExtJS2 0开发与实践笔记 3 ——Ext中的Menu        }, ...{
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu            text: '颜色选择',
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu            menu: colorMenu
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu        }]
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu    });
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu    //创建工具栏 
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu    var tb = new Ext.Toolbar();
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu    //绑定到toolbar元素
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu    tb.render('toolbar');
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu    //添加菜单
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExtJS2 0开发与实践笔记 3 ——Ext中的Menu    tb.add(...{
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu        text: 'Ext菜单测试',
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu        iconCls: 'bmenu',
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu        //注入菜单
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu        menu: menu
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu    });
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu    
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu    
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu    
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu    
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu});
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu// 自定义函数，用于从color event中提取所选数值
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExtJS2 0开发与实践笔记 3 ——Ext中的MenuExt.color = function()...{
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu    var result = '';
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu    var bool = true;
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExtJS2 0开发与实践笔记 3 ——Ext中的Menu    var formatValue = function(obj)...{
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExtJS2 0开发与实践笔记 3 ——Ext中的Menu        if (bool) ...{
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu            var obj = Array.prototype.slice.call(arguments, 0);
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu            result = String.format('{0}', obj);
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu        }
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu        bool = !bool;
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu        return result;
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu    }
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExtJS2 0开发与实践笔记 3 ——Ext中的Menu    var hexTodec = function(hexchar)...{
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu        return "0123456789ABCDEF".indexOf(hexchar.toUpperCase());
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu    }
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExtJS2 0开发与实践笔记 3 ——Ext中的Menu    return ...{
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExtJS2 0开发与实践笔记 3 ——Ext中的Menu        value: function(obj)...{
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu            return formatValue(obj);
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu        },
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExtJS2 0开发与实践笔记 3 ——Ext中的Menu        hexToRGB: function(color)...{
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu            color = formatValue(color);
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu            var now = color.replace("#", "");
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExtJS2 0开发与实践笔记 3 ——Ext中的Menu            return ...{
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu                R: (hexTodec(now.substr(0, 1)) * 16) + hexTodec(now.substr(1, 1)),
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu                G: (hexTodec(now.substr(2, 1)) * 16) + hexTodec(now.substr(3, 1)),
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu                B: (hexTodec(now.substr(4, 1)) * 16) + hexTodec(now.substr(5, 1))
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu            }
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu        },
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExtJS2 0开发与实践笔记 3 ——Ext中的Menu        init: function()...{
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu        }
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu    };
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu}
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu();
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExt.onReady(Ext.color.init, Ext.color);
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu


MenuExt.html
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu<html>
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu    <head>
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu        <title>MenuExt</title>
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu        <!--加载ExtJs资源-->
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu        <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExtJS2 0开发与实践笔记 3 ——Ext中的Menu        <script type="text/javascript" src="adapter/ext/ext-base.js">...
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu        </script>
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExtJS2 0开发与实践笔记 3 ——Ext中的Menu        <script type="text/javascript" src="ext-all.js">...
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu        </script>
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu        <!--我的js-->
ExtJS2 0开发与实践笔记 3 ——Ext中的MenuExtJS2 0开发与实践笔记 3 ——Ext中的Menu        <script type="text/javascript" src="MenuExt.js">...
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu        </script>
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu    </head>
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu    <body>
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu     <div id="toolbar"></div>
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu    </body>
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu    </body>
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu</html>
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu


运行效果图如下：
ExtJS2 0开发与实践笔记 3 ——Ext中的Menu           

相关推荐