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:  ' <img alt="" src="{blank}" class="{iconCls}"/> ' ,
   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并没有在属性上定义，下面用的时候有些"勉强"，并且不会有提示。