| « | December 2025 | » | | 日 | 一 | 二 | 三 | 四 | 五 | 六 | | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | | | | |
|
公告 |
| 本博客在此声明所有文章均为转摘，只做资料收集使用。并无其他商业用途。 |
| Blog信息 |
|
blog名称:
日志总数:210
评论数量:205
留言数量:-19
访问次数:929064
建立时间:2007年5月10日 |
| |
|
 [EXT2.0]ExtJS2.0开发与实践笔记[3]——Ext中的Menu
文章收藏, 网上资源, 软件技术, 电脑与网络
李小白 发表于 2008/4/24 22:58:06 |
在桌面程序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。 其中组织关系如下图：500)this.width=500'>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
500)this.width=500'>500)this.width=500'>/**//**500)this.width=500'> * <p>Title: LoonFramework</p>500)this.width=500'> * <p>Description:Ext的Menu用例</p>500)this.width=500'> * <p>Copyright: Copyright (c) 2008</p>500)this.width=500'> * <p>Company: LoonFramework</p>500)this.width=500'> * <p>License: http://www.apache.org/licenses/LICENSE-2.0</p>500)this.width=500'> * @author chenpeng500)this.width=500'> * @email：ceponline@yahoo.com.cn500)this.width=500'> * @version 0.1500)this.width=500'> */500)this.width=500'>500)this.width=500'>Ext.onReady(function()...{500)this.width=500'> Ext.QuickTips.init();500)this.width=500'> //菜单选项500)this.width=500'>500)this.width=500'> var dateMenu = new Ext.menu.DateMenu(...{500)this.width=500'>500)this.width=500'> handler: function(dp, date)...{500)this.width=500'> Ext.MessageBox.alert('日期选择', '选择日期为: ' + date.format('Y/m/d'), '');500)this.width=500'> }500)this.width=500'> });500)this.width=500'> 500)this.width=500'>500)this.width=500'> var colorMenu = new Ext.menu.ColorMenu(...{500)this.width=500'> id: 'colorMenu',500)this.width=500'>500)this.width=500'> handler: function(cm, color)...{500)this.width=500'> var rgb=Ext.color.hexToRGB(color);500)this.width=500'> Ext.MessageBox.alert('颜色','R='+rgb.R+',G='+rgb.G+',B='+rgb.B, '');500)this.width=500'> }500)this.width=500'> });500)this.width=500'> 500)this.width=500'>500)this.width=500'> function onItemCheck(item, checked)...{500)this.width=500'> Ext.MessageBox.alert('选择', '当前点选[' + item.text + '],状态为 ' + (checked ? 'checked' : 'unchecked'), '');500)this.width=500'> }500)this.width=500'> 500)this.width=500'>500)this.width=500'> var menu = new Ext.menu.Menu(...{500)this.width=500'> id: 'mainMenu',500)this.width=500'>500)this.width=500'> items: [...{500)this.width=500'> text: '选项1',500)this.width=500'> //默认为选中500)this.width=500'> checked: true,500)this.width=500'> //选中处理方式为onItemCheck 500)this.width=500'> checkHandler: onItemCheck500)this.width=500'>500)this.width=500'> }, ...{500)this.width=500'> text: '选项2',500)this.width=500'> checked: true,500)this.width=500'> checkHandler: onItemCheck500)this.width=500'>500)this.width=500'> }, ...{500)this.width=500'> text: '选项3!',500)this.width=500'> checked: true,500)this.width=500'> checkHandler: onItemCheck500)this.width=500'> }, //分隔菜单500)this.width=500'>500)this.width=500'> '-', ...{500)this.width=500'> text: '单选菜单',500)this.width=500'>500)this.width=500'> menu: ...{500)this.width=500'>500)this.width=500'> items: [...{500)this.width=500'> text: 'A',500)this.width=500'> checked: false,500)this.width=500'> group: 'theme',500)this.width=500'> checkHandler: onItemCheck500)this.width=500'>500)this.width=500'> }, ...{500)this.width=500'> text: 'B',500)this.width=500'> checked: true,500)this.width=500'> group: 'theme',500)this.width=500'> checkHandler: onItemCheck500)this.width=500'>500)this.width=500'> }, ...{500)this.width=500'> text: 'C',500)this.width=500'> checked: false,500)this.width=500'> group: 'theme',500)this.width=500'> checkHandler: onItemCheck500)this.width=500'>500)this.width=500'> }, ...{500)this.width=500'> text: 'D',500)this.width=500'> checked: false,500)this.width=500'> group: 'theme',500)this.width=500'> checkHandler: onItemCheck500)this.width=500'> }]500)this.width=500'> }500)this.width=500'>500)this.width=500'> }, ...{500)this.width=500'> text: '日期选择',500)this.width=500'> iconCls: 'calendar',500)this.width=500'> menu: dateMenu500)this.width=500'>500)this.width=500'> }, ...{500)this.width=500'> text: '颜色选择',500)this.width=500'> menu: colorMenu500)this.width=500'> }]500)this.width=500'> });500)this.width=500'> //创建工具栏 500)this.width=500'> var tb = new Ext.Toolbar();500)this.width=500'> //绑定到toolbar元素500)this.width=500'> tb.render('toolbar');500)this.width=500'> //添加菜单500)this.width=500'>500)this.width=500'> tb.add(...{500)this.width=500'> text: 'Ext菜单测试',500)this.width=500'> iconCls: 'bmenu',500)this.width=500'> //注入菜单500)this.width=500'> menu: menu500)this.width=500'> });500)this.width=500'> 500)this.width=500'> 500)this.width=500'> 500)this.width=500'> 500)this.width=500'>});
|
阅读全文(3084) | 回复(0) | 编辑 | 精华 |
| |
|