ExtJs2.0学习系列（11）--Ext.XTemplate

ExtJs2.0学习系列（11）--Ext.XTemplate2010-04-21 博客园谦虚的天下XTemplate是Extjs里面的模板组件.

下面我们看个最简单的例子.

效果图:

js代码:

Ext.onReady（function（）{
//数据源
var data={
 name:"博客园",
 read:[{
 book:"<<道不远人>>",
 date:"2007-7-7"
 },{
 book:"<<大话设计模式>>",
 date:"2006-6-6"
 }]
}
//呈现组件
var mypanel=new Ext.Panel（{
width:400,
id:"mypanel",
title:"XtemplateData简单示例",
renderTo:Ext.getBody（）
}）;
//创建模板
var tpl=new Ext.XTemplate（
"<table><tr><th>名称:{name}</th></tr>",
"<tr><td>",
"<tpl for="read">",
 "<p>编号:{#},书:{book},日期:{date}</p>",
"</tpl></td></tr></table>"
）;
//重写绑定模板
tpl.overwrite（mypanel.body,data）;
}）

简要说明:

/*
var tpl=new Ext.XTemplate（
"<table><tr><th>名称:{name}</th></tr>",
"<tr><td>",
"<tpl for="read">",
 "<p>编号:{#},书:{book},日期:{date}</p>",
"</tpl></td></tr></table>"
）;
tpl.compile（）;
tpl.overwrite（mypanel.body,data）;
*/
1.tpl.compile（）;//可以在创建模板后,添加tpl.compile（）;编译代码,速度快点.
2. tpl.overwrite（mypanel.body,data）;//把数据填充到模板中去,并呈现到目标组件
3.名称:{name}//对于一维单数据对象,直接用{名称}输出,
4.,<tpl for="read">//对于多维对象（如拥有多条数据的表）,使用tpl和for配合使用,会使用tpl的格式把数据一条一条输出,read为上级节点
5.{.}//对于一维对数据的对象,如color: ["Red", "Blue", "Black"],可以用{.}按照tpl模板逐一输出,如:
 "<tpl for="color">",
 "<div> {.}</div>",
"</tpl>"
6.{#}//表示循环的索引
7.parent.***//在子对象中访问父对象元素,使用parent,如:{parent.name}
8.if//"<tpl if="age &gt; 1">",
"<p>{name}</p>",
"</tpl>",
//if实现有条件的逻辑判断,很容易使用
9.其他几个常用的参数:
 xindex//循环模板的当前索引index（从1开始）,用[]。
 xcount//循环模板循环的次数。 用[]
举例:
 "<tpl for="read">",
 "<p>编号:{#},书:{book},日期:{date},奇偶:{[xindex%2==0？"偶数":"奇数"]},次数:{[xcount]}</p>",
"</tpl>
10.模板成员函数（借用api下）:
var tpl = new Ext.XTemplate（
"<tpl for="kids">",
"<tpl if="this.isGirl（name）">",
"<p>Girl: {name} - {age}</p>",
"</tpl>",
"<tpl if="this.isGirl（name） == false">",
"<p>Boy: {name} - {age}</p>",
"</tpl>",
"</tpl></p>", {
 isGirl: function（name）{
 return name == "Sara Grace";
 },
 isBaby: function（age）{
return age < 1;
 }
}）;