HTML5开发移动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”,

‘{[index]}人’>’,//当遍历所有员工后，显示一共有多少个人

‘</tpl>’

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

var tpl = new Ext.XTemplate(

//这里写tpl模板html内容

//以下是函数内容

{

compiled:true,//设定为以下函数预先编译，就可以在上面直接调用了

isYounger:function(age){

return age<30;

}

)

HTML5开发移动web应用——Sencha Touch篇(5)相关推荐

HTML5开发移动web应用——Sencha Touch篇(12)
Sencha Touch同样可以使用地图.多媒体等插件. 1.Map组件我们通过Ext.Map定义Map组件,其xtype为map.除了使用该插件外,还要调用Google的地图API所使用的js文件 ...
html5 sencha,HTML5开发实战——Sencha Touch篇(1)
学习了许多基本的sencha touch内容,已经了解了sencha touch的开发模式.接下来一段时间我们将利用sencha touch来进行自己的web应用构建.先要解决的是前端的问题,从最简单 ...
HTML5开发移动web应用—JQuery Mobile(1)
JQuery Mobile是一个简单易用的web移动app开发框架.使用它就像使用jQuery一样,引入必要的文件即可. 最基础的jQuery Mobile文件的结构代码如下: <body> ...
HTML5开发和web前端开发的区别与联系？
HTML5与Web前端什么关系,Web前端有哪些优势?Web前端就业怎么样?现在学习前端就业前景好吗?越来越多人了解Web前端,也有很多年轻人想进入到Web前端的行列,但是现在Web前端还值得大家去选 ...
HTML5开发APP页面（动效篇）
作为一名前端,在拿到设计稿时你有两种选择: 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来作为一个有志向的前端,当然是选2啦!可是需求时间又很短很短,怎么办呢? 这次就 ...
Sencha touch 开发指南
Sencha touch 开发指南本文主要介绍如何使用Sencha Touch为手持设备进行应用开发,主要是针对iPhone这样的高端手机,我们会通过一个详细的例子来介绍整个开发的流程. Sench ...
使用 jQuery Mobile 与 HTML5 开发 Web App (十九) —— HTML5 对 Web App 的影响
在本系列文章的开头,Kayo 曾经介绍过 Web App 的优缺点,并且说明了 HTML5 在其中起的作用,当然,Web Apps 的发展需要 HTML5 , CSS 与 JavaScript 以及后 ...
如何用Sencha Touch打包Android的APK
什么是Sencha Touch 前不久基于JavaScript编写的Ajax框架ExtJS,将现有的ExtJS整合JQTouch.Raphaël库,推出适用于最前沿Touch Web的Sencha T ...
Sencha Touch
Sencha Touch 是第一款基于 HTML5 的手机开发框架,提供五花八门的界面UI组件用以开发丰富特效的手机应用程序. 而 Sencha 这是刚刚由 ExtJS.jQtouch 和 Rapha ...

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

HTML5开发移动web应用——Sencha Touch篇(5)相关推荐

最新文章

热门文章