jQuery MiniUI,Ajax Web开发

移动web应用开发-Sencha Touch篇(5)

这次主要介绍Sencha Touch中的XTemplate组件,利用该组件可以方便的构造html代码,很实用。为了减少不必要的说解,让内容更加简洁清晰,这里直接给出对应代码和代码的相应注释,只要有JavaScript基础的同学就能轻易掌握。

一、利用XTemplate创建HTML代码

var data = {//在这定义需要使用的内容
string_value:'The initial text '
};
var tpl = new Ext.XTemplate(//定义XTemplate模板
'<table>',
'<tr>',
'<td>{string_value}</td>',
'</tr>',
'</table>'
);
var tplHtml = tpl.apply(data);//用apply方法将定义的变量应用到模版中
var myToolbar = Ext.create('Ext.Toolbar',{
docked:'top',
items:[
{
text:'replace template',
handler:function(){//定义替换按钮的事件
var newData = {
string_value:'text after replacement'
};
tpl.overwrite(Ext.get('subPanel'),newData); //overwrite方法
}
}
]
});
var myPanel = Ext.create('Ext.Panel',{
items:[myToolbar,{
id:'subPanel',
stype:'panel',
html:'tplHtml'
}]
});
Ext.Viewport.add(myPanel);

二、XTemplate使用数组

var data = ({
name:’张三’,
age:37
},{
name:’李四,
age:28’
});
var tpl = new Ext.XTemplate(
‘<p>用户:’,
‘<tpl for=”.”>’,//.标识读取所有内容
‘<p>{#}.姓名:{name},年名:{age}</p>’,//特殊字符{#}标识编号,自动设置
‘<tpl></p>’
);;
var tplHtml = tpl.apply(data);
var myPanel = Ext.create(‘Ext.Panel’,{
html:tplHtml;
});
Ext.Viewport.add(myPanel)
 对于for的使用还有下面一个例子:
var company = {
name:’ADIDAS’,
employer:[{
name:’Tom’
},{
name:’Jacl’
}]
};
var tpl = new Ext.XTemplate(
‘<p>用户:</br>’,
‘<tpl for=”employer”>’,//这里for遍历的就是employer中的所有变量
‘<p>{#}.姓名:{name}</br>工作单位:{parent.name}’,//parent读取for的父元素
‘</tpl>’
);

tpl中还可以加入if和操作符判断,符合条件的显示

‘<tpl for=”.”>’,
‘<tpl if=”age>=30&&age<40”>’,//只显示年龄在30-40之间的
//......

三、XTemplate内置变量


values:模板正在访问的数据对象
parent:模板正在访问的成员对象的父对象
xindex:对数组进行遍历时,xindex变量值为当前所显示数据徐昂在数组中的编号
xcount:对数组进行遍历时,xcount变量值为数组中数据的条数
这些都是内置变量,可以直接调用
示例:
‘<tpl for=”hobby”>’,
‘<tpl if=”xindex>1”>’,//如果是第一个则在后面加,符号,起到分割作用
‘,’
‘</tpl>’
‘{.}’//否则加.
‘</tpl>’
‘({values.hobby.length}项)’,//显示一共有多少个爱好
‘<tpl id=”xindex==xcount”,
‘{
  1. 一、利用XTemplate创建HTML代码
  2. 二、XTemplate使用数组
  3. 三、XTemplate内置变量
  4. 四、在XTemplate中使用自定义函数
}人’>’,//当遍历所有员工后,显示一共有多少个人 ‘</tpl>’

四、在XTemplate中使用自定义函数


var tpl = new Ext.XTemplate(
//这里写tpl模板html内容
//以下是函数内容
{
compiled:true,//设定为以下函数预先编译,就可以在上面直接调用了
isYounger:function(age){
return age<30;
}
}
)

作者: fareise
原文: http://blog.csdn.net/fareise/article/details/50572980