原文:
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);
分享到:
相关推荐
1. **Ext.lib.Ajax.request**: 这个方法是用来发起异步的Ajax请求,向服务器'/Index/mainIndex'发送POST请求。`success`回调函数会在请求成功时执行,这里用于处理返回的数据。 2. **处理返回数据**: `data....
本人觉得Ext.Template和Ext.XTemplate模板类非常类似.Net的母板页,或者非常类似于JSP技术中jstl标准标签和EL表达式功能;但是它是一个客户端的技术。 阅读目标:需要使用模板方式来开发web应用的人员。 前置条件:...
1. **创建Override**:首先,我们需要创建一个新的类,这个类将覆盖`Ext.picker.Date`或`Ext.DatePicker`的原有方法,以更改年份和月份下拉框的位置。 2. **修改模板**:EXTJS的组件大多基于XTemplate,所以要改变...
1. **基本使用**: - `Ext.XTemplate` 创建模板时,可以使用一对 `<tpl>` 标签包裹 HTML 结构,`for` 操作符用于指定循环的数据源,例如:`<tpl for=".">...</tpl>`,这里的 `.` 代表当前遍历的对象。 - 示例中的 ...
var xtemplate = new Ext.XTemplate( '<tpl for=".">', '<div>{name}</div>', '<span>{email}</span>', '</tpl>' ); xtemplate.apply([{name: 'User1', email: 'user1@example.com'}, {name: 'User2', email: '...
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 布局类的...
利用模板(xtemplate)表格合并行 简单实现表格分组,单元格行的合并。
1. **Ext类**:EXT库的基础类,提供了许多实用的方法,如创建元素、事件处理等。 2. **Array类**:扩展了JavaScript原生的数组对象,提供了如each、indexOf、remove等功能,增强了数组操作能力。 3. **Number类**...
模板(`Ext.XTemplate`或`Ext.util.Format`)则用于格式化和渲染每个图片项的HTML。 图片上传功能通常借助于ExtJS的表单组件(`Ext.form.Panel`)和上传字段(`Ext.form.field.File`)。在ExtJS 4.2中,上传组件...
例如,可以创建一个新的 `Ext.XTemplate`,并在 `displayTpl` 属性中使用它: ```javascript var displayTpl = new Ext.XTemplate('<tpl for="."><div class="x-boundlist-item">{name}</div></tpl>'); combo....
`Ext.XTemplate` 是一个强大的模板引擎,用于动态生成HTML内容。它支持简单的语法和表达式,使得渲染数据到HTML变得十分简单。 示例代码: ```javascript var tpl = new Ext.XTemplate( '<ul>', '<tpl for=".">',...
1. **动态引用加载**:通过`Ext.require`实现按需加载JS文件,优化页面加载速度。 2. **类的封装**:使用面向对象的方式组织代码,提高代码复用性和可维护性。 3. **基本数据类型**:增加了对复杂数据类型的处理,如...
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...
第12 章 一个完整的EXT 应用......................... 317 12.1 确定整体布局........................................ 317 12.2 使用HTML和CSS设置静态信息.......... 319 12.3 对学生信息进行数据建模.............
**2.2 Ext.Template 及 Ext.XTemplate 模板应用** ##### 2.2.1 Ext.Template `Ext.Template` 是一种简单但功能强大的模板引擎,允许开发者使用简单的语法来定义 HTML 结构,并通过数据填充这些模板。例如: ```...