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选择器。这些元素引用是组件生命周期的一部分，并且将在组件销毁时被自动移除。下面这个示例将帮助举例说明一个自定义组件的创建：

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

renderTpl定义一个XTemplate，内嵌"blank"和"iconCls"变量，这两个变量将从renderData获取。另外，在展现的时候一个iconEl引用将被应用到实例对象。一展现出来changeIconCls方法就可以使用iconEl属性了。

评论：在一定程度上表转化了代码的组织和使用，但是还是不够优雅，比如iconEl并没有在属性上定义，下面用的时候有些"勉强"，并且不会有提示。