//1.最简单的XTemplate模板示
//2.在模板中使用本地数据
//3.读取对象属性值中的数组
//4.在读取tpl标签与for标签的时候,可以直接使用{.}变量读取数组的内容
________________________________________________________________________________________
单击"替换模板",则替换模板的文字
------------------------------------------------------1.最简单的XTemplate模板示------------------------------------------------------------------------------------------
var data={
string_value:'模板的初始文字'
};
var tpl=new Ext.XTemplate(
'<table>',
'<tr>',
'<td>{string_value}</td>',
'</tr>',
'</table>'
);
var tplHtml=tpl.apply(data);//将脚本中定义的变量值应用到模板中,并将该模板赋值给一个代表一段HTML代码的变量
var toolbar=Ext.create('Ext.Toolbar',{
docked:'top',
items:[
{
text:'替换模板',
handler:function(){
var newData={
string_value:'替换后的模板'
}
tpl.overwrite(Ext.get('subPanel'),newData)//将数据添加到应用模板,然后tpl重新加载新数据
}
}
]
});
var myPanel=Ext.create('Ext.Panel',{
items:[
toolbar,
{
id:'subPanel',
xtype:'panel',
html:tplHtml
}
]
});
Ext.Viewport.add(myPanel);
_____________________________________________________________________________________
//-------------------------2.在模板中使用本地数据--------------------------------
//知识点:将数据中的全部数据循环读入模板<tpl for="."></tpl>
var data=[
{
name:'罗晓丽',
age:23
},
{
name:'王晶晶',
age:18
},
{
name:'沈婷',
age:20
},
{
name:'京京网',
age:50
}
];
var tpl=new Ext.XTemplate(
'<div>个人信息:</div>',
'<tpl for=".">',
'<div>{#}. 姓名:{name},年龄:{age}</div>',
'</tpl>'
);
var tplHtml=tpl.apply(data);//将脚本中定义的变量值应用到模板中,并将该模板赋值给一个代表一段HTML代码的变量 var myPanel=Ext.create('Ext.Panel',{
html:tplHtml
});
Ext.Viewport.add(myPanel);
________________________________________________________________________________
//-------------------------3.读取对象属性值中的数组--------------------------------
//知识点:使用tpl与for不仅可以直接读取数据,而且可以读取一个对象的某个属性值中的数组.
//方法如下:<tpl for="AttributeName"></tpl>
//例如:要在模板中读入某个公司的信息
var company={
name:'常州第一百货公司',
address:'清扬北路238号',
email:'test@qq.com',
city:'常州市',
province:'江苏省',
zip:'213001',
employer:[
{
name:'张三',
age:37
},{
name:'李四',
age:27
},{
name:'王五',
age:44
}
]
}
var tpl=new Ext.XTemplate(
'<p>公司:<br /></p>',
'<tpl for=".">',
'公司名称:{name}<br />',
'地址:{province}{city}{address}<br />',
'电子邮件:{email}<br />',
'邮政编码:{zip}<br />',
'<tpl for="employer">',
'姓名:{name},年龄:{age}<br />',
'</tpl>',
'</tpl>'
);
var tplHtml=tpl.apply(company);//将脚本中定义的变量值应用到模板中,并将该模板赋值给一个代表一段HTML代码的变量
var myPanel=Ext.create('Ext.Panel',{
html:tplHtml
});
Ext.Viewport.add(myPanel);
___________________________________________________________________________
//-------------------------4.在读取tpl标签与for标签的时候,可以直接使用{.}变量读取数组的内容-----------------------
//例如:要在模板中读入某个公司的信息
var data=[
'张三','李四','王五'
]
var tpl=new Ext.XTemplate(
'<tpl for=".">',
'姓名:{.}<br/>',
'</tpl>'
);
var tplHtml=tpl.apply(data);//将脚本中定义的变量值应用到模板中,并将该模板赋值给一个代表一段HTML代码的变量
var myPanel=Ext.create('Ext.Panel',{
html:tplHtml
});
Ext.Viewport.add(myPanel);
_______________________________________________________________________________
//-------------------------5.访问父类对象-----------------------
//使用标签tpl与for遍历某个对象的成员对象数组时,可以使用parent对象访问成员对象的父对象的其他属性,这是parent对象就代表了成员对象的父对象
var company={
name:'常州第一百货公司',
employer:[
{
name:'张三',
age:37
},{
name:'李四',
age:27
},{
name:'王五',
age:44
}
]
}
var tpl=new Ext.XTemplate(
'<p>公司:<br /></p>',
'<tpl for="employer">',
'姓名:{name},年龄:{age},工作单位:{parent.name}<br />',
'</tpl>'
);
var tplHtml=tpl.apply(company);//将脚本中定义的变量值应用到模板中,并将该模板赋值给一个代表一段HTML代码的变量
var myPanel=Ext.create('Ext.Panel',{
html:tplHtml
});
Ext.Viewport.add(myPanel);
___________________________________________________________________________