使用
Ext JS程式庫到現在將近兩個多月，直接和大家說：這是個好東西！學習和使用曲線都不會很困難，而且Ext JS的API寫得十分詳盡，參考
http://www.extjs.com/deploy/dev/docs/，對於初學者來說，可以參考Community Learning Center
http://www.extjs.com/learn/Main_Page(這個網址不是很好找)，大家可以上去看看！
當你要使用Ext JS時，基本上僅需加入下列這三列程式碼：
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
另外建立一個自己的JavaScript檔案，內容大概是這樣：
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
Ext.onReady(function(){
//填入你的程式碼
});
onReady( Function fn, [Object scope], [boolean options] ) : void實際上是onDocumentReady( Function fn, [Object scope], [boolean options] ) : void的縮寫，此函式方法需要三個參數(parameter)，後兩個可選擇使用，因此呼叫時需要傳遞引數(argument)來呼叫。
目前最新的版本是3.1.0，我從3.0.0和3.0.3用到現在，程式庫的更新也都很方便，只要將檔案更換就可以繼續使用新功能。
一樣的，推薦一本書：
徐會生、何啟偉、康愛媛，Ext JS開發實戰：次世代Ajax解決方案，台北：精誠資訊(悅知文化)，2009。
Ext JS中所有的物件都是Ext.Component元件，元件的設定都是使用JSON格式(沒有使用過Ext JS要特別注意和熟悉)。
另外，因為開發Web Desktop網頁應用程式的需求，因而使用ext-3.1.0\examples\desktop的範例程式，加上分析與修改程式碼符合自己的需要，在這裡貼上程式的五個Ext JS的JavaScript供大家參考。
App.js
/*!
* Ext JS Library 3.0.3
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
/*--------------------------------------------------*/
//定義桌面應用程式物件
Ext.app.App = function(cfg){
Ext.apply(this, cfg);//複製cfg屬性到本物件
//自行定義兩個事件為ready與beforeunload
this.addEvents({
'ready': true,//自行定義
'beforeunload': true//自行定義
});
Ext.onReady(this.initApp, this);//呼叫initApp方法，初始化物件
};
/*--------------------------------------------------*/
//定義桌面應用程式物件子類別Ext.app.App，繼承父類別Ext.util.Observable。
Ext.extend(Ext.app.App, Ext.util.Observable, {
//以下為繼承之後新增的成員
isReady: false,
startMenu: null,//開始選單
modules: null,//應用程式模組
getStartConfig: function(){//讓使用者建立物件時填入
},
//建立桌面應用程式物件之後，會執行initApp函數
initApp: function(){//初始化桌面應用程式
this.startConfig = this.startConfig || this.getStartConfig();//開始功能表組態
this.desktop = new Ext.Desktop(this);//建立桌面物件，參考Desktop.js
//desktop物件之中，包含taskbar物件，其中taskbar物件含有startMenu
this.launcher = this.desktop.taskbar.startMenu;
//launcher發射器
this.modules = this.getModules();//取得模組建立
if (this.modules) {
this.initModules(this.modules);//如果模組存在，初始化模組
}
this.init();
//appends an event handler to an element, shorthand for addListener
//參數：HTML元素，事件名稱，事件處理函數，執行範圍
Ext.EventManager.on(window, 'beforeunload', this.onUnload, this);
//觸發ready事件
this.fireEvent('ready', this);
this.isReady = true;//完成初始化
},
getModules: Ext.emptyFn,//A reusable empty function讓使用者建立物件時填入
init: Ext.emptyFn,//A reusable empty function讓使用者建立物件時填入
//這裡將模組加入開始功能表
initModules: function(ms){//初始化模組
for (var i = 0, len = ms.length; i < len; i++) {
var m = ms[i];
//modify!!
if(m.show==true)
this.launcher.add(m.launcher);
m.app = this;
}
},
getModule: function(name){//取得模組
var ms = this.modules;
for (var i = 0, len = ms.length; i < len; i++) {
if (ms[i].id == name || ms[i].appType == name) {
return ms[i];
}
}
return '';
},
//定義事件處理
onReady: function(fn, scope){
if (!this.isReady) {
this.on('ready', fn, scope);
}
else {
fn.call(scope, this);
}
},
getDesktop: function(){
return this.desktop;
},
//定義事件處理
onUnload: function(e){
if (this.fireEvent('beforeunload', this) === false) {
e.stopEvent();
}
}
});
/*--------------------------------------------------*/
