ExtJS4預覽：渲染過程重構和標準化

在過去的四年，ExtJs代碼庫已經進化了，新組件被加進來，編碼標準也改進了。在這個過程中，為了重構舊組件有必要經常追溯回去以保證他們也被改進。

在ExtJS4之前渲染組件沒有標準的方式。在過去，Panels的展現過程是，首先創建他們需要的元素，并把他們直接添加到dom上，然后獲取他們的引用。另一方面，利用按需autoEl DomHelper配置并包裝對應的Html標簽片段。在頁面上表格經常被用作模板來構建他們的標記。

ExtJS4，我們的目標是統一這些方法為一個標準的方法，那就是XTemplate和DomQuery。這個標準允許開發者很容易針對彈性需求構建出強健的組件。這個標準將在所有我們的組件中使用。

引入（介紹）renderTpl、renderData、renderSelector

ExtJS中的所有組件的展現都是基于一個基礎的具有唯一ID的具有component類（cls\cmpCls\baseCls\ui）的div元素進行的。如果創建一個組件需要額外的元素，他們現在將被一個XTemplate（tenderTpl）處理。XTemplate的數據將從renderData對象讀取，并且生成的元素可以通過組件實例的renderSelectors屬性訪問。renderSelectors的作用域是基于base div元素并且可以使用標準的css選擇器。這些元素引用是組件生命周期的一部分，并且將在組件銷毀時被自動移除。下面這個示例將幫助舉例說明一個自定義組件的創建：

簡單的自定義圖標組件示例：

IconComponent?=?Ext.extend(Ext.Component,?{
???iconCls:?'myIcon',
???renderTpl:?'',
???onRender:?function()?{
???????Ext.applyIf(this.renderData,?{
???????????blank:?Ext.BLANK_IMAGE_URL,
???????????iconCls:?this.iconCls
???????});
???????Ext.applyIf(this.renderSelectors,?{
???????????iconEl:?'.' + this.iconCls
???????});
???????IconComponent.superclass.onRender.call(this);
???},
???changeIconCls:?function(newIconCls)?{
 if?(this.rendered)?{
 this.iconEl.replaceClass(this.iconCls,?newIconCls);
???????}
 this.iconCls?=?newIconCls;
???}
});

renderTpl定義一個XTemplate，內嵌"blank"和"iconCls"變量，這兩個變量將從renderData獲取。另外，在展現的時候一個iconEl引用將被應用到實例對象。一展現出來changeIconCls方法就可以使用iconEl屬性了。

評論：在一定程度上表轉化了代碼的組織和使用，但是還是不夠優雅，比如iconEl并沒有在屬性上定義，下面用的時候有些"勉強"，并且不會有提示。