Ext.js入门：模板（三）

标签：

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(); }) 

Ext.js入门：模板（三）

标签：

原文地址：http://www.cnblogs.com/sunliyuan/p/5831607.html