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并沒有在屬性上定義,下面用的時候有些"勉強",并且不會有提示。

                    關聯標簽:
                    无码精品人妻一区二区三区软件