1. The Components Hierachy 組件體系 2. XTypes and Lazy Instantiation xtype與延遲初始化 1) 每個component都有一個象徵性的名字 xtype 2) 立即初始化: Ext.create() 延遲初始化: xtype 3. Sho
1. The Components Hierachy 組件體系
2. XTypes and Lazy Instantiation xtype與延遲初始化
1) 每個component都有一個象徵性的名字 xtype
2) 立即初始化: Ext.create() 延遲初始化: xtype
3. Showing and Hiding 顯示與隱藏
1) 所有的組件都內置有show() 和 hide() 方法
2) 預設隱藏的css為display:none; 可以通過hideMode配置修改
4. Floating Components 浮動的組件
1) 浮動組件游離於絕對定位的文檔流之外，且不參與容器的佈局
2) 所有的組件都可以通過floating配置變成浮動組件
3) 浮動組件當show()方法被調用時會自動渲染到document.body下
4) 與浮動組件相關的配置和方法還有：draggable, shadow, alignTo(), center()
5. Creating Custom Components 定製個人組件
1) Composition or Extension 聚合還是擴展
2) Subclassing 子類
a. Ext.Base是所有EXTJS類的基石
3) Template Methods
a. EXTJS使用Template Method模式來把子類特定的方式委托到子類實例上
b. 在組件生命周期的特定階段中每個繼承鏈中的類都會負責一部分職責
c. Componenet.render()負責初始化組件渲染階段，且不能被覆蓋；render()會調用onRender(), 子類可以覆蓋onRender()方法以實現特有的顯示樣式
.png)
Ext.define('My.own.Component', {
extend: 'Ext.Component',
onRender: function() {
this.callParent(arguments);
//perform additional rendering tasks here
...
}
});
d. 註意，必須在使用template methods在生命周期重要的階段進行業務操作，而不是在事件。因為事件可以被程式掛起或阻止
e. 以下模板方法可以在構建子類時進行覆蓋
initComponent被構造函數調用；用以初始數據、建立配置、綁定事件響應等beforeShow在組件被顯示之前調用onShow允許在顯示過程中增加額外的操作；一旦父類的onShow()方法返回，組件就已經可見afterShow在組件被顯示之後調用onShowComplete在組件afterShow()方法完成之後調用onHide允許在隱藏過程中增加額外的操作；一旦父類的onHIde()方法返回，組件就已經隱藏afterHide在組件被隱藏之後調用onRender允許在組件渲染過程中增加額外的操作afterRender允許在組件渲染之後增加額外的操作。在這個階段組件的樣式、可見性、狀態等已經生效onEnable允許在組件啟用過程中增加額外的操作。一旦父類的onDisable()方法返回， 組件就已經啟用。onDisable允許在組件禁用過程中增加額外的操作。一旦父類的onDisable()方法返回， 組件就已經禁用。onAdded允許在組件在加入到容器過程中增加額外的操作。在這個階段組件已經在容器的items集合中。 一旦父類的onAdded()方法返回，ownerCt引用就已經存在。onRemoved允許在組件在從容器移除過程中增加額外的操作。在這個階段組件已經從容器的items集合中移除但還未銷毀。 一旦父類的onRemoved()方法返回，ownerCt引用就已經消失。onResize允許在組件resize過程中增加額外的操作。onPosition允許在組件定位過程中增加額外的操作。onDestroy允許在組件銷毀過程中增加額外的操作。一旦父類的onDestroy()方法返回， 組件就已經銷毀。beforeDestroy允許在組件銷毀之前中增加額外的操作。afterSetPosition允許在組件位置設定之後中增加額外的操作。afterComponentLayout允許在組件佈局完成之後中增加額外的操作。beforeComponentLayout允許在組件佈局完成之前中增加額外的操作。
