Extjs4 XTemplate 用法

Ext.XTemplate 用法

  1 自动填充数组和作用域切换：

 

Ext.onReady(function(){
	 		 var tpl=new Ext.XTemplate(
	 		    '<table border=1>',
	 		 	'<tr><td>姓名</td><td>年龄</td><td>操作</td></tr>',
	 		 	'<tpl for=".">',
	 		 	'<tr><td>{name}</td><td>{age}</td><td></td></tr>',
	 		 	'</tpl>',
	 		 	'</table>'
	 		 	) ;
	 		 var tplData=[
	 		 	{name:'a',age:10},
	 		 	{name:'b',age:20},
	 		 	{name:'c',age:30},
	 		 	{name:'d',age:40},
	 		 	{name:'e',age:50},
	 		 ];
	 		 var panel=Ext.create('Ext.panel.Panel',{
	 		 	title:'XTmplate',
	 		 	width:1200,
	 		 	height:300,
	 		 	tpl:tpl,
	 		 	renderTo:Ext.getBody()
	 		 });
	 		 tpl.append('tmp',tplData);
	 	});

 <div id="tmp" />

 

代码中使用tpl 标签和for 运算符，本例中for运算符的值为“.”，表示指向当前对象，“..” 表示指向父对象，也可以直接写对象名，另外对数组的支持可以成批向模板中追加数据，

 

 

2 在子模板中访问父对象

 
	 	Ext.onReady(function(){
	 		 var tpl=new Ext.XTemplate(
	 		    '<table border=1>',
	 		 	'<tr><td>姓名</td><td>年龄</td><td>COM</td></tr>',
	 		 	'<tpl for="emps">',
	 		 	'<tr><td>{name}</td><td>{age}</td><td>{parent.companyName}</td></tr>',
	 		 	'</tpl>',
	 		 	'</table>'
	 		 	) ;
	 		
	 		 var company={
	 		 	companyName:'IBM',
	 		 	emps:[
	 		 		{name:'a',age:10},
		 		 	{name:'b',age:20},
		 		 	{name:'c',age:30},
		 		 	{name:'d',age:40},
		 		 	{name:'e',age:50},
	 		 	]
	 		 };	
	 		tpl.append('tmp',company);
	 		
	 		 /*
	 		 var tplData=[
	 		 	{name:'a',age:10},
	 		 	{name:'b',age:20},
	 		 	{name:'c',age:30},
	 		 	{name:'d',age:40},
	 		 	{name:'e',age:50},
	 		 ];
	 		 tpl.append('tmp',tplData);
	 		 */
	 	});

 子对象中访问父对象的属性要使用“parent.”。

 

 

3 自动渲染简单数组：

Ext.onReady(function(){
	 		 var tpl=new Ext.XTemplate(
	 		    '<table border=1>',
	 		 	'<tr><td>姓名</td><td>年龄</td><td>COM</td></tr>',
	 		 	'<tpl for=".">',
	 		 	'<tr><td>{#}</td><td>{.}</td><td>{.}</td></tr>',
	 		 	'</tpl>',
	 		 	'</table>'
	 		 	) ;
	 		
	 		var array=['a','b','c','d','e'];
	 		tpl.append('tmp',array);
	 		
	 		 /*
	 		  var company={
	 		 	companyName:'IBM',
	 		 	emps:[
	 		 		{name:'a',age:10},
		 		 	{name:'b',age:20},
		 		 	{name:'c',age:30},
		 		 	{name:'d',age:40},
		 		 	{name:'e',age:50},
	 		 	]
	 		 };	
	 		 var tplData=[
	 		 	{name:'a',age:10},
	 		 	{name:'b',age:20},
	 		 	{name:'c',age:30},
	 		 	{name:'d',age:40},
	 		 	{name:'e',age:50},
	 		 ];
	 		 tpl.append('tmp',tplData);
	 		 */
	 	});

