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

Over the past 4 years, the Ext JS codebase has evolved; new components have been added and coding standards have improved. During this process, it was necessary to go back every so often to refactor older components and keep processes in sync.

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

Until Ext JS 4, there has been no standard way to render components. In the past, Panels rendered primarily by creating the elements they needed and adding them to the dom directly, picking up references along the way. Fields on the other hand, manipulated the autoEl DomHelper configuration and then wrapped specific html fragments as needed. Grids made extensive use of templates to build up their markup and inject it into the page.

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

For Ext JS 4, our goal is to unify these techniques into one cohesive standard by leveraging XTemplate and DomQuery. This standard is easy to work with and allows developers the flexibility required to develop robust components. This standard will be used internally across all of our components.

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

Introducing renderTpl, renderData, and renderSelector

介绍renderTpl，renderData和renderSelector

All components in Ext JS 4 are rendered with a base div element which provides a unique id, and baseline component classes (cls, cmpCls, baseCls, and ui). If additional elements are needed to create a component, they are now handled with an XTemplate (renderTpl). Data for the XTemplate is read from a renderData object and Ext.Element references can be placed on the component instance via renderSelectors. The renderSelector is scoped from the base div element and uses standard css selectors. These Ext.Element references are part of the component lifecycle and removed automatically when the component is destroyed. The following example will help illustrate the creation of a custom component:

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

Simple custom icon component example:

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

IconComponent = Ext.extend(Ext.Component, {

   iconCls: 'myIcon',

   renderTpl: '
" src="{blank}
" class
="{iconCls}
"/>',

   initComponent: function
() {

       Ext.applyIf(this
.renderData, {

           blank: Ext.BLANK_IMAGE_URL,

           iconCls: this
.iconCls

       });

       Ext.applyIf(this
.renderSelectors, {

           iconEl: '.' + this
.iconCls

       });

       IconComponent.superclass.initComponent.call(this
);

   },

   changeIconCls: function
(newIconCls) {
if
 (this
.rendered) {
this
.iconEl.replaceClass(this
.iconCls, newIconCls);

       }
this
.iconCls = newIconCls;

   }

});

The renderTpl defines an XTemplate with “blank” and “iconCls” variables which are read from renderData at render time. In addition, an “iconEl” reference to the Ext.Element is applied to the instance at render time. The changeIconCls method can now use the iconEl as soon as the component has been rendered.

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/