1.Ext.DomHelper简介
2.Template语法使用简介
3.Template简单应用
4.Template中使用转换函数
5.使用模板的自定义接口
6.XTemplate应用
7.复杂模板
1.Ext.DomHelper
处理DOM或模板（Templates）的实用类。
能以JavaScript较清晰地编写HTML片段（HTML fragments）或DOM。
如以下范例产生五个子元素的无须列表，追加到当前元素‘my-div’：
常用的方法：
Template语法使用简介
在一些复杂的情况下，我们需要生成HTML片断，这时最常用，最简单，最有效率的一种做法就是应用Ext提供的模板来完成。
说明：Templete 是模板之意，就是定义一段 HTML 代码，并放置若干个{}作为占位符，运行时将数据填充到{}中去。
看来看去，和java中的MessageFormat及C#中的string.formate很像。XTemplate和DomHelper有很深的渊源，
DomHelper是XTemplate的小弟，DomHelper解决不了的事情，XTemplate一定可以。
使用XTemplate一般会经历三个步骤：
1、定义XTemplate对象，指定一段HTML代码作为模板；
2、指定XTemplate中定义的HTML应该放置的位置，并填充占位符信息；
3、编译XTemplate。
Template简单应用：
Ext.onReady(function(){ var xt = new Ext.Template( "<table border={0} width={1}>", "<tr>", "<td>{2}</td>", "<td>{3}</td>", "<td>{4}</td>", "</tr>", "</table>" ); xt.append("xt", [1, 300, ‘单元格1‘, ‘单元格2‘, ‘单元格3‘]); xt.compile(); })
实例化Template时，可以配置任意个参数，会自动连接到一起，这种写法似乎更方便更好读。
append方法同 DomHelper 的 append方法，实际上还有 insertBefore、insertAfter、insertFirst、overwrite 等方法，
不同的是第二个参数，该参数是要填充到占位符中的数据，可以是数组，也可以是json对象。执行完之后得到如下结果：
<div id="xt"> <table border="1" width="300"> <tbody> <tr> <td>单元格1</td> <td>单元格2</td> <td>单元格3</td> </tr> </tbody> </table> </div>
下面是改造后的例子，填充数据时用json对象代替了原来的数组：
Ext.onReady(function(){ var xt = new Ext.Template( "<table border={b} width={w}>", "<tr>", "<td>{v1}</td>", "<td>{v2}</td>", "<td>{v3}</td>", "</tr>", "</table>" ); xt.append("xt", {b: 1, w: 300, v1: "单元格1", v2: "单元格2", v3: "单元格3"}); xt.compile(); })