资源描述：
《ExtJs2.0学习系列(11)--Ext.XTemplate》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、ExtJs2.0学习系列(11)--Ext.XTemplateXTemplate是Extjs里面的模板组件.下面我们看个最简单的例子.效果图:js代码:Ext.onReady(function(){ //数据源 var data={ name:"博客园", read:[{ book:'<<道不远人>>', date:'2007-7-7' },{ book:"<<大话设计模式>>", date:"2006-6
2、-6" }] } //呈现组件 var mypanel=new Ext.Panel({ width:400, id:"mypanel", title:"XtemplateData简单示例", renderTo:Ext.getBody() }); //创建模板 var tpl=new Ext.XTemplate( '
| 名称:{name} |
|---|
', '| ', 3、 '', '编号:{#},书:{book},日期:{date} ', ' |
' ); //重写绑定模板 tpl.overwrite(mypanel.body,data);})简要说明:/*var tpl=new Ext.XTemplate( '
| 名称:{name} |
|---|
', '| ', ' 4、pl for="read">', ' 编号:{#},书:{book},日期:{date} ', ' |
' );tpl.compile(); tpl.overwrite(mypanel.body,data);*/1.tpl.compile();//可以在创建模板后,添加tpl.compile();编译代码,速度快点.2. tpl.overwrite(mypanel.body,data);//把数据填充到模板中去,并呈现到目标组件3.
5、名称:{name}//对于一维单数据对象,直接用{名称}输出,4.,//对于多维对象(如拥有多条数据的表),使用tpl和for配合使用,会使用tpl的格式把数据一条一条输出,read为上级节点5.{.}//对于一维对数据的对象,如color: ['Red', 'Blue', 'Black'],可以用{.}按照tpl模板逐一输出,如: '', ' {.}
', ''6.{#}//表示循环的索引7.parent.**
6、*//在子对象中访问父对象元素,使用parent,如:{parent.name}8.if//'', '{name}
', '', //if实现有条件的逻辑判断,很容易使用9.其他几个常用的参数: xindex//循环模板的当前索引index（从1开始）,用[]。 xcount//循环模板循环的次数。 用[] 举例: '', '编号:{#},
7、书:{book},日期:{date},奇偶:{[xindex%2==0?"偶数":"奇数"]},次数:{[xcount]}
', '10.模板成员函数(借用api下):var tpl = new Ext.XTemplate( '', '', 'Girl: {name} - {age}
', '', '8、is.isGirl(name) == false">', '
Boy: {name} - {age}
', '', '
', { isGirl:
