寮濮嬶紒
絎竴姝ヨ鍋氱殑鏄紝涓嬭澆鏈暀紼嬬殑紺轟緥鏂囦歡銆俍ip鏂囦歡鍖呮嫭涓変釜鏂囦歡錛?strong>ExtMenu.html,銆?strong>ExtMenu.js銆?strong>ExtMenu.css銆?/strong>鍜?strong>list-items.gif銆傝В鍖呰繖鍥涗釜鏂囦歡鍒癊xt鐨勫畨瑁呯洰褰曚腑錛堜緥濡傦紝Ext鏄湪鈥淐:\code\Ext\v1.0鈥濅腑錛岄偅搴旇鍦?v1.0"閲岄潰鏂板緩鐩綍鈥渕enututorial鈥濄傚弻鍑?strong>ExtMenu.htm錛屾帴鐫浣犵殑嫻忚鍣ㄦ墦寮鍚姩欏甸潰錛屽簲璇ヤ細(xì)鏈変竴鏉℃秷鎭憡璇変綘閰嶇疆宸插畬姣曘傚鏋滄槸涓涓狫avascript閿欒錛岃鎸夌収欏甸潰涓婄殑鎸囧紩鎿嶄綔銆?/p>
鍦ㄤ綘甯哥敤鐨処DE涓垨鏂囨湰緙栬緫鍣ㄤ腑錛屾墦寮ExtMenu.js鐪嬬湅錛?/p>
Ext.onReady(function() {
alert("You have Ext configured correctly! We are now ready to do some Ext Menu Magic!");
});
鍦‥xt鐨勪粙緇嶄腑錛屾垜浠璁鴻繃浣跨敤Ext鐨勫師鍥犲拰Ext.onReady()鍑芥暟鐨勫姛鑳姐?/p>
鍒涘緩綆鏄撶殑鑿滃崟
鍏堢湅鐪嬫庝箞鍋氫竴涓熀鏈殑鑿滃崟錛岀劧鍚庡啀璁ㄨ浠ｇ爜涓殑鍚勪釜緇勪歡鍜岀煡璇嗙偣銆傚姞鍏ヤ笅鍒椾唬鐮佸埌onReady鍑芥暟涓?
var menu = new Ext.menu.Menu({
id: 'basicMenu',
items: [{
text: 'An item',
handler: clickHandler
},
new Ext.menu.Item({
text: 'Another item',
handler: clickHandler
}),
'-',
new Ext.menu.CheckItem({
text: 'A check item',
checkHandler: checkHandler
}),
new Ext.menu.CheckItem({
text: 'Another check item',
checkHandler: checkHandler
})
]
});
var tb = new Ext.Toolbar('toolbar', [{
text:'Our first Menu',
menu: menu // 鍒嗛厤menu鍒版寜閽?
}
]);
function clickHandler() {
alert('Clicked on a menu item');
}
function checkHandler() {
alert('Checked a menu item');
}
OK 浠旂粏鐪嬬湅榪欓噷鐨勪唬鐮侊紝棣栧厛瀹炰緥鍖栦竴涓狹enu綾諱負(fù)鍙橀噺鈥渕enu鈥濄傜劧鍚嶮enu鐨勬瀯寤哄嚱鏁版帴鍙椾竴涓茬殑Object Literal浣滀負(fù)鍙傛暟錛屽湪鍏堝墠鐨凟xt鏁欑▼涓垜浠凡緇忚瀵筄bjectLiteral榪涜浜?jiǎn)瑙ｃ傚綋鍓嶇殑ObjectLiteral灝卞寘鍚簡(jiǎn)鎴戜滑鑿滃崟涓兂瑕佺殑灞炴с傜涓涓睘鎬ф槸鎴戜滑鍒嗛厤鐨処D錛岀◢鍚庢垜浠彲浠D鏉ヨ幏鍙朚enu鐨勫紩鐢ㄣ?
鍚勭Item鐨勭被鍨?/h1>
灞炴р渋tems鈥濆彲鑳芥槸鏈閲嶈鐨勫睘鎬у綋涓殑涓涓傜暀鎰忎竴涓嬭娉曞叾瀹炴垜浠槸灝嗕竴涓暟緇勪綔涓哄鹼紙value)浼犲埌灞炴т腑鍘匯傛暟緇勯噷鐨勬暟鎹氨鏄垜浠兂瑕佸湪鑿滃崟涓嚭鐜扮殑姣忎竴欏廣傛瘡鏈緥涓垜浠斁浜?jiǎn)鍏釜鑿滃崟椤瑰Q屼絾浣曡В姣忛」鐨勮娉曪紙Syntax錛夐兘涓嶅敖鐩稿悓鍛紵絎竴欏規(guī)槸涓涓睴bject Literal錛屽寘鍚竴緇勬垜浠彲閰嶇疆鐨刵ame/value銆侲xt鐨勫簳灞傚簱浼?xì)湄?fù)榪欎覆Object Literal鎸夊叾閰嶇疆榛樿鍦板垱寤篿tem瀵硅薄銆傛帴鐫絎簩欏規(guī)槸Item瀵硅薄鏈韓錛屽悗闈㈣窡鐫鍒嗛殧絎︼紝鏈鍚庝袱涓槸鍗曢夋欏廣傛暣涓繃紼嬫紨紺轟簡(jiǎn)Ext Widget濡備綍鍔ㄦ佺殑榪愯銆備笅渚嬪悇欏瑰彲濉叆鍒版暟緇勪腑錛?/p>
{text: 'Foo'} // Ext 杞崲榪欎釜閰嶇疆瀵硅薄鍒癿enu item
'Straight Text' //鏂囨湰鎴栧師濮媓tml (綰枃瀛?
'-' // 鍒涘緩鍒嗛殧絎?
new Ext.menu.Item({text: 'Foo'}) // 鍒涘緩涓涓爣鍑唅tem (鍚寋text: 'Foo'})
new Ext.menu.CheckItem() // 鍒涘緩鍗曢夋item
new Ext.menu.DateItem() // 鍒涘緩menu鍐呯疆鐨勬棩鍘嗘帶浠?
new Ext.menu.ColorItem() //鍒涘緩涓涓鑹查噰闆嗗櫒
new Ext.menu.BaseItem(document.getElementById('my-div')) //鍏佽浣犲姞鍏ヤ換浣曞厓绱?
Item灞炴?/h1>
Item鎺ュ彈浠涔堢被鍨嬬殑灞炴у憿錛熸湰渚嬩腑鎴戜滑浣跨敤浜?jiǎn)杩欎袱灞炴э細(xì)
text: 'An item', handler: clickHandler
絎竴涓槸Item鐨勬枃鏈傜浜屼釜鏄綋鐢ㄦ埛鍗曞嚮涓鍗曞嚮Item鎵瑙﹀彂鐨勪簨浠跺鐞嗗嚱鏁幫紙event handler function錛夈傛湰渚嬩腑鎴戜滑灝嗗嚱鏁癱lickHandler()鍜宑heckHandler()瀹氫箟鍦ㄤ唬鐮佺殑鏈鍚庛備綔涓烘紨紺虹敤閫旓紝榪欎粎浠呮槸鐢╝lert()閫氱煡浣犳湁涓涓崟鍑葷殑娑堟伅銆?br />鍏跺畠鏈夌敤鐨勫睘鎬ф槸錛?/p>
cls: 'a-class-name' , // 涓烘爣鍑咺tem鎵嬪姩璁劇疆鏍峰紡鍜屽浘鏍嘔CON icon: 'url', // 濡備笉鎯崇敤CSS,鍙洿鎺ヨ緗浘鏍囩殑URL group: 'name of group', //鍙傜敤澶氶夐」錛屼繚璇佸彧鏈変竴欏硅閫変腑
瀹屾暣鐨刬tem灞炴у垪琛ㄥ湪Menu Item鏂囨。涓?/p>
鍦║I涓憜鏀捐彍鍗?/h1>
So,鍒涘緩濂界殑Menu瀵硅薄宸茬粡鏈変袱涓熀鏈殑item浜?jiǎn)锛岀劧鑰屾垜浠庝箞鎶婂畠浠憜鏀懼埌欏甸潰涓憿?鍦║I涓竴涓猰enu鍙互鍒嗛厤鍒板涓綅緗紙鍚屼竴涓璞★紝涓嶅悓浣嶇疆澶氭浣跨敤錛夛紝榪欐鏄疎xt濡傛寮哄ぇ鐨勫師鍥狅細(xì)姣忎竴涓櫒浠訛紙widget錛夊垏鎴愨滀竴鍧椾竴蹇濈殑綾伙紝鏉ユ瀯寤烘暣涓潰鍚戝璞＄殑鍔ㄦ佺粨鏋勶紙Structure錛夈傝繖鎰忓懗鐫menu鍙敤浜庝笉鍚岀殑鍦哄悎銆傛垜浠彲灝唌enu鏀懼埌鏈夋寜閽殑toolbar涓紝鎴栫敤欏甸潰涓殑涓涓寜閽潵灞曞紑menu錛岀敋鑷沖彲鍦‥xt鐨勫叾瀹冨櫒浠朵腑錛坵idgets錛変嬌鐢╩enu浣滀負(fù)涓婁笅鏂囪彍鍗曪紙Context Menu錛夈?/p>
鏈緥涓垎閰嶄竴涓猰enu鍒皌oolbar涓細(xì)
var tb = new Ext.Toolbar('toolbar', [{
text:'Our first Menu',
menu: menu // 鍒嗛厤menu鍒皌oolbar
}
]);
Ext.Toolbar鏋勫緩鍑芥暟鎺ュ彈涓や釜鍙傛暟錛岀涓涓槸鎸囧畾toolbar鐨勫鍣紙contrainer錛夛紱絎簩涓弬鏁版槸鍖呭惈鍏ㄩ儴鎸夐挳鐨勬暟緇勩傝繖閲?鎴戜滑鍙嬌鐢ㄤ竴涓寜閽?姝ｅ鎵瑙侊紝鎸夐挳瀹炶川涓婃槸涓涓茬敱鏁扮粍緇勬垚鐨凮bject Literal,鍚屾椂榪欎釜Object Litetal浜﹀寘鍚簡(jiǎn)涓嶅悓鐨勫睘鎬с備笅闈㈡槸涓緇勬寜閽璞＄殑Object Litetal灞炴э細(xì)
cls: 'a-class-name' , //鎵嬪姩璁劇疆鏍峰紡鍜屽浘鏍嘔CON icon: 'url', // 濡備笉鎯崇敤CSS,鍙洿鎺ヨ緗浘鏍囩殑URL text:'Our first Menu', // 鎸夐挳鎻愮ず涔嬫枃瀛? menu: menu // 鍙互鏄痬enu涔媔d鎴栭厤緗璞?
Menu鐨勫垎閰嶆柟寮忥細(xì)
鍒氭墠璋堝埌濡備綍鍒嗛厤Menu鍒板伐鍏鋒潯涓紙toolbar錛夛紝緇ц屼害璁ㄨmenu鍒嗛厤鐨勪笉鍚屾柟寮忥紝鐪嬬湅鏈夊叧鐨勭粏鑺傛槸鎬庢牱鐨勩係o,鍥犱負(fù)menu灞炴у彲浠ヤ互涓嶅悓鏂瑰紡鍦板垎閰嶏紝鍗蟲槸鍙互璧嬩簣涓涓猰enu瀵硅薄錛屾垨鏄凡緇忓緩濂界殑menuID錛屾垨鐩存帴鏄竴涓猰enu config瀵硅薄銆備綘搴旇鏈夋満浼?xì)灏睘疂璇曚竴涓嬩互澶氱鏂瑰紡鍒涘緩menu錛屽洜涓虹被浼肩殑鏂瑰紡鏂規(guī)硶鍦‥xt鐨刉idgets闅忓鍙銆備笅闈㈢殑浠ｇ爜婕旂ず浜?jiǎn)濡備綍鐢ㄤ笉鍚岀殑鏂规硶鏉ュ仛鍑鸿窡鑼冧緥涓鏍風(fēng)殑鏁堟灉錛屽敮涓鐩稿悓鐨勫氨鏄痬enu瀵硅薄鐨刢onfig銆傝彍鍗曚腑鍖呮嫭涓や釜瀛愯彍鍗曘佷竴涓狣ataItem瀹瑰櫒銆佷竴涓狢olorItem瀹瑰櫒銆傚彟澶栨敞鎰廵vent handing鍑芥暟闇涓や釜鍙傛暟鏉ヨ幏鍙栦簨浠舵洿澶氱殑淇℃伅鍜岀煡閬撳摢涓猧tem琚崟鍑諱簡(jiǎn)銆傚彲浠ョ殑璇濓紝鎶婁笅闈㈢殑浠ｇ爜涔熷姞鍏ュ埌onReady鍑芥暟涓紝浜茶韓浣撻獙涓涓嬶細(xì)
var dateMenu = new Ext.menu.DateMenu({
handler : function(datepicker, date){
alert('Date Selected', 'You chose: '+ date.format('M j, Y'));
}
});
var colorMenu = new Ext.menu.Menu({
id: 'colorMenu', // the menu's id we use later to assign as submenu
items: [
new Ext.menu.ColorItem({
selectHandler: function(colorpicker, color){
alert('Color Selected', 'You chose: ' + color);
}
})
]
});
var tb = new Ext.Toolbar('toolbar', [{
text:'Our first Menu',
menu: {
id: 'basicMenu',
items: [{
text: 'An item',
handler: clickHandler
}, {
text: 'Another item',
handler: clickHandler
},
'-',
new Ext.menu.CheckItem({
text: 'A check item',
checkHandler: checkHandler
}),
new Ext.menu.CheckItem({
text: 'Another check item',
checkHandler: checkHandler
}),
'-', {
text: 'DateMenu as submenu',
menu: dateMenu, // assign the dateMenu we created above by variable reference,
handler: date
}, {
text: 'Submenu with ColorItem',
menu: 'colorMenu' // we assign the submenu containing a ColorItem using it's id
}
]
}
}
]);
function clickHandler(item, e) {
alert('Clicked on the menu item: ' + item.text);
}
function checkHandler(item, e) {
alert('Checked the item: ' + item.text);
}
娉ㄦ剰錛?/strong>鐣欐剰鍑犵涓嶅悓鐨勬柟娉曞姞鍏ュ瓙鑿滃崟錛佽繕鏈塭ven handing鍑芥暟鍜孋oloritem銆丏ataMenu鍖垮悕鍑芥暟涔嬮棿鐨勫尯鍒?/p> Ok鎴戜滑鐢ㄤ笂榪扮殑鏂規(guī)硶錛屽垱寤轟簡(jiǎn)toolbar鍜宮enu錛岀湅璧鋒潵搴旇鏄繖鏍風(fēng)殑錛?/p> 涓婃枃鎻愬強(qiáng)menu鍙憜鏀懼湪UI鐨勪換浣曚綅緗紝榪欓噷灝嗕負(fù)浣犳紨紺簃enu濡備綍涓嶵oolbars銆丮eneuButtons銆丆ontext Menus's閰嶅悎宸ヤ綔錛屽寘鎷竴浜涙湁鐢ㄧ殑鏂規(guī)硶鍜屽姩鎬佹坊鍔犵殑鍔熻兘銆?/p>MenuButton 榪欐潯Toolbar鏈変袱涓寜閽備竴涓垎闅旂錛屽拰涓涓函鍥炬爣鐨勬寜閽紙闄凲uicktips錛夈備綘鍙皾璇曡繖鏍峰仛錛屾妸zip鏂囦歡涓?gif鍔犲叆 涓浜涗唬鐮佺墖孌碉紝鏈夊姪浣犳彁楂樻晥鐜囷紝鐣欐剰娉ㄩ噴錛? 鐜板湪浣犲凡緇忎簡(jiǎn)瑙ｈ彍鍗曠粍浠舵槸濡備綍宸ヤ綔浜?jiǎn)銆備笅闈㈢殑璧勬簮鏈夊姪鎮(zhèn)ㄨ繘涓姝ユ洿娣卞叆瀛︿範(fàn)鑿滃崟錛?/p>
緇冧竴緇?/h1>
new Ext.MenuButton('menubutton', {text:'Menu Button 1', menu: dateMenu});
鍔ㄦ佹坊鍔犺彍鍗曟寜閽埌Toolbar
Ext.QuickTips.init();
tb.add('-', {
icon: 'list-items.gif', //鍥炬爣鍙崟琛屾樉紺?
cls: 'x-btn-icon', // 綰浘鏍?
tooltip: 'Quick Tips
鎻愮ず鏂囧瓧'
});
鏇存柟渚跨殑鏄?/h1>
// Menus鏇村鐨凙PI鍐呭
// 鍔ㄦ?澧炪佸噺鍏冪礌
menu.addSeparator(); //鍔ㄦ佸姞鍏ュ垎闅旂
var item = menu.add({
text: 'Dynamically added Item'
});
// items 瀹屾暣鏀寔Observable API
item.on('click', onItemClick);
// items can easily be looked up
menu.add({
text: 'Disabled Item',
id: 'disableMe' // <-- 璁劇疆ID渚夸簬鏌ユ壘lookup
// disabled: true <-- 鍏堜笉disabled 鑰岄噰鐢ㄤ笅闈㈢殑鏂瑰紡
});
// 鐢?id 鎴?index璁塊棶
menu.items.get('disableMe').disable();
涓嬩竴姝ユ槸