ExtJS2 0開發與實踐筆記 3 ——Ext中的Menu
阿新 • • 發佈:2018-11-20
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!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>Copyright: Copyright (c) 2008</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 >
<!-- 載入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 >
執行效果圖如下: