ExtJS4預覽:渲染過程重構和標準化
小編:管理員 422閱讀 2022.09.07
在過去的四年,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并沒有在屬性上定義,下面用的時候有些"勉強",并且不會有提示。
相關推薦
- ExtJs七(ExtJs Mvc創建ViewPort) 前言在4.1的時候,要先創建一個擴展于Ext.app.Application的類,然后用create創建它的實例來開始應用程序的。而在4.1.1,則可直接調用application方法開始執行應用程序,簡化了。調用application方法,其參數是一個配置對象,主要配置項有以下三個:name:用來…
- 3DMAX提示和技巧 本主題標識使用 Civil View 的一些重要提示和技巧。常規使用屏幕分辨率至少為 1280x1024 的 Civil View。低于此分辨率時,一些面板將占用過多屏幕空間。 將視口設置為線框顯示以達到最佳性能。 要盡可能簡化用戶界面,請在單個視口中工作并關閉 3ds Max 命令面…