{#} 代表行号，{.} 代表数组内容

 

4：使用基本逻辑判断

Ext.onReady(function(){
	 		 var tpl=new Ext.XTemplate(
	 		    '<table border=1>',
	 		 	'<tr><td>姓名</td><td>年龄</td><td>COM</td></tr>',
	 		 	'<tpl for="emps">',
	 		 	'<tpl if="age &gt; 20">',
	 		 	'<tr><td>{#}</td><td>{name}</td><td>{age}</td></tr>',
	 		 	'</tpl>',
	 		 	'</tpl>',
	 		 	'</table>'
	 		 	) ;
	 		
	 		 var company={
	 		 	companyName:'IBM',
	 		 	emps:[
	 		 		{name:'a',age:10},
		 		 	{name:'b',age:20},
		 		 	{name:'c',age:30},
		 		 	{name:'d',age:40},
		 		 	{name:'e',age:50},
	 		 	]
	 		 };	
	 		tpl.append('tmp',company);
	 		
	 		 /*
	 		 var array=['a','b','c','d','e'];
	 		 
	 		 var tplData=[
	 		 	{name:'a',age:10},
	 		 	{name:'b',age:20},
	 		 	{name:'c',age:30},
	 		 	{name:'d',age:40},
	 		 	{name:'e',age:50},
	 		 ];
	 		 tpl.append('tmp',tplData);
	 		 */
	 	});

  （&gt; 表示>  , &lt; 表示<）

 

5: 在模板中执行任意代码

 

	Ext.onReady(function(){
	 		 var tpl=new Ext.XTemplate(
	 		    '<table border=1 class=title>',
	 		 	'<tr><td>序号</td><td>姓名</td><td>工资</td><td>奖金</td></tr>',
	 		 	'<tpl for="emps">', 
	 		 		'<tr class="{[xindex % 2==0? "even":"odd" ]}">',
	 		 		'<td>{[xindex]}</td><td>{[values.name]}</td>',
	 		 		'<td>{[values.wage*parent.per]}</td>',
	 		 		'<td>{[Math.round(values.wage*parent.per/xcount)]}</td></tr>',
	 		 		
	 		 	'</tpl>',
	 		 	'<tr><td>发薪时间</td><td colspan=3>{[fm.date(new Date,"Y年m月d日")]}</td></tr>',
	 		 	'<tr><td>工资总计</td><td colspan=3>  </td></tr>',
	 		 	'</table>'
	 		 	) ;
	 		 
	 		 
	 		var tplData={
	 			per:0.9,
	 			emps:[
	 				{name:'a',wage:1000},
	 				{name:'b',wage:200},
	 				{name:'c',wage:100},
	 				{name:'d',wage:10},
	 				{name:'e',wage:897},
	 				{name:'f',wage:110}
	 			]
	 		};
	 		tpl.append('tmp',tplData);
	 		
	 		 /*
	 		 var array=['a','b','c','d','e'];
	 		 
	 		 var tplData=[
	 		 	{name:'a',age:10},
	 		 	{name:'b',age:20},
	 		 	{name:'c',age:30},
	 		 	{name:'d',age:40},
	 		 	{name:'e',age:50},
	 		 ];
	 		 tpl.append('tmp',tplData);
	 		 */
	 	});

 values : 当前作用域下的值对象，通过切换子模板的作用域可以改变其中的值

parent：父模板的值对象

xindex：循环模板的索引

xcount： 循环模板时候的总循环次数

 

6 在Extjs 组件中使用模板：

	Ext.onReady(function(){
	 		 var tpl=new Ext.XTemplate( 
	 		 			'<div class="x-combo-list{[xindex%2==0?"even":"odd"]}">',
	 		 			 
	 		 			'{#}:{[this.check(values)]}</div>',
	 		 			{
	 		 				check:function(values){
	 		 					if(values.value>2){
	 		 						return "<font color=red>"+values.item+"</font>";
	 		 					}else{
	 		 						return "<font color=blue>"+values.item+"</font>";
	 		 					}
	 		 				}
	 		 			}
	 		 	) ;
	 		 
	 		Ext.regModel('ItemInfo',{
	 			fields:['item','value']
	 		})
	 		var panel=Ext.create('Ext.panel.Panel',{
	 			title:'数组使用模板',
	 			renderTo:Ext.getBody(),
	 			height:500,
	 			width:1200,
	 			items:[
	 				{
	 					xtype:'combo',
	 					fieldLabel:'邮编',
	 					displayField:'item',
	 					valueField:'value',
	 					labelSeparator:':',
	 					listConfig:{
	 						itemTpl:tpl
	 					},
	 					editable:false,
	 					queryMode:'local',
	 					store:new Ext.data.Store({
	 						model:'ItemInfo',
	 						fields:['item','value'],
	 						data:[
	 							{item:'a',value:1},
	 							{item:'b',value:2},
	 							{item:'c',value:3},
	 							{item:'d',value:4},
	 							{item:'e',value:5},
	 							{item:'f',value:6},
	 						]
	 					})
	 				}
	 			]
	 		});
	 		tpl.append('tmp',tplData);
	 		
	 		 /*
	 		 var array=['a','b','c','d','e'];
	 		 
	 		 var tplData=[
	 		 	{name:'a',age:10},
	 		 	{name:'b',age:20},
	 		 	{name:'c',age:30},
	 		 	{name:'d',age:40},
	 		 	{name:'e',age:50},
	 		 ];
	 		 tpl.append('tmp',tplData);
	 		 */
	 	});

 

许多组件中都可以使用模板，他们一般表现为tpl配置项，通过为该配置提供相应的模板就可以改变组件默认的表现方式，可以进行一些个性化的定制。