ExtJS4学习笔记八－－Template的使用
1、append方法
2、overwrite方法：
3、模板中使用格式化函数：
4、使用自定义格式化函数解析多层json对象
5、使用tpl标签和for运算符
6、使用parent在子模板中访问父对象
7、数组索引与简单数学运算
8、自动渲染简单数组
9、基本的条件逻辑判断
10、在模板中执行任意代码
11、使用模板成员函数
12、在Extjs组件中使用模板
13、Ext.view.View示例
var tpl = new Ext.Template(//定义模板
'<table border=1 cellpadding=0 cellspacing = 0>',
'<tr><td width=90>姓名</td><td width=90>{0}</td></tr>',
'<tr><td>年龄</td><td>{1}</td></tr>',
'<tr><td>性别</td><td>{2}</td></tr>',
'</table>'
)
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',['小王',25,'男']);
2、overwrite方法：
var tpl = new Ext.Template(//定义模板
'<table border=1 cellpadding=0 cellspacing = 0>',
'<tr><td width=90>姓名</td><td width=90>{name}</td></tr>',
'<tr><td>年龄</td><td>{age}</td></tr>',
'<tr><td>性别</td><td>{sex}</td></tr>',
'</table>'
)
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.overwrite('tpl-table',{name:'小王',age:25,sex:'男'});
3、模板中使用格式化函数：
//定义模板，并指定模板数据的格式化函数
var tpl = new Ext.Template([
'<table border=1 cellpadding=0 cellspacing = 0>',
'<tr><td width=90>员工姓名</td>',
//{userName:capitalize}使用标准字符串格式化函数，字符串首字母大写
'<td width=120>{userName:capitalize}</td></tr>',
'<tr><td width=90>工作日期</td>',
//{WorkDate:this.cusFormat()}使用自定义格式化函数
'<td width=120>{WorkDate:this.cusFormat()}</td></tr>',
'</table>'
]);
//定义模板数据
var tplData = {
userName : 'tom',
WorkDate : new Date(2002,7,1)
}
//模板的自定义格式化函数
tpl.cusFormat = function(date,o){
return Ext.Date.format(date,'Y年m月d');
}
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);
4、使用自定义格式化函数解析多层json对象
//定义模板，并指定模板数据的格式化函数
var tpl = new Ext.Template(
'<table border=1 cellpadding=0 cellspacing = 0>',
'<tr><td width=90 >姓名</td>',
'<td width=120>{name}</td></tr>',
'<tr><td width=90 >年龄</td>',
'<td width=120>{age}</td></tr>',
'<tr><td width=90 >身高</td>',
'<td width=120>{stature:this.parseJson}</td></tr>',
'</table>'
);
//定义模板数据
var tplData = {
name : 'tom',
age : 24,
stature : {
num : 170,
unit : 'cm'
}
}
//通过自定义格式化函数解析json对象
tpl.parseJson = function(json){
return json.num + json.unit;
}
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);
5、使用tpl标签和for运算符
//定义模板，使用tpl标签和for运算符
var tpl = new Ext.XTemplate(
'<table border=1 cellpadding=0 cellspacing = 0>',
'<tr><td width=90 >姓名</td><td width=90 >年龄</td></tr>',
'<tpl for=".">',
'<tr><td>{name}</td><td>{age}</td></tr>',
'</tpl>',
'</table>'
);
//定义模板数据
var tplData = [
{name:'张三',age:20},
{name:'李四',age:25},
{name:'王五',age:27},
{name:'赵六',age:26}
]
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);
6、使用parent在子模板中访问父对象
//定义模板，使用parent在子模板中访问父对象
var tpl = new Ext.XTemplate(
'<table border=1 cellpadding=0 cellspacing = 0>',
'<tr><td width=90 >姓名</td><td width=90 >年龄</td><td width=90 >公司</td></tr>',
'<tpl for="emps">',
'<tr><td>{name}</td><td>{age}</td><td>{parent.companyName}</td></tr>',
'</tpl>',
'</table>'
);
//定义模板数据
var tplData = {
companyName : 'ACB公司',
emps:[
{name:'张三',age:20},
{name:'李四',age:25},
{name:'王五',age:27},
{name:'赵六',age:26}
]
}
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);
7、数组索引与简单数学运算
//定义模板，数组索引与简单数学运算
var tpl = new Ext.XTemplate(
'<table border=1 cellpadding=0 cellspacing = 0>',
'<tr><td>序号</td><td width=90 >姓名</td><td width=90 >工资</td></tr>',
'<tpl for=".">',
'<tr><td>{#}</td><td>{name}</td><td>{wage * .9}</td></tr>',
'</tpl>',
'</table>'
);
//定义模板数据
var tplData = [
{name : '张三',wage : 1000},
{name : '李四',wage : 1200},
{name : '王五',wage : 900},
{name : '赵六',wage : 1500}
]
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);
8、自动渲染简单数组
//定义模板，自动渲染简单数组
var tpl = new Ext.XTemplate(
'<table border=1 cellpadding=0 cellspacing = 0>',
'<tr><td>序号</td><td width=90 >姓名</td></tr>',
'<tpl for=".">',
'<tr><td>{#}</td><td>{.}</td></tr>',
'</tpl>',
'</table>'
);
//定义模板数据
var tplData = ['张三','李四','王五','赵六']
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);
9、基本的条件逻辑判断
//定义模板，基本的条件逻辑判断
var tpl = new Ext.XTemplate(
'<table border=1 cellpadding=0 cellspacing = 0>',
'<tr><td>序号</td><td width=90 >姓名</td><td width=90 >工资</td></tr>',
'<tpl for=".">',
'<tpl if="wage > 1000">',
'<tr><td>{#}</td><td>{name}</td><td>{wage}</td></tr>',
'</tpl>',
'</tpl>',
'</table>'
);
//定义模板数据
var tplData = [
{name : '张三',wage : 1000},
{name : '李四',wage : 1200},
{name : '王五',wage : 900},
{name : '赵六',wage : 1500}
]
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);
10、在模板中执行任意代码
<style type="text/css">
.even { background-color: #CCFFFF; }
.odd { background-color: #FFFFFF; }
.title {text-align: center;}
</style>
//定义模板，在模板中执行任意代码
var tpl = new Ext.XTemplate(
'<table border=1 cellpadding=0 cellspacing = 0 class=title>',
'<tr><td>序号</td><td width=90 >姓名</td><td width=90 >工资</td><td width=90 >奖金</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>{[this.avgWage(values)]}</td></tr>',
'</table>'
);
//模板的自定义格式化函数，用于计算工资总计
tpl.avgWage = function (o) {
var sum = 0;
var length = o.emps.length;
for(var i = 0 ; i <length ; i++){
sum += o.emps[i].wage;
}
return sum * o.per;
}
//定义模板数据，per表示发薪比例，wage表示标准工资
var tplData = {
per : 0.9,
emps : [
{name : '张三',wage : 1000},
{name : '李四',wage : 1200},
{name : '王五',wage : 900},
{name : '赵六',wage : 1500}
]
}
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);
11、使用模板成员函数
//定义模板，在模板中使用模板成员函数
var tpl = new Ext.XTemplate(
'<table border=1 cellpadding=0 cellspacing = 0 class=title>',
'<tr><td width=90 >姓名</td><td width=90 >工资</td></tr>',
'<tpl for=".">',
'<tpl if="this.check(wage)">',
'<tr><td>{name}</td>',
'<td>{[this.format(values.wage)]}</td>',
'</tpl></tpl>',
'</table>',
{
//定义模板成员函数
check : function(wage) {
if(wage > 1000){
return true;
}else {
return false
}
},
//定义模板成员函数
format : function(wage) {
if(wage > 1300){
return '<font color=red>'+wage+'</font>';
}else {
return '<font color=blue>'+wage+'</font>';
}
}
}
);
//定义模板数据，per表示发薪比例，wage表示标准工资
var tplData = [
{name : '张三',wage : 1000},
{name : '李四',wage : 1200},
{name : '王五',wage : 900},
{name : '赵六',wage : 1500}
]
//模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
tpl.append('tpl-table',tplData);
12、在Extjs组件中使用模板
<style type="text/css">
.even { background-color: #CCFFFF; }
.odd { background-color: #FFFFFF; }
</style>
//定义组合框模板
var itemTpl = new Ext.XTemplate(
'<div class="x-combo-list-item {[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']
});
new Ext.form.Panel({
title:'在Extjs组件中使用模板',
renderTo: Ext.getBody(),
bodyPadding: 5,
height : 100,
frame : true,
width : 350,
items : [{
xtype : 'combo',
fieldLabel:'邮政编码',
displayField:'item',
valueField:'value',
labelSeparator :'：',//分隔符
listConfig : {
itemTpl : itemTpl
},
editable : false,
queryMode: 'local',
triggerAction: 'all',
store : new Ext.data.Store({
model : 'ItemInfo',
fields: ['item','value'],
data : [{item:'条目1',value:1},
{item:'条目2',value:2},
{item:'条目3',value:3},
{item:'条目4',value:4},
{item:'条目5',value:5},
{item:'条目6',value:6}]
})
}]
});
13、Ext.view.View示例
var inputForm = Ext.create('Ext.form.Panel',{
bodyPadding: 5,
width : 490,
flex : 2,
fieldDefaults:{//统一设置表单字段默认属性
labelSeparator :'：',//分隔符
labelWidth : 60,//标签宽度
width : 150,//字段宽度
msgTarget : 'side',
allowBlank : false,
labelAlign : 'right'
},
layout: {//设置容器字段布局
type: 'hbox',
align: 'middle'//垂直居中
},
defaultType: 'textfield',//设置表单字段的默认类型
items:[{
fieldLabel:'产品名称',
name : 'productName'
},{
fieldLabel:'数量',
xtype : 'numberfield',
name : 'productNum'
},{
fieldLabel:'金额',
xtype : 'numberfield',
name : 'productPrice'
}],
fbar : [{
text : '添加',
handler : function(){
if(inputForm.getForm().isValid()){
var data = inputForm.getForm().getValues();
var product = Ext.ModelMgr.create(data, 'ProductInfo');
productStore.add(product);
inputForm.getForm().reset();
}
}
}]
});
//创建数据模型
Ext.regModel('ProductInfo', {
fields: ['productName','productNum','productPrice']
});
//创建产品数据源
var productStore = Ext.create('Ext.data.Store',{
autoLoad : true,
data : [],
model : 'ProductInfo',
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'datas'
}
}
});
//定义模板
var productTpl = new Ext.XTemplate(
'<table border=1 cellspacing=0 cellpadding=0 width=100%>',
'<tr><td width=160>产品名称</td><td width=75>数量</td><td width=75>金额</td></tr>',
'<tpl for=".">',
'<tr><td>{productName}</td><td>{productNum}</td><td>{productPrice}</td></tr>',
'</tpl>',
'</table>'
);
//产品数据视图
var productView = Ext.create('Ext.view.View',{
store: productStore,
tpl: productTpl,
deferEmptyText : false,
itemSelector:'div.thumb-wrap',
emptyText: '请录入商品'
});
//产品面板
var productViewPanel = Ext.create('Ext.panel.Panel',{
autoScroll:true,
width : 490,
flex : 3,
layout : 'fit',
bodyStyle:'background-color:#FFFFFF',
items: productView
});
Ext.create('Ext.panel.Panel',{
renderTo: document.body,
frame:true,
width : 500,
height: 200,
layout:'vbox',
title:'产品录入',
items: [inputForm, productViewPanel]
});