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

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

在桌面程序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。

其中组织关系如下图：

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

/**/ /**

* <p>Title: LoonFramework</p>

* <p>Description:Ext的Menu用例</p>

* <p>Company: LoonFramework</p>

* <p>License: http://www.apache.org/licenses/LICENSE-2.0</p>

* @author chenpeng

* @email：[email protected]

* @version 0.1

Ext.onReady( function () ... {

Ext.QuickTips.init();

//菜单选项

var dateMenu = new Ext.menu.DateMenu(...{

handler: function(dp, date)...{

Ext.MessageBox.alert('日期选择', '选择日期为: ' + date.format('Y/m/d'), '');

}

});

var colorMenu = new Ext.menu.ColorMenu(...{

id: 'colorMenu',

handler: function(cm, color)...{

var rgb=Ext.color.hexToRGB(color);

Ext.MessageBox.alert('颜色','R='+rgb.R+',G='+rgb.G+',B='+rgb.B, '');

}

});

function onItemCheck(item, checked)...{

Ext.MessageBox.alert('选择', '当前点选[' + item.text + '],状态为 ' + (checked ? 'checked' : 'unchecked'), '');

}

var menu = new Ext.menu.Menu(...{

id: 'mainMenu',

items: [...{

text: '选项1',

//默认为选中

checked: true,

//选中处理方式为onItemCheck

checkHandler: onItemCheck

}, ...{

text: '选项2',

checked: true,

checkHandler: onItemCheck

}, ...{

text: '选项3!',

checked: true,

checkHandler: onItemCheck

}, //分隔菜单

'-', ...{

text: '单选菜单',

menu: ...{

items: [...{

text: 'A',

checked: false,

group: 'theme',

checkHandler: onItemCheck

}, ...{

text: 'B',

checked: true,

group: 'theme',

checkHandler: onItemCheck

}, ...{

text: 'C',

checked: false,

group: 'theme',

checkHandler: onItemCheck

}, ...{

text: 'D',

checked: false,

group: 'theme',

checkHandler: onItemCheck

}]

}

}, ...{

text: '日期选择',

iconCls: 'calendar',

menu: dateMenu

}, ...{

text: '颜色选择',

menu: colorMenu

}]

});

//创建工具栏

var tb = new Ext.Toolbar();

//绑定到toolbar元素

tb.render('toolbar');

//添加菜单

tb.add(...{

text: 'Ext菜单测试',

iconCls: 'bmenu',

//注入菜单

menu: menu

});

} );

// 自定义函数，用于从color event中提取所选数值

Ext.color = function () ... {

var result = '';

var bool = true;

var formatValue = function(obj)...{

if (bool) ...{

var obj = Array.prototype.slice.call(arguments, 0);

result = String.format('{0}', obj);

}

bool = !bool;

return result;

}

var hexTodec = function(hexchar)...{

return "0123456789ABCDEF".indexOf(hexchar.toUpperCase());

}

return ...{

value: function(obj)...{

return formatValue(obj);

hexToRGB: function(color)...{

color = formatValue(color);

var now = color.replace("#", "");

return ...{

R: (hexTodec(now.substr(0, 1)) * 16) + hexTodec(now.substr(1, 1)),

G: (hexTodec(now.substr(2, 1)) * 16) + hexTodec(now.substr(3, 1)),

B: (hexTodec(now.substr(4, 1)) * 16) + hexTodec(now.substr(5, 1))

}

init: function()...{

}

};

}

();

Ext.onReady(Ext.color.init, Ext.color);

MenuExt.html

< html >

< head >

< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >

< title > MenuExt </ title >

< link rel ="stylesheet" type ="text/css" href ="resources/css/ext-all.css" />

< script type ="text/javascript" src ="adapter/ext/ext-base.js" > ...

</ script >

< script type ="text/javascript" src ="ext-all.js" > ...

</ script >

< script type ="text/javascript" src ="MenuExt.js" > ...

</ script >

</ head >

< body >

< div id ="toolbar" ></ div >

</ body >

</ html >

运行效果图如下：

给我老师的人工智能教程打call！http://blog.csdn.net/jiangjunshow

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

给我老师的人工智能教程打call！http://blog.csdn.net/jiangjunshow

猜你喜欢