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: ‘[email protected]‘,
            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

时间: 2024-10-16 22:39:01

sencha Touch 2.4 学习之 XTemplate模板的相关文章

sencha touch权威指南---学习笔记5-经纬度获取计算直线距离

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta charset="utf-8" />    <title></title>    <link rel="stylesheet" href="sdk-touch/resources/css/sencha-touch.

Sencha Touch 开发环境搭建(一)

最近正在学习  android + HTML +Css +JS 搭建 android APP的开发模式.通过上网查阅资料,选定了Sencha Touch 来进行学习,由于中间走过了不少弯路,所以特地记载下载自己的学习过程以便后期学习使用. 第一步:安装JDK+JRE,此处不多说,有问题请百度. 第二步:安装Tomcat,不多说,有问题参照第一步. 第三步:下载Sencha Touch 我在学习的时候使用的 Sencha Touch 2.4.2 版本,如果没有可以从官方网站上下载,下载地址http

Sencha学习笔记4: Creating your First App - 官方创建您的第一个Sencha Touch应用指导

英文原文地址:http://docs.sencha.com/touch/2.3.1/#!/guide/first_app (天地会珠海分舵声明:本翻译文章建议读者参照英文原文进行阅读,因为原文包含了实时代码编辑和预览的功能,这在csdn是不能做到的,所以下面只是提供了相应的截图,而非真实的演示) Required Software 软件需求 请参考<Sencha学习笔记1: Getting Started with Sencha Touch - 官方Sencha Touch入门指南> Crea

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

此篇文章是对自己在研究学习sencha touch的过程中的点滴记录,主要是JSONP的跨域请求这方面,对于何为是跨域概念还有不熟悉的,可以自己问下度娘. 先上张图: 我要完成的功能就是表格下拉刷新,并发送请求到我自己写的服务程序端,由于服务程序和此SENCHA的程序不再一个域下,总是出现请求出错(提示的大概信息就是跨域的问题).这两天真是被这个问题折磨的很久,由于没接触过sencha touch 的JSONP,开始也是一头雾水,也看了好多的资料.最终理解了SENCHA里的jsonp的请求模式.

Sencha Touch 入门学习笔记

参考博客:http://www.cnblogs.com/mlzs/p/4939045.html http://blog.csdn.net/lovelyelfpop/article/details/54376252 官方学习API:http://docs.sencha.com/extjs/6.5.2/modern/Ext.app.domain.View.html cordova打包:http://blog.csdn.net/lovelyelfpop/article/details/20392249

Sencha学习笔记1: Getting Started with Sencha Touch - 官方Sencha Touch入门指南

官方英语原文:http://docs.sencha.com/touch/2.3.1/#!/guide/getting_started What is Sencha Touch? 初识Sencha Touch Sencha Touch is a high-performance HTML5 mobile application framework. You can use Sencha Touch to produce a native-app-like experience inside a b

sencha touch 学习笔记(二)开发前准备

1.选择一款能够兼容并调试sencha touch的浏览器 sencha touch之前是针对webkit内核进行设计的,所以chrome或safari浏览器可以很好的展现基于sencha touch的webapp.本人更倾向于chrome的开发者工具了,不仅可以查看dom元素,调试js,还能实时监控,cpu使用率,触发事件,内存占用等,是js开发的强力工具): 2.下载sencha cmd工具的下载并进行配置 软件名称:SenchaCmd-4.0.5.87-windows 软件下载:http:

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

DataView是Sencha Touch中最重要的组件,用于数据的可视化.数据可视化的重要性不言而喻,可以讲任何数据以形象的方式展示给用户.目前,如何更好地可视化是许多公司或框架都在追求的.通过数据的可视化可以发现数据之间的规律,预测未来的情况.下面我们就看看Sencha Touch中是怎么进行数据可视化的. 由于DataView组件内容非常多,所以将在以后的一段时间内持续这一部分的学习. 首先废话不多说,直接上使用DataView组件的代码框架. launch:function(){ var

Sencha Touch 手机移动开发框架 HTML5 项目压缩方案 (一);

Sencha Touch框架生成基本项目目录结构 Index.html/ App.js App.json /touch[sdk]/ /Sencha-touch.js /src Resources/ App/ app.js以及app.json 是程序的入口点及基本加载配置: /touch[sdk] sencha-touch[debug|min...].js 是 SDK 文件 /src 这里是存放组件的位置 Resources/用于存放 样式及图片等资源文件; app/用于存放我们编写的程序源码: