Ext JS 4预览：重构和规范渲染过程

在过去的4年里，Ext js的代码库不断在发展，新的组建不断被添加，编码标准也在不断的改进。在这期间，一个很重要的事情就是必须不断的重构较旧的组件以保持同步。

在Ext js 4之前，渲染组件并没有统一标准的方式。Panels的主要渲染方式是创建它们所需的元素并直接添加到DOM节点上。而Fields的渲染，则是通过配置 DomHelper的autoEI，然后通过包裹特定HTML片段实现的。Grids则主要通过模版建立元件，然后渲染到页面。

在Ext JS 4，我们的目标是将这些渲染方法统一为使用XTemplate和DomQuery进行渲染。该渲染方法不单易于使用，而且让开发人员在开放自己的组件时更灵活。该渲染方法将成为所有组件的标准渲染方式。

介绍renderTpl，renderData和renderSelector

Ext JS 4的所有组件都会被渲染成一个带有id的div元件和基类组件（cls、cmpCls和ui）。如果创建一个组件需要额外的元件，那么它将通过 XTemplate (renderTpl)来处理。XTemplate所需的数据将通过 renderData对象读取，并在组件实例中通过renderSelectors方法创建一个Ext.Element对象。 renderSelector使用标准的css选择器，其作用范围是基本的div元件。这些Ext.Element对象将作为组件生命周期的一部分，直到组件被销毁时才自动销毁。下面的例子将有助于说明如何创建定制组件：

简单的自定义图标组件的例子：

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对象，它有两个需要在渲染时从renderData 获取数据的变量“blank”和“iconCls”的。此外，在渲染时，将在实例中创建一个“iconEl”的Ext.Element对象。当组件渲染完成时，在changeIconCls方法将可以使用“iconEl ”对象。

英文原文:
http://www.sencha.com/blog/2010/12/13/ext-js-4-preview-refactoring-standardizing-the-rendering-process/

转自黄灯桥博客:
http://blog.csdn.net/tianxiaode/archive/2010/12/14/6074514.aspx