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：在循环中使用，代表循环次数；
 
自定义成员函数
 
重要方法
   
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. C++求斐波那契数

    题目内容:斐波那契数定义为:f(0)=0,f(1)=1,f(n)=f(n-1)+f(n-2)(n>1且n为整数) 如果写出菲氏数列,则应该是: 0 1 1 2 3 5 8 13 21 34 …… ...

  2. Sql Server数据库之通过SqlBulkCopy快速插入大量数据

    废话不多说,直接上代码 /// <summary> /// 海量数据插入方法 /// </summary> /// <param name="connectio ...

  3. Keil（MDK-ARM）使用教程（二）_菜单

    Ⅰ.概述 接着上一篇来总结Keil(MDK-ARM)菜单相关的内容,详情请往下看. 关于Keil的下载.安装和新建工程我已将在前面做了详细的总结,不懂的可以参考我博客里面相关的文章.该文章是在新建好工 ...

  4. uC/OS-II之系统函数20160526

    任务管理 1 OSTaskCreate() 建立一个新任务.任务的建立可以在多任务环境启动之前,也可以在正在运行的任务中建立.中断处理程序中不能 建立任务.一个任务可以为无限循环的结构. 函数原型:I ...

  5. Requests:Python HTTP Module学习笔记（二）（转）

    在上一篇日志中对Requests做了一个整体的介绍,接来下再介绍一些高级的用法,主要资料还是翻译自官网的文档,如有错漏,欢迎指正. 参考资料:http://docs.python-requests.o ...

  6. Python核心编程--学习笔记--7--字典和集合

    本章介绍Python语言中的映射类型(字典)和集合类型,包括操作符.工厂函数.内建函数与方法. 1 字典 字典是Python中唯一的映射类型——键key直接映射到值value.字典是容器类型,其对象是 ...

  7. 动态加载故事storyboard

    第一种方法: ViewControllerB *vcB = [self.storyboard instantiateViewControllerWithIdentifier:@"Name o ...

  8. Cron表达式说明

    CronTrigger CronTriggers往往比SimpleTrigger更有用,如果您需要基于日历的概念,而非SimpleTrigger完全指定的时间间隔,复发的发射工作的时间表. CronT ...

  9. Effiective C++ (一)

    最近在看Effective  C++ ,同时将总结一下里边的重要知识点: ##########################    module  1    #################### ...

  10. viewport使用 html5

    viewport 语法介绍: 01 02 width 控制 viewport 的大小,可以指定的一个值或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的 ...