銆銆棣栧厛鍘諱笅杞戒簡涓涓猋UI-Ext鐨勫寘, 鏁翠釜鍖呬笉鏄緢澶? 2.5MB, 鍏朵腑榪樺寘鎷簡鏂囨。鍜屾紨紺? 鐜板湪鏈鏂扮殑鐗堟湰鏄?.0Beta1.
銆銆涓嬫潵灝辮寮濮嬪疄楠屼簡, 鎬庝箞鍏ユ墜鍛? 鐪嬬潃浠栫殑婕旂ず, 婊″ご闆炬按, 鍘葷綉绔欑湅鐪嬪惂, 鍙戠幇鏈変竴涓涔犵殑鍦版柟(Learn), 榪涘幓涔嬪悗, 鐪嬪埌浜嗗叆闂ㄧ殑鏁欑▼, 鏁欎綘鎬庝箞寮濮嬩竴涓狧elloWorld涔嬬被鐨勪笢瑗?
銆銆鐐瑰嚮Intro to Ext, 榪涘幓涔嬪悗, 鍙戠幇榪樹笉鏄粠闆跺紑濮? 棣栧厛鍘諱笅涓涓?a >IntroToExt.zip, 閲岄潰鏄竴涓狧TML鏂囦歡, 涓涓狢SS鏂囦歡鍜屼竴涓狫S鏂囦歡, 鎴戜滑鐨凥elloWorld灝辨槸浠庤繖閲屽紑濮嬬殑.
銆銆棣栧厛浠栧憡璇夋垜浠? 涓嶇鍦℉TMl鍐呴儴榪樻槸澶栭儴鍐橨S鑴氭湰, 閮介渶瑕佹妸浠ｇ爜鏀懼埌涓涓?br>
1 Ext.onReady(function() {
2 alert("Congratulations! You have Ext configured correctly!");
3 });
銆銆鐪嬪埌浜嗗惂, 榪欎釜璇硶濂囨悧? (濡傛灉瑙夊緱鍜屽鉤鏃剁湅鍒扮殑Javascript)涓嶄竴鏍? 灝卞幓鐪嬬湅Javascript鏉冨▉鎸囧崡鍚? 涓婇潰閮戒粙緇嶇殑寰堟竻妤? 榪欑璇硶搴旇灝辨槸鎵璇寸殑瀛楅潰閲忔柟娉曡皟鐢ㄥ惂 ^_^, 涔熷氨鏄, 榪欎釜浼氳皟鐢‥xt綾葷殑onReady鏂規硶, 浼犲叆涓涓尶鍚嶆柟娉? 鏂規硶鍐呴儴灝卞緢綆鍗曠殑鎵撳嚭浜嗕竴涓彁紺烘, 鎭枩浣犵殑Ext宸茬粡閰嶇疆姝ｇ‘浜? 鐒跺悗鎴戜滑榪樻槸鍦ㄥ垰鎵嶇殑閭ｄ釜妗嗘灦涓?灝辨槸鍒氭墠涓嬭澆鐨勯偅涓狪ntroToExt.zip)鏉ヨ繘琛岃瘯楠? 瑙ｅ帇緙╀互鍚? 鎶奌TMl鏂囦歡閲岀殑鎵鏈夊紩鍏ョ殑JS鏂囦歡, 閮芥寜鐓ц礬寰勬嫹璐濊繘鏉? 榪樻湁CSS鏂囦歡.2 alert("Congratulations! You have Ext configured correctly!");
3 });
銆銆鎴戜滑騫蟲椂瑕佽幏鍙栦竴涓狧TMl鏂囨。閲岀殑鑺傜偣, 璇ユ庝箞鍋?
var myDiv = document.getElementById('myDiv');
銆銆娌￠敊, 榪欐牱浼氬伐浣滅殑寰堝ソ, 鑰屼笖鐜板湪澶у鏁頒漢涔熸槸榪欐牱鏉ユ悶鐨? 浣嗘槸榪欐牱鍦ㄩ〉闈㈤噷涓涓袱涓彲浠? 澶氫簡灝變細寰堝ご鐤? 浜庢槸涔嶻UI-Ext緇欐垜浠兂鍒頒簡涓涓畝鍗曠殑鏂規硶.Ext.onReady(function() {
var myDiv = Ext.get('myDiv');
});
銆銆綆鍗曞惂(濡傛灉鐢≒rototype.js閲岀殑璇硶鏇寸畝鍗昢_^).榪欐牱灝卞彲浠ュ緱鍒頒竴涓猧d涓簃yDiv鐨勫厓绱? 鐒跺悗鎶婁粬鐨勫紩鐢ㄨ祴鍊肩粰鍙橀噺myDiv, 榪欎互鍚? 浣犲氨鍙互瀵硅繖涓猟iv榪涜鎿嶄綔浜? 姣斿:var myDiv = Ext.get('myDiv');
});
myDiv.highlight();// 榪欎釜鍏冪礌鐨勮儗鏅壊浼氫粠楂樹寒鐨勯粍鑹叉笎娓愭貳鍑?
myDiv.addClass('red');// 鍔犲叆涓涓嚜瀹氫箟鐨凜SS鏍峰紡綾?(鍦?ExtStart.css 閲岄潰瀹氫箟)
myDiv.center();// 鍦ㄦ祻瑙堝櫒閲屽眳涓繖涓厓绱?/span>
myDiv.setOpacity(.25);// 緇欒繖涓厓绱犲姞涓?5%鐨勫崐閫忔槑鏁堟灉
銆銆鐜板湪鎴戜滑鐭ラ亾鎬庢牱閫氳繃鍏冪礌鐨処D鏉ラ夋嫨涓涓厓绱? 涓嬮潰鎴戜滑鐪嬬湅鎬庝箞閫夋嫨涓鎵瑰厓绱?myDiv.addClass('red');// 鍔犲叆涓涓嚜瀹氫箟鐨凜SS鏍峰紡綾?(鍦?ExtStart.css 閲岄潰瀹氫箟)
myDiv.center();// 鍦ㄦ祻瑙堝櫒閲屽眳涓繖涓厓绱?/span>
myDiv.setOpacity(.25);// 緇欒繖涓厓绱犲姞涓?5%鐨勫崐閫忔槑鏁堟灉
Ext.select('p').highlight();
銆銆楂樹寒鎵鏈夋爣絳句負P鐨勫厓绱? 閫氳繃榪欎釜渚嬪瓙浣犲氨鍙互鐪嬪埌, 鎴戜滑鏉ラ夋嫨欏甸潰涓婄殑涓鎵瑰厓绱犳湁澶氫箞綆鍗? Ext涓烘垜浠彁渚涗簡涓涓帴鍙? 閫氳繃榪欎釜鎺ュ彛鎴戜滑鍙互鏉ヨ幏鍙栦竴鎵規兂瑕佺殑鍏冪礌, 騫朵負浠栦滑璁劇疆灞炴? 涓嶇敤寰幆, 涓嶇敤閬嶅巻姣忎竴涓厓绱?浠呬粎榪欎簺, 榪樹笉澶? Javascript鏄敤浜嬩歡鏉ラ┍鍔ㄧ殑, 鎴戜滑鍛? 灝辨潵鐪嬬湅鎬庢牱鍝嶅簲涓涓簨浠?br>
Ext.onReady(function() {
Ext.get('myButton').on('click', function(){
alert("You clicked the button");
});
});
銆銆榪欐牱灝變負欏甸潰閲孖D涓簃yButton鐨勬寜閽姞涓婁簡涓涓猚lick浜嬩歡, 瑙﹀彂榪欎釜鏃墮棿浠ュ悗浼氬脊鍑轟竴涓彁紺烘. 鍢垮樋, 鏈夋病鏈夊彂鐜? 鎴戜滑涓嶇敤鍐嶅湪欏甸潰閲岀殑鍏冪礌涓? 鍐欎笂涓涓?onclick='showMessage', 鐒跺悗鍦ㄥ幓JS閲岄潰, 鍐欎笂涓涓猻howMessage鍑芥暟浜? 鎴戜滑鍐嶆潵緇欐墍鏈夌殑P鏍囩閮藉姞涓婂崟鍑諱簨浠? 鏂規硶鍚屼笂Ext.get('myButton').on('click', function(){
alert("You clicked the button");
});
});
Ext.onReady(function() {
Ext.select('p').on('click', function() {
alert("You clicked a paragraph");
});
});
銆銆閫氳繃涓婇潰涓や釜渚嬪瓙, 鎴戜滑鍙互鐪嬪埌, 鎴戜滑鍙互鎶婁竴涓簨浠跺鐞嗙敤寰堢畝鍗曠殑鏂瑰紡瀹氫箟鍦ㄤ竴琛岄噷, 涓嶇敤緇欏嚭鍑芥暟鍚嶇О, 鍙啓涓婂嚱鏁頒綋, 灝辨槸鎵璋撶殑鍖垮悕鍑芥暟, 鍚屾牱鎴戜滑涔熷彲浠ュ湪鍙﹀鐨勫湴鏂瑰啓鍑轟竴涓嚱鏁? 鐒跺悗鎶婂嚱鏁拌祴鍊肩粰涓涓彉閲? 鎴戜滑鍐嶅湪榪欓噷鏉ヤ嬌鐢ㄥ畠.Ext.select('p').on('click', function() {
alert("You clicked a paragraph");
});
});
Ext.onReady(function() {
var paragraphClicked = function() {
alert("You clicked a paragraph");
}
Ext.select('p').on('click', paragraphClicked);
});
銆銆榪欐鎴戜滑鍏堝疄鐜頒簡涓涓嚱鏁? 鐒跺悗璧嬪肩粰paragraphClicked, 鍦ㄤ簨浠惰皟鐢ㄧ殑鏃跺欐垜浠妸榪欎釜鍙ユ焺浼犱簡榪涘幓, 榪欐牱涔熷彲浠ュ疄鐜頒簨浠剁殑鐩稿簲^_^.鎴戜滑鍐嶆潵鐪嬬湅浠栬繕鑳藉共浠涔?var paragraphClicked = function() {
alert("You clicked a paragraph");
}
Ext.select('p').on('click', paragraphClicked);
});
Ext.onReady(function() {
var paragraphClicked = function(e) {
var paragraph = Ext.get(e.target);
paragraph.highlight();
}
Ext.select('p').on('click', paragraphClicked);
});
銆銆鍦ㄦ墍鏈夌殑P鏍囩涓婂崟鍑葷殑鏃跺? 閮戒細楂樹寒榪欎釜孌佃惤, 鐒跺悗鍦ㄦ貳鍑? 閰峰惂..涓嬮潰鎴戜滑鍐嶆潵鐪嬬湅鏇撮叿鐨? 娑堟伅妗嗙殑浣跨敤.鎴戜滑鍦ㄤ笂闈㈢殑楂樹寒璇彞涓嬮潰鍐嶅姞涓婂嚑鍙?br>
var paragraphClicked = function(e) {
var paragraph = Ext.get(e.target);
paragraph.highlight();
}
Ext.select('p').on('click', paragraphClicked);
});
var paragraph = Ext.get(e.target);
paragraph.highlight();
Ext.MessageBox.show({
title: 'Paragraph Clicked',
msg: paragraph.dom.innerHTML,
width:400,
buttons: Ext.MessageBox.OK,
animEl: paragraph
});
銆銆鍐嶆鐐瑰嚮涓涓嬮〉闈腑鐨勬钀芥爣絳? 鐪嬬湅浼氭湁浠涔堟晥鏋?? 綆鐩村お甯呬簡, 鎴戜滑鐪嬪埌浜嗕竴涓秷鎭, 鍑犱箮鏄崐閫忔槑鐨? 閲岄潰濉厖浜嗘垜浠钀戒腑鐨勬枃瀛? 鍦ㄥ叧闂秷鎭鐨勬椂鍊? 榪樹細鍑虹幇閭ｇ闄勭潃鏁堟灉, 甯呮垚楣頒簡..涓昏灝辨槸鏈鍚庨偅涓睘鎬х殑浣跨敤. animEl: paragraph, 榪欎釜灞炴у彲浠ヨ緗檮鐫鏁堟灉浼氶檮鐫鍒板摢涓厓绱犱笂, 鎴戜滑閫夋嫨浜嗚Е鍙戞椂闂寸殑閭ｄ釜孌佃惤.鐪嬪埌榪欓噷, 鎬庝箞鏍? 嬋鍔ㄤ簡鍚? 鍢垮樋,鎴戜篃鎸烘縺鍔ㄧ殑.鍚庨潰榪樻湁Ajax娑堟伅鐨勭浉搴? 鎴戜滑鏀瑰ぉ鍐嶆潵緇х畫瀛︿範鍚?.
paragraph.highlight();
Ext.MessageBox.show({
title: 'Paragraph Clicked',
msg: paragraph.dom.innerHTML,
width:400,
buttons: Ext.MessageBox.OK,
animEl: paragraph
});
]]>