sencha Touch 2.4 学习之 XTemplate模板

XTemplate模板

<!DOCTYPE html>
<html><head><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="../touch/resources/css/sencha-touch.css"><script type="text/javascript" src="../touch/sencha-touch-all-debug.js"></script><title>DEMO</title><script type="text/javascript"> Ext.onReady(function() { //数据源 var data = { name: 'Tommy Maintz', title: 'Lead Developer', company: 'Sencha Inc.', email: 'tommy@sencha.com', address: '5 Cups Drive', city: 'Palo Alto', state: 'CA', zip: '44102', drinks: ['Coffee', 'Soda', 'Water'], kids: [{ name: 'son1', age:3 , sunzi : [{name : 'sunzi1'},{name:'sunzi2'}] },{ name: 'son2', age:2 , sunzi : [{name : 'sunzi3'},{name:'sunzi4'}] },{ name: 'son3', age:0 , sunzi : [{name : 'sunzi5'},{name:'sunzi6'}] }] }; //呈现组件 var mypanel = new Ext.Panel({ id: "mypanel", width: 300, frame: true, height: 100, title: "XTemplate简单示例", renderTo: Ext.getBody() }); /* //创建模板 var tpl = new Ext.XTemplate( '<p>Kids: ', '<tpl for="kids.sunzi">', // process the data.kids node '<p>{#}. {name}</p>', // use current array index to autonumber '<p>Dad: {parent.name}</p>', '</tpl></p>' ); */ //创建模板 var tpl = new Ext.XTemplate( '<p>Me: ', '<tpl for=".">', // data '<p>{#}. {name}</p>', '<tpl for="kids">', // kids me '<p>----son: {name}</p>', // som '<p>----Dad: {parent.name}</p>', '<tpl for="sunzi">',//sunzi '<p>------sunzi: {name}</p>', '<p>------Dad: {parent.name}</p>', '</tpl>', '</tpl>', '<p>Yeye: {parent.name}</p>', //yeye '</tpl></p>' ); //重写绑定模板 tpl.overwrite('tpl', data); // pass the kids property of the data object  }); </script> </head> <body> <div id="tpl"> </div> </body> </html>

效果：

代码主要是介绍下，XTemplate的循环嵌套处理。

下面介绍一下 XTemplate 常用的方法：

类

Ext.XTemplate继承Ext.Template

功能支持

自动填充数组数据到模板；

支持基本关系运算符；

支持基本算术运算符；

支持特殊变量；

支持自定义函数；

支持循环语句

＜tpl for="."＞...＜/tpl＞ // 循环遍历当前数组或对象；也可以出现在tpl语句体中，代表当前遍历的对象；

＜tpl for="foo"＞...＜/tpl＞ // 循环遍历当前数组或对象中的foo；

＜tpl for="foo.bar"＞...＜/tpl＞ // 循环遍历当前数组或对象中的foo.bara；

支持判断语句

＜tpl if="age < 100"＞...＜/tpl＞ // 判断语句

＜tpl if="age < 20"＞ // 判断语句块（注意：关系运算符必须经过编码！）

...

＜tpl elseif="age >= 20"＞

...

＜tpl else＞

...

＜/tpl＞

支持算术运算符

+-*/

特殊模板变量

values：当前正在被访问的对象；

parent：遍历父节点；

xindex：在循环中使用，代表循环索引（从1开始）；也可以使用{#}来访问索引；

xcount：在循环中使用，代表循环次数；

自定义成员函数

详细参考：http://docs.sencha.com/touch/2.3.1/#!/api/Ext.XTemplate

重要方法

overwrite( el, values, [returnElement] ) : HTMLElement/Ext.Element // 将模板生成的信息输出至元素

el：String/HTMLElement/Ext.Element(String是指元素id);比如div的id等。

values：Object/Array

returnElement：true返回Ext.Element，否则返回HTMLElement，默认是false；

apply( values ) : String // 注入数据values到模板，返回生成的文本；

参考：

http://www.cnblogs.com/FredTang/archive/2012/08/09/2629991.html

http://blog.sina.com.cn/s/blog_667ac0360102ede0.html

sencha Touch 2.4 学习之 XTemplate模板相关推荐

Sencha touch+Phonegap+IntelliJ 学习散记（一）-介绍、官方下载、配置
PhoneGap 官方网站下载地址 http://phonegap.com/ PhoneGap 入门配置教程 http://phonegap.com/start Phonegap介绍 PhoneGa ...
sencha touch 入门学习资料大全
现在sencha touch已经更新到2.3.1版本了重新整理一下资料官方网站:http://www.sencha.com/products/touch/ 在线文档:http://docs.sen ...
Sencha学习笔记4: Creating your First App - 官方创建您的第一个Sencha Touch应用指导
英文原文地址:http://docs.sencha.com/touch/2.3.1/#!/guide/first_app (天地会珠海分舵声明:本翻译文章建议读者参照英文原文进行阅读,因为原文包含了实 ...
从零开始学习Sencha Touch MVC应用之七
在此我们将要继续构建我们的Sencha Touch MVC app应用工程,这次我们将探索控制器action的不同调用方式. 控制器action的调用方式将按下面三种方式: l 利用路 ...
从零开始学习Sencha Touch MVC应用之十四
我们已经给search-panel设置了cls属性:"一个可以添加到这个组件元素中的供选择的附加CSS类(默认为""),主要可用于对组件的定制风格或者其组件元素的CSS规 ...
touch服务器端文件,Sencha touch 2 入门 -------- DataView 显示服务器端JSON文件数据...
今天学习了下DataView如何显示JSON文件数据,废话不多说,直接贴代码: 首先看下文件目录: 然后看下我们要处理的JSON文件,bookInfo.json. { "success&qu ...
[Phonegap+Sencha Touch] 移动开发77 Cordova Hot Code Push插件实现自己主动更新App的Web内容...
原文地址:http://blog.csdn.net/lovelyelfpop/article/details/50848524 插件地址:https://github.com/nordnet/cord ...
HTML5开发移动web应用——Sencha Touch篇(5)
这次主要介绍Sencha Touch中的XTemplate组件,利用该组件可以方便的构造html代码,很实用.为了减少不必要的说解,让内容更加简洁清晰,这里直接给出对应代码和代码的相应注释,只要有Ja ...
sencha touch 入门系列（一）sencha touch 简介
参考链接:http://mobile.51cto.com/others-278381.htm Sencha touch 是基于JavaScript编写的Ajax框架ExtJS,将现有的ExtJS整合J ...

sencha Touch 2.4 学习之 XTemplate模板

sencha Touch 2.4 学习之 XTemplate模板相关推荐

最新文章

热门文章