在桌面程序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>Copyright: Copyright (c) 2008</p>
* <p>Company: LoonFramework</p>
* <p>License: http://www.apache.org/licenses/LICENSE-2.0</p>
* @author chenpeng
* @email：ceponline@yahoo.com.cn
* @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>
<!--加載ExtJs資源-->
<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>
<!--我的js-->
<script type="text/javascript" src="MenuExt.js">
</script>
</head>
<body>
<div id="toolbar"></div>
</body>
</body>
</html>
運行效果圖如下：
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>Copyright: Copyright (c) 2008</p> * <p>Company: LoonFramework</p> * <p>License: http://www.apache.org/licenses/LICENSE-2.0</p> * @author chenpeng * @email：ceponline@yahoo.com.cn * @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> <!--加載ExtJs資源--> <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> <!--我的js--> <script type="text/javascript" src="MenuExt.js"> </script> </head> <body> <div id="toolbar"></div> </body> </body></html>運行效果圖如下：
浙公網安備 33010602011771號