`

(转)Ext.XTemplate 模板一

阅读更多
原文:http://www.cnblogs.com/lipan/archive/2011/12/12/2274740.html

即时执行任意的代码
在XTemplate中,{[ ... ]}范围内的内容会在模板作用域的范围下执行。这里有一些特殊的变量:
values:当前作用域下的值。若想改变其中的值,你可以切换子模板的作用域。
parent:父级模板的对象
xindex:若是循环模板,这是当前循环的索引index(从1开始)。
xcount:若是循环模板,这是循环的次数 。
//即时执行任意的代码
var tp6 = new Ext.XTemplate(
 '当前日期:{[new Date().toLocaleDateString()]}',
 '<table cellpadding=0 cellspacing=0 border=1 width=400px>',
 '<tpl for="friends"><tr>',
     '<tpl if="xindex == 1"><td rowspan={[xcount]}>他的好友:</td></tpl>',
     '<td>{["姓名:" + values.name + ",年龄:" + values.age + ","+ (values.like=="鲜花"?"是个女孩":"是个男孩")]}</td>',
 '</tr></tpl>',
 '</table>'
);
tp6.overwrite("div6", data);


条件逻辑判断
配合标签tpl和操作符if的使用,可以做一些简单的逻辑判断,注意没有else操作符,你可以写两个if来代替。另外大于,小于符号要经过html编码,不能直接写出。
//条件逻辑判断
var tp5 = new Ext.XTemplate(
 '<table cellpadding=0 cellspacing=0 border=1 width=400px>',
 '<tr><td>他的好友:</td><td>',
 '<tpl for="friends">',
     '<tpl if="age < 18"><p>{name}:[未成年]</p></tpl>',
     '<tpl if="age >= 18"><p>{name}:{age}岁</p></tpl>',
 '</tpl></td></tr>',
 '</table>'
);
tp5.overwrite("div5", data);
分享到:
评论

相关推荐

    Ext_3.2模板的使用示例

    本人觉得Ext.Template和Ext.XTemplate模板类非常类似.Net的母板页,或者非常类似于JSP技术中jstl标准标签和EL表达式功能;但是它是一个客户端的技术。 阅读目标:需要使用模板方式来开发web应用的人员。 前置条件:...

    ExtJs4_笔记.docx

    第四章 Ext.XTemplate 模板 31 一、使用标签tpl和操作符for 33 二、在子模板的范围内访问父元素对象 34 三、数组元素索引和简单运算支持 34 四、自动渲染单根数组 35 五、条件逻辑判断 36 六、即时执行任意的代码 36...

    Ext Js权威指南(.zip.001

    8.1.4 超级模板:ext.xtemplate(包括ext.xtemplateparser和ext.xtemplatecompiler) / 393 8.1.5 模板的方法 / 396 8.2 组件的基础知识 / 396 8.2.1 概述 / 396 8.2.2 组件类的整体架构 / 397 8.2.3 布局类的...

    ext xtemplate 实例 利用模板 表格合并行 表格分组

    利用模板(xtemplate)表格合并行 简单实现表格分组,单元格行的合并。

    精通JS脚本之ExtJS框架.part1.rar

    6.5.2 Ext.XTemplate 第7章 设计表单类布局 7.1 Form表单简介 7.1.1 Form表单的基本配置 7.1.2 ExtJS对Form表单的封装 7.2 ExtJS的表单组件 7.2.1 文本输入控件Ext.form.TextField 7.2.2 多行文本输入控件Ext...

    Ext深入浅出 数据传输

    第12 章 一个完整的EXT 应用......................... 317 12.1 确定整体布局........................................ 317 12.2 使用HTML和CSS设置静态信息.......... 319 12.3 对学生信息进行数据建模.............

    精通JS脚本之ExtJS框架.part2.rar

    6.5.2 Ext.XTemplate 第7章 设计表单类布局 7.1 Form表单简介 7.1.1 Form表单的基本配置 7.1.2 ExtJS对Form表单的封装 7.2 ExtJS的表单组件 7.2.1 文本输入控件Ext.form.TextField 7.2.2 多行文本输入控件Ext...

    Ext 开发指南 学习资料

    1. 闪烁吧!看看extjs那些美丽的例子。 1.1. 一切从extjs发布包开始 1.2. 看看ext-2.0.2的文档 1.3. 为什么有的例子必须放在服务器上才能看到效果? 1.4. 为什么自己按照例子写的代码,显示出来总找不到图片 1.5. ...

    轻松搞定Extjs_原创

    三、Ext.XTemplate 38 四、小结 39 第七章:格式化 40 一、用户需要优秀体验的内容 40 二、Ext.util.Format类 40 三、再谈XTemplete 44 四、如果连Format都不能满足XTemplete的需要呢? 45 五、小结 45 第八章:...

    Ext 学习中文手册

    EXT 中文手册 1 EXT简介 3 目錄 3 下载Ext 4 开始! 4 Element:Ext的核心 4 获取多个DOM的节点 5 响应事件 5 使用Widgets 7 使用Ajax 9 EXT源码概述 11 揭示源代码 11 发布Ext源码时的一些细节 12 我应该从哪里开始...

    EXT简体中文参考手册(PDF&CHM电子档)

    EXT 中文手册 1 EXT简介 3 目錄 3 下载Ext 4 开始! 4 Element:Ext的核心 4 获取多个DOM的节点 5 响应事件 5 使用Widgets 7 使用Ajax 9 EXT源码概述 11 揭示源代码 11 发布Ext源码时的一些细节 12 我应该从哪里开始...

    Ext 将grid渲染到combox

    有时候我们需要在combo中渲染grid,这时候我们可以通过ext的模板xtemplate来实现此功能。

    EXT 中文帮助手册

    EXT 中文手册 1 EXT简介 3 目錄 3 下载Ext 4 开始! 4 Element:Ext的核心 4 获取多个DOM的节点 5 响应事件 5 使用Widgets 7 使用Ajax 9 EXT源码概述 11 揭示源代码 11 发布Ext...

    EXT 中文手册

    EXT 中文手册 1 EXT简介 3 目錄 3 下载Ext 4 开始! 4 Element:Ext的核心 4 获取多个DOM的节点 5 响应事件 5 使用Widgets 7 使用Ajax 9 EXT源码概述 11 揭示源代码 11 发布Ext...

    Sencha Touch权威指南

    XTemplate模板、Domhelper组件、DataView组件、List组件、Sheet组件使用详解;地图与多媒体,对Map组件、Video组件和Audio组件进行了详尽的讲解;具有关联关系的模型,详细讲解了如何定义一对多、多对一和一对一的...

Global site tag (gtag.js) - Google Analytics