-------------------------------------------------------------資源連結-----------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------
一個EXT JS的應用程式的UI使用者界面是有一個或者多個部件構成的元件。所有的元件都是Ext.Component類的子類，允許它們參與自動化生命周期管理包括執行個體化，渲染，大小，定位還有銷毀。Ext JS提供了一系列有用的元件，任何元件可以很容易地擴充到建立一個定制的元件。
容器是一個特殊的元件類型，它可以包含其他元件。一個典型的應用程式是有許多嵌套的元件像樹狀結構哪有的元件繼承結構。容器負責管理他們的子元件的生命周期，包含建立，渲染，大小還有位置和銷毀。一個典型的應用程式的元件繼承從頂層的Viewport開始，它還有其它的容器嵌套在裡面。
子元件通過使用容器的items配置增加到容器中，下面的例子使用Ext.create()建立初始化了兩個面闆，然後作為Viewport的子元件增加到Viewport中。
下面的示例代碼示範了懶執行個體化和呈現一個使用頁籤面闆的容器的子元件。每個标簽都有一個事件偵聽器，顯示一個警告标簽時呈現。
允許這段代碼，會立即産生第一個tab的alert彈出框。這個發生是因為這是預設的tab頁簽，是以容器就立即調用病執行個體化容器的Tab Panel。
第二個tab框直到點選的時候才會彈出，這就顯示了需要的時候才會渲染，就是說tab頁簽激活的時候才會通知render事件。
所有的元件都是在show和hide方法中構造的。用來隐藏元件的預設的css方法是“display:none”但是通過hidemode配置的時候就有所變化了：
浮動元件是通過css絕對路徑将文檔放置在外的，并且不在參與元件的容器的布局的。有些元件像Windows是預設的浮動，所有的元件都可以通過配置來實作浮動：
上述代碼初始化了一個panel，但是沒有渲染。正常情況下，一個元件或者有一個renderTo配置或者當做一個子元件增加到元件的容器中，但是當是浮動元件的時候，都不需要了。浮動元件會在第一次調用show方法的時候被渲染
下面有一些對浮動元件來說可以進行配置的一些方法
1.draggable:可以拖動螢幕周圍浮動元件。
2.shadow:定制的外觀浮動元件的影子。
3.alignTo:将浮動元件指定到特定的元素。
4.center() 将元件浮動到元件的中心
當建立一個新的UI類的時候，該類必須做出決定是否應該擁有一個元件的一個執行個體,或擴充元件
根據功能需要繼承一個最近的基類是被推薦的。這是因為EXT JS提供的自動生命周期管理包含了當需要的時候自動渲染，自動大小，自動調整位置當通過布局管理的時候，也會自動的從容器中移除和銷毀。
通過組建建立新類比較容易，不推薦使用一個新的類擁有一個元件在外部去渲染和管理。
盡管你可以再低水準的情況下增加一個方法，但是開發人員在通常情況下會想通過高一點的繼承鍊來開始。
下面這個例子建立了一個Ext.Component的子類：
這個例子建立了一個新的類‘My.custom.Component’，它繼承了Ext.Component的所有方法屬性等。
這意味着，在繼承鍊中的每一個類都可能貢獻一個額外的邏輯元件的生命周期中的某些階段。每一個類實作自己的獨有的行為，并且允許其他繼承自這個類的實作自己特有的邏輯。
典型例子就是 渲染 方法，render 是定義在Component類中的一個方法，它對初始化元件的呈現階段生命周期負責。render不能被重寫，但是可以調用onRender方法在處理子類實作的時候可以調用來實作自己的特有屬性方法。每一個onRender方法必須調用父類的onRender方法在貢獻自己額外邏輯的時候。
下面的表格展示了onRender模闆方法的功能。
render方法被調用（通過布局管理器來實作的）。這個方法不能被重寫也是通過Ext基類實作的，它調用this.onRender方法，這個方法實作了目前子類（如果被實作了的話）。這個就調用父類的版本，以此類推。最終，每個類貢獻了自己的功能，控制傳回render方法。
下面是一個元件子類實作onRender的例子：
需要值得注意的是，許多模闆方法都有自己對應的事件，例如渲染事件，是在渲染事件出發的時候執行。然而，當子淚花的時候，它必須使用模闆方法在重要聲明周期階段執行類邏輯而不是事件。事件可以通過程式設計來停止或者暫停。
下面是一些子類可以實作的元件的模闆方法：
initComponent:這個方法被類構造方法喚醒，用來初始化資料，設定屬性，附加事件處理。
beforeShow:在元件顯示之前被調用
onShow: 允許添加行為操作，在超類的onShow方法被調用之後就元件就可見了。
afterShow: 方法在元件被顯示之後調用。
onShowComplete:這個方法在afterShow完成之後被調用
onHide:在隐藏的時候可以增加一些操作，調用超類的onHide方法之後，元件就看不見了。
afterHide:元件隐藏之後的事件處理
onRender:渲染的時候執行的事件
afterRender:渲染完成之後可以增加的額外操作。在你這個階段，元件的元素已經根據配置或者css雷鳴增加了類型，并且将會被配置可見性和啟用狀态。
onEable:元件可用性，調用超類的這個事件的時候，元件就可以使用了
onDisable:元件不可用處理的時候的事件。
onAdded:當元件被增加的時候，元件被增加到容器的時候。在這個階段，元件在父類容器的子條目集合中，當調用超類的這個方法之後，容器就是被展現，如果有引用，引用也會被設定。
onRemoved:被移除的時候的事件。這時候，元件以及從父容器之中移除了，但是還沒有銷毀。調用超類的這個方法之後，容器就不會被展現了。
onResize:大小變化的時候的調用事件
onPosition:位置變化的時候調用的事件
onDestroy:銷毀的時候的事件
beforeDestroy:銷毀之前
afterSetPosiotion:設定位置之後
afterComponentLayout:元件布局之後
beforeComponentLayout:元件布局之前
選擇一個最好的繼承類是一個效率的問題，功能基類必須要提供的。有一種趨勢就是總是繼承Ext.panel.Panel當你設定UI元件的時候，這些元件需要被渲染和管理的時候。
Panel類有如下能力：
Boder
Header
Header Tools
Footer
Footer Buttons
Top toolbar
Buttom toolbar
Containig and managing child Components
如果這些不需要，那麼使用Panel類就是一種資源浪費。
如果需要的元件UI不需要包含其他元件，那就是，如果隻是封裝HTML執行某種形式的需求，那麼擴充Ext.Component是合适的。舉例來說，下面這個類是一個元件包裝了HTML的圖檔元素，允許通過圖檔的src屬性來設定和擷取。在加載的時候也會有方法被觸發。
使用如下：
這隻是一個例子給展示而已，你想使用的話，應該結合實際應用程式來設計。
如果元件包含其他元件，那麼就選容器比較适合了。在面闆級别，需要重點記憶的是，Ext.layout.container.Container不是用來被渲染和管理子元件的。
容器擁有下面這些方法：
onBeforeAdd:子元件增加的時候這個方法被調用。通過了新元件,可以用來修改元件,或準備容器。傳回false中止添加操作。
onAdd:元件被增加完成的時候調用。它是通過元件已被添加。這種方法可以用于更新任何内部結構可能依賴于狀态的子元素。
onRemove:它是通過元件已被添加。這種方法可以用于更新任何内部結構可能依賴于狀态的子元素。
beiforeLayout:這個方法被調用之前容器已經制定了(如果需要)并呈現它的子元件。
afterLayout:調用該方法後,集裝箱已經制定了(如果需要)并呈現它的子元件。
如果UI界面需要頭資訊，底部資訊，工具條，那麼Ext.panel.Panel就是一個合适的選擇。
重要的是:一個面闆是一個容器。重要的是要記住,布局是用于呈現和管理子元件。
這類擴充Ext.panel。面闆通常非常特定于應用程式的,一般用于聚合其他UI元件(通常是容器,或表單字段)配置布局,并提供操作手段所包含的元件通過控制tbar bbar。
面闆擁有如下的模闆方法：
afterCollapse:當折疊的時候被調用
afterExpand:當展開的時候被調用
onDockedAdd:當停靠的時候調用
ondockedRemove當停靠移除的時候調用。