XTemplate模板

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <link rel="stylesheet" type="text/css" href="../touch/resources/css/sencha-touch.css">
  6.         <script type="text/javascript" src="../touch/sencha-touch-all-debug.js"></script>
  7.         <title>DEMO</title>
  8.         <script type="text/javascript">
  9.       Ext.onReady(function() {
  10.         //数据源
  11.         var data = {
  12.             name: 'Tommy Maintz',
  13.             title: 'Lead Developer',
  14.             company: 'Sencha Inc.',
  15.             email: 'tommy@sencha.com',
  16.             address: '5 Cups Drive',
  17.             city: 'Palo Alto',
  18.             state: 'CA',
  19.             zip: '44102',
  20.             drinks: ['Coffee', 'Soda', 'Water'], 
  21.  
  22.             kids: [{
  23.                     name: 'son1',
  24.                     age:3 ,
  25.                     sunzi : [{name : 'sunzi1'},{name:'sunzi2'}]
  26.                 },{
  27.                     name: 'son2',
  28.                     age:2 ,
  29.                     sunzi : [{name : 'sunzi3'},{name:'sunzi4'}]
  30.                 },{
  31.                     name: 'son3',
  32.                     age:0 ,
  33.                     sunzi : [{name : 'sunzi5'},{name:'sunzi6'}]
  34.             }]
  35.             }; 
  36.  
  37.         //呈现组件
  38.         var mypanel = new Ext.Panel({
  39.             id: "mypanel",
  40.             width: 300,
  41.             frame: true,
  42.             height: 100,
  43.             title: "XTemplate简单示例",
  44.             renderTo: Ext.getBody()
  45.         });
  46.          /*
  47.         //创建模板
  48.         var tpl = new Ext.XTemplate(
  49.             '<p>Kids: ',
  50.             '<tpl for="kids.sunzi">',       // process the data.kids node
  51.                 '<p>{#}. {name}</p>',  // use current array index to autonumber
  52.                 '<p>Dad: {parent.name}</p>',
  53.             '</tpl></p>'
  54.         ); */
  55.  
  56.         //创建模板
  57.         var tpl = new Ext.XTemplate(
  58.             '<p>Me: ',
  59.             '<tpl for=".">',       // data
  60.                 '<p>{#}. {name}</p>',
  61.                 '<tpl for="kids">', // kids me
  62.                     '<p>----son: {name}</p>',  // som
  63.                         '<p>----Dad: {parent.name}</p>',
  64.                         '<tpl for="sunzi">',//sunzi
  65.                              '<p>------sunzi: {name}</p>',
  66.                              '<p>------Dad: {parent.name}</p>',
  67.                         '</tpl>',
  68.                 '</tpl>',
  69.  
  70.                 '<p>Yeye: {parent.name}</p>', //yeye
  71.             '</tpl></p>'
  72.         ); 
  73.  
  74.         //重写绑定模板
  75.         tpl.overwrite('tpl', data); // pass the kids property of the data object 
  76.  
  77.      }); 
  78.  
  79.     </script>
  80.     </head>
  81.     <body>
  82.         <div id="tpl">
  83.  
  84.         </div>
  85.     </body>
  86. </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：在循环中使用，代表循环次数；
 
自定义成员函数
 
重要方法
   
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模板的更多相关文章

  1. Sencha Touch 2.1学习图表Chart概述

    Extjs.chart提供了可视化展现数据的能力,每个图表可以绑定到数据模型Ext.data.Store上, 并随着数据的变换可以自动的更新图表 一个图表对象包括图标风格.坐标(axes).序列(se ...

  2. 关于sencha touch 的JSONP跨域请求的学习研究

    此篇文章是对自己在研究学习sencha touch的过程中的点滴记录,主要是JSONP的跨域请求这方面,对于何为是跨域概念还有不熟悉的,可以自己问下度娘. 先上张图: 我要完成的功能就是表格下拉刷新, ...

  3. sencha touch 入门学习资料大全(2015-12-30)

    现在sencha touch已经更新到2.4.2版本了 重新整理一下资料 官方网站:http://www.sencha.com/products/touch/ 在线文档:http://docs.sen ...

  4. sencha touch 入门学习资料大全

    现在sencha touch已经更新到2.3.1版本了 重新整理一下资料 官方网站:http://www.sencha.com/products/touch/ 在线文档:http://docs.sen ...

  5. XTemplate模板学习和使用总结

    XTemplate模板学习和使用总结 前言   XTemplate是我接触的第一个模板语言,用在公司的一个NodeJS项目中,跟它打交道经常是因为需要使用它的语法向模板中注入数据.因为是刚入门前端不久 ...

  6. 39.VUE学习--组件,子组件中data数据的使用,x-template模板的使用,改变for循环里的某条数据里的值

    多处引用相同组件时,操作data不会相互影响 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  7. HTML5开发移动web应用——Sencha Touch篇(8)

    DataView是Sencha Touch中最重要的组件,用于数据的可视化.数据可视化的重要性不言而喻,能够讲不论什么数据以形象的方式展示给用户. 眼下,怎样更好地可视化是很多公司或框架都在追求的. ...

  8. Sencha Touch 手机移动开发框架 HTML5 项目压缩方案;

    Sencha Touch框架生成基本项目目录结构 Index.html/ App.js App.json /touch[sdk]/ /Sencha-touch.js /src Resources/ A ...

  9. [Phonegap+Sencha Touch] 移动开发77 Cordova Hot Code Push插件实现自己主动更新App的Web内容

    原文地址:http://blog.csdn.net/lovelyelfpop/article/details/50848524 插件地址:https://github.com/nordnet/cord ...

随机推荐

  1. asp.net mvc razor html encoding

    HTML Encoding 为了跨站点的脚本攻击,Razor 语法会直接将脚本代码编码输出. @{string message = "<script>alert('haacked ...

  2. 实战Django：官方实例Part3

    前面两个部分我们介绍了投票应用的框架和后台管理部分.接下来舍得要介绍这个应用面向用户的界面. 这里我们要引入一个新的概念,"视图".在Django中,视图是一根连接模型和模板的纽带 ...

  3. Ruby求出数组中最小值及其下标

    其实很简单 Ruby的Array类自带了min方法可以求出最小值,然后调用Array的index方法传入元素值就可以求出下标 a = [1, 2, 3, 4, 5, 6] theMin = a.min ...

  4. Visual Studio 2013中添加mimeType

    事例: cd C:\Program files\IIS Expressappcmd set config /section:staticContent /+[fileExtension='.json' ...

  5. git的工作流程（分支合并）

    git支持很多种工作流程,我们采用的一般是这样,远程创建一个主分支,本地每人创建功能分支,日常工作流程如下: 去自己的工作分支$ git checkout work 工作.... 提交工作分支的修改$ ...

  6. DB2物化表

    DB2物化查询表(MQT)是DB2数据库中一类特殊的表 物化表和视图的区别 物化表是一个查询结果集,视图是一个SQL语句. 以下是一个简单例子(说明物化表) 1.创建表,插入测试数据 ----创建表 ...

  7. bzoj 3196/tyvj p1730 二逼平衡树

    原题链接:http://www.tyvj.cn/p/1730 树套树... 如下: #include<cstdio> #include<cstdlib> #include< ...

  8. .net 高效管理稀缺资源（数据库资源，文件资源等）

    MSDN建议按照下面的模式实现IDisposable接口: public class Foo: IDisposable { public void Dispose() { Dispose(true); ...

  9. Socket与TcpClient的区别(转载）

    Socket和TcpClient有什么区别 原文:http://wxwinter.spaces.live.com/blog/cns!C36588978AFC344A!322.entry 回答: &qu ...

  10. python djange输入中文错误的解决办法

    UnicodeEncodeError: 'ascii' codec can't encode characters in position 0-1: ordinal not in range(128) ...