`

(转)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.XTemplate的实例代码

    1. **Ext.lib.Ajax.request**: 这个方法是用来发起异步的Ajax请求,向服务器'/Index/mainIndex'发送POST请求。`success`回调函数会在请求成功时执行,这里用于处理返回的数据。 2. **处理返回数据**: `data....

    Ext_3.2模板的使用示例

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

    Ext.DatePicker yearmonth

    1. **创建Override**:首先,我们需要创建一个新的类,这个类将覆盖`Ext.picker.Date`或`Ext.DatePicker`的原有方法,以更改年份和月份下拉框的位置。 2. **修改模板**:EXTJS的组件大多基于XTemplate,所以要改变...

    extjs模板的使用

    1. **基本使用**: - `Ext.XTemplate` 创建模板时,可以使用一对 `&lt;tpl&gt;` 标签包裹 HTML 结构,`for` 操作符用于指定循环的数据源,例如:`&lt;tpl for="."&gt;...&lt;/tpl&gt;`,这里的 `.` 代表当前遍历的对象。 - 示例中的 ...

    Extjs事件和模板

    var xtemplate = new Ext.XTemplate( '&lt;tpl for="."&gt;', '&lt;div&gt;{name}&lt;/div&gt;', '&lt;span&gt;{email}&lt;/span&gt;', '&lt;/tpl&gt;' ); xtemplate.apply([{name: 'User1', email: 'user1@example.com'}, {name: 'User2', email: '...

    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)表格合并行 简单实现表格分组,单元格行的合并。

    EXT核心API详解.doc

    1. **Ext类**:EXT库的基础类,提供了许多实用的方法,如创建元素、事件处理等。 2. **Array类**:扩展了JavaScript原生的数组对象,提供了如each、indexOf、remove等功能,增强了数组操作能力。 3. **Number类**...

    ext_image.rar_ext_image_extjs_extjs 4.2 img_extjs image_extjs图片上

    模板(`Ext.XTemplate`或`Ext.util.Format`)则用于格式化和渲染每个图片项的HTML。 图片上传功能通常借助于ExtJS的表单组件(`Ext.form.Panel`)和上传字段(`Ext.form.field.File`)。在ExtJS 4.2中,上传组件...

    extjs实现下拉框多选

    例如,可以创建一个新的 `Ext.XTemplate`,并在 `displayTpl` 属性中使用它: ```javascript var displayTpl = new Ext.XTemplate('&lt;tpl for="."&gt;&lt;div class="x-boundlist-item"&gt;{name}&lt;/div&gt;&lt;/tpl&gt;'); combo....

    Extjs帮助文档.pdf

    `Ext.XTemplate` 是一个强大的模板引擎,用于动态生成HTML内容。它支持简单的语法和表达式,使得渲染数据到HTML变得十分简单。 示例代码: ```javascript var tpl = new Ext.XTemplate( '&lt;ul&gt;', '&lt;tpl for="."&gt;',...

    ExtJs4_笔记.docx

    1. **动态引用加载**:通过`Ext.require`实现按需加载JS文件,优化页面加载速度。 2. **类的封装**:使用面向对象的方式组织代码,提高代码复用性和可维护性。 3. **基本数据类型**:增加了对复杂数据类型的处理,如...

    精通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 对学生信息进行数据建模.............

    老师整理的extjs学习笔记

    **2.2 Ext.Template 及 Ext.XTemplate 模板应用** ##### 2.2.1 Ext.Template `Ext.Template` 是一种简单但功能强大的模板引擎,允许开发者使用简单的语法来定义 HTML 结构,并通过数据填充这些模板。例如: ```...

Global site tag (gtag.js) - Google Analytics