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 > 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);
*/
});
（> 表示> , < 表示<）
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配置项，通过为该配置提供相应的模板就可以改变组件默认的表现方式，可以进行一些个性化的定制。
类似资料：