轉載自 hi_suny
ExtJS是一個Ajax框架，是一個用javascript寫的，用於在客戶端創建豐富多彩的web應用程序界面。ExtJS可以用來開發RIA也即富 客戶端的AJAX應用，是一個與後臺技術無關的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各種開發語言開發的應用中。
獲得ExtJS
要使用ExtJS，那麼首先要得到ExtJS庫文件，該框架是一個開源的，可以直接從官方網站下載，網址
http://extjs.com/download
，進入下載頁面可以看到大致如下所示的界面，可以選擇選擇1.1或2.0版本。
應用ExtJS
應用extjs需要在頁面中引入extjs的樣式及extjs庫文件，樣式
文件爲resources/css/ext-all.css，extjs的js庫文件主要包含兩個，adapter/ext/ext-base.js及
ext-all.js，其中ext-base.js表示框架基礎庫，ext-
all.js是extjs的核心庫。adapter表示適配器，也就是說可以有多種適配器，因此，可以把adapter/ext/ext-base.js
換成adapter/jquery/ext-jquery-adapter.js，或adapter/prototype/ext-prototype-
adapter.js等
核心簡介
ExtJS由一系列的類庫組成，一旦頁面成功加載了ExtJS庫後，我們就可以在頁面中通過 javascript調用ExtJS的類及控件來實現需要的功能。ExtJS的類庫由以下幾部分組成：底層API(core)：底層API中提供了對 DOM操作、查詢的封裝、事件處理、DOM查詢器等基礎的功能。其它控件都是建立在這些底層api的基礎上，底層api位於源代碼目錄的core子目錄 中，包括DomHelper.js、Element.js等文件，如圖xx所示。
控件(widgets)：控件是指可以直接在頁面中創建的可視化組件，比如面板、選項板、表格、樹、窗口、菜 單、工具欄、按鈕等等，在我們的應用程序中可以直接通過應用這些控件來實現友好、交互性強的應用程序的UI。控件位於源代碼目錄的widgets子目錄 中，包含如圖xx所示。
實用工具Utils：Ext提供了很多的實用工具，可以方便我們實現如數據內容格式化、JSON數據解碼或反解碼、對Date、Array、發送Ajax請求、Cookie管理、CSS管理等擴展等功能，如圖所示：
ExtJS的組件
Ext2.0對框架進行了非常大的重構，其中最重要的就是形成了一個結構及層次分明的組件體系，由這些組件形成
了Ext的控件，Ext組件是由
Component類定義，每一種組件都有一個指定的xtype屬性值，通過該值可以得到一個組件的類型或者是定義一個指定類型的組件。
ExtJS中的組件體系由下圖所示：
組件大致可以分成三大類，即基本組件、工具欄組件、表單及元素組件。
基本組件有:
xtype Class
------------- ------------------
box Ext.BoxComponent 具有邊框屬性的組件
button Ext.Button 按鈕
colorpalette Ext.ColorPalette 調色板
component Ext.Component 組件
container Ext.Container 容器
cycle Ext.CycleButton
dataview Ext.DataView 數據顯示視圖
datepicker Ext.DatePicker 日期選擇面板
editor Ext.Editor 編輯器
editorgrid Ext.grid.EditorGridPanel 可編輯的表格
grid Ext.grid.GridPanel 表格
paging Ext.PagingToolbar 工具欄中的間隔
panel Ext.Panel 面板
progress Ext.ProgressBar 進度條
splitbutton Ext.SplitButton 可分裂的按鈕
tabpanel Ext.TabPanel 選項面板
treepanel Ext.tree.TreePanel 樹
viewport Ext.ViewPort 視圖
window Ext.Window 窗口
工具欄組件有
---------------------------------------
toolbar Ext.Toolbar 工具欄
tbbutton Ext.Toolbar.Button 按鈕
tbfill Ext.Toolbar.Fill 文件
tbitem Ext.Toolbar.Item 工具條項目
tbseparator Ext.Toolbar.Separator 工具欄分隔符
tbspacer Ext.Toolbar.Spacer 工具欄空白
tbsplit Ext.Toolbar.SplitButton 工具欄分隔按鈕
tbtext Ext.Toolbar.TextItem 工具欄文本項
表單及字段組件包含：
---------------------------------------
form Ext.FormPanel Form面板
checkbox Ext.form.Checkbox checkbox錄入框
combo Ext.form.ComboBox combo選擇項
datefield Ext.form.DateField 日期選擇項
field Ext.form.Field 表單字段
fieldset Ext.form.FieldSet 表單字段組
hidden Ext.form.Hidden 表單隱藏域
htmleditor Ext.form.HtmlEditor html編輯器
numberfield Ext.form.NumberField 數字編輯器
radio Ext.form.Radio 單選按鈕
textarea Ext.form.TextArea 區域文本框
textfield Ext.form.TextField 表單文本框
timefield Ext.form.TimeField 時間錄入項
trigger Ext.form.TriggerField 觸發錄入項
組件的使用
組件可以直接通過new 關鍵子來創建，比如控件一個窗口，使用new Ext.Window()，創建一個表格則使用new Ext.GridPanel()。當然，除了一些普通的組件以外，一般都會在構造函數中通過傳遞構造參數來創建組件。
組件的構造函數中一般都可以包含一個對象，這個對象包含創建組件所需要的配置屬性及值，組件根據構造函數中的參數屬性值來初始化組件。比如下面的例子：
<head>
<script>
var obj={title:"hello",width:300,height:200,html:'<h1>Hello,easyjf open source</h1>'};
var panel=new Ext.Panel(obj);
panel.render("hello");
</script>
</head>
<body>
<div id="hello"></div>
</body>
可以省掉變量obj，直接寫成如下的形式：
var panel=new Ext.Panel({title:"hello",width:300,height:200,html:'<h1>Hello,easyjf open source</h1>'});
panel.render("hello");
render方法後面的參數表示頁面上的div元素id，也可以直接在參數中通過renderTo參數來省略手動讞用render方法，只需要在構造函數的參數中添加一個renderTo屬性即可，如下：
new Ext.Panel({renderTo:"hello",title:"hello",width:300,height:200,html:'<h1>Hello,easyjf open source</h1>'});
對於容器中的子元素組件，都支持延遲加載的方式創建控件，此時可以直接通過在需要父組件的構造函數中，通過給屬性items傳遞數組方式實現構造。如下面的代碼：
var panel=new Ext.TabPanel({width:300,height:200,items:[
{title:"面板1",height:30},{title:"面板2",height:30},{title:"面板3",height:30}]});
上面的代碼與下面的代碼等價：
var panel=new Ext.TabPanel({width:300,height:200,items:[new Ext.Panel(
{title:"面板1",height:30}),new Ext.Panel({title:"面板2",height:30}),new Ext.Panel({title:"面板3",height:30})]
});
前者不但省略掉了new Ext.Panel這個構造函數，最重要前者只有在初始化TabPanel的時候，纔會創建子面板，而第二種方式則在程序一開始就會創建子面板。也就是說，前者實現的延遲加載。
組件的配置屬性
在ExtJS中，除了一些特殊的組件或類以外，所有的組件在初始化的時候都可以在構造函數使用一個包含屬性名稱及值的對象，該對象中的信息也就是指組件的配置屬性。
每一個組件除了繼承基類中的配置屬性以外，還會根據需要增加自己的配置屬性，另外子類中有的時候還會把父類的一些配置屬性的含義及用途重新定義。學習及使用ExtJS，
中最關鍵的是掌握ExtJS中的各個組件的配置屬性及具體的含義，這些配置屬性在下載下來的ExtJS源碼文檔中都有詳細的說明，可以通過這個文檔詳細瞭解每一個組件的特性
由於所有的組件都繼承自Ext.Component，因此在這裏我們列出組件基類Component中的配置屬性簡單介紹。
配置屬性名稱
|
類型
|
簡介
|
allowDomMove
|
Boolean
|
當渲染這個組件時是否允許移動Dom節點（默認值爲true）。 |
applyTo
|
Mixed
|
混合參數，表示把該組件應用指定的對象。參數可以是—節點的id，一個DOM節點或一個存在的元素或與之相對應的在document中已出現的id。 當使用 applyTo，也可以提供一個id或CSS的class名稱，如果子組件允許它將嘗試創建一個。如果指寫applyTo選項，所有傳遞到 renderTo方法的值將被忽略，並且目標元素的父節點將自動指定爲這個組件的容器。使用applyTo選項後，則不需要再調用render()方法來渲染組件。 |
autoShow
|
Boolean
|
自動顯示，如爲true，則組件將檢查所有隱藏類型的class（如：’x-hidden’ 或’x-hide-display’並在渲染時移除(默認爲false)。
|
cls
|
String
|
給組件添加額外的樣式信息，（默認值爲''），如果想自定義組件或它的子組件的樣式，這個選項是非常有用的。
|
ctCls
|
String
|
給組件的容器添加額外的樣式信息，默認值爲'')。
|
disabledClass
|
String
|
給被禁用的組件添加額外的CSS樣式信息，（默認爲"x-item-disabled"）。
|
hideMode
|
String
|
組件的隱藏方式，支持的值有’visibility’，也就是css裏的visibility，’offsets’負數偏移位置的值和’display’也就是css裏的display，默認值爲’display’。
|
hideParent
|
Boolean
|
是否隱藏父容器，該值爲true時將會顯示或隱藏組件的容器，false時則只隱藏和顯示組件本身（默認值爲false）。
|
id
|
String
|
組件的id，默認爲一個自動分配置的id。
|
listeners
|
Object
|
給對象配置多個事件監聽器，在對象初始化會初始化這些監聽器。
|
plugins
|
Object/Array
|
一個對象或數組，將用於增加組件的自定義功能。一個有效的組件插件必須包含一個init方法，該方法可以帶一個Ext.Component類型參數。當組件建立後，如果該組件包含有效的插件，將調用每一個插件的init方法，把組件傳遞給插件，插件就能夠實現對組件的方法調用及事件應用等，從而實現對組件功能的擴充。
|
renderTo
|
Mixed
|
混合數據參數，指定要渲染到節點的id，一個DOM的節點或一個已存在的容器。如果使用了這個配置選項，則組件的render()就不是必需的了。
|
stateEvents
|
Array
|
定義需要保存組件狀態信息的事件。當指定的事件發生時，組件會保存它的狀態（默認爲none），其值爲這個組件支持的任意event類型，包含組件自身的或自定義事件。（例如：[‘click’,’customerchange’]）。
|
stateId
|
String
|
組件的狀態ID，狀態管理器使用該id來管理組件的狀態信息，默認值爲組件的id。
|
style
|
String
|
|
xtype
|
String
|
指定所要創建組件的xtype，用於構造函數中沒有意義。該參數用於在容器組件中創建創建子組件並延遲實例化和渲染時使用。如果是自定義的組件，則需要用Ext.ComponentMgr.registerType來進行註冊，纔會支持延遲實例化和渲染。
|
el
|
Mixed
|
相當於applyTo
|