ext中的EXT.XTemplate()
本篇将涉及到ExtJs中一个重要的概念,模板。话说Razor很神奇,但是我个人不是很喜欢那种html混编C#的方式,仿佛又回到了asp的时代。ExtJs的模板同样也可以组织生成灵活的html,而且代码和html有效的分离。本文将细细分析ExtJs模板的用法。
行文之前我先把公共的html和用到的js数据贴在前面,后面的代码都要引用到。
[html]
<h1>使用标签tpl和操作符for</h1><div class="content" id="div1"></div><h1>在子模板的范围内访问父元素对象</h1><div class="content" id="div2"></div><h1>数组元素索引和简单运算支持</h1><div class="content" id="div3"></div><h1>自动渲染单根数组</h1><div class="content" id="div4"></div><h1>条件逻辑判断</h1><div class="content" id="div5"></div><h1>即时执行任意的代码</h1><div class="content" id="div6"></div><h1>模板成员函数</h1><div class="content" id="div7"></div>
定义data数据源:
[Js]
var data = {name: '张三',job: 'C#程序员',company: '惠普',email: 'zhangsan@163.com',address: '武汉市洪山区光谷软件园',city: '武汉',state: '正常',zip: '430000',drinks: ['绿茶', '红酒', '咖啡'],friends: [{name: '李四',age: 6,like: '鲜花'}, {name: '王五',age: 26,like: '足球'}, {name: '赵六',age: 81,like: '游戏'}]};
一、使用标签tpl和操作符for
现在我要把data数据源展示到页面上,并组织到table里面。但是这个html不是写死的,而是通过模板生成。配合使用标签tpl和操作符for,可以循环输出张三的朋友:
[Js]
//使用标签tpl和操作符forvar tpl = new Ext.XTemplate('<table cellpadding=0 cellspacing=0 border=1 width=400px>','<tr><td colspan=2 align=center><b>{name}的个人资料</b></td></tr>','<tr><td>姓名:</td><td>{name}</td></tr>','<tr><td>工作:</td><td>{job}</td></tr>','<tr><td>公司:</td><td>{company}</td></tr>','<tr><td>地址:</td><td>{address}</td></tr>','<tr><td>喜好饮品:</td><td>{drinks}</td></tr>','<tr><td>他的好友:</td><td>','<tpl for="friends">','<p>{name}:{age}岁</p>','</tpl></td></tr>','</table>');tpl.overwrite(Ext.get("div1"), data);
查看输出效果:
二、在子模板的范围内访问父元素对象
当我们在遍历输出张三的朋友时,需要再次访问张三的信息,怎么做呢,看如下js:
[Js]
//在子模板的范围内访问父元素对象var tp2 = new Ext.XTemplate('<tpl for="friends">','<p>{name}是{parent.name}的好友。</p>','</tpl>');tp2.overwrite(Ext.get("div2"), data);
查看输出效果:
三、数组元素索引和简单运算支持
在循环访问数组时,可以通过{#}获取索引信息,基础数据还可以支持简单运算:
[Js]
//数组元素索引和简单运算支持var tp3 = new Ext.XTemplate('<tpl for="friends">','<p>{#}、一年后,{name}的年龄是:{age+1}</p>','</tpl>');tp3.overwrite(Ext.get("div3"), data);
查看输出效果:
四、自动渲染单根数组
通过{.}可以自动渲染没有键值对的单根数组,示例如下:
[Js]
//自动渲染单根数组var tp4 = new Ext.XTemplate('喜好饮品:<tpl for="drinks">',' {.}','</tpl>');tp4.overwrite(Ext.get("div4"), data);
查看输出效果:
五、条件逻辑判断
配合标签tpl和操作符if的使用,可以做一些简单的逻辑判断,注意没有else操作符,你可以写两个if来代替。另外大于,小于符号要经过html编码,不能直接写出。
[Js]
//条件逻辑判断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);
查看输出效果:
六、即时执行任意的代码
在XTemplate中,{[ ... ]}范围内的内容会在模板作用域的范围下执行。这里有一些特殊的变量:
values:当前作用域下的值。若想改变其中的值,你可以切换子模板的作用域。
parent:父级模板的对象
xindex:若是循环模板,这是当前循环的索引index(从1开始)。
xcount:若是循环模板,这是循环的次数 。
[Js]
//即时执行任意的代码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);
查看输出效果:
七、模板成员函数
在模板中还可以调用自定义函数,这些函数通过配置传入。相关写法如下:
[Js]
//模板成员函数var tp7 = new Ext.XTemplate('<b>他的好友:</b><tpl for="friends"><p>','<tpl if="this.isWoman(like)">{name}:是个女性。</tpl>','<tpl if="this.isMen(like)">{name}:是个男性。</tpl>','<tpl if="this.isChild(age)">{name}:是个小孩。</tpl>','</p></tpl>', {isWoman: function (like) {return like == '鲜花';},isMen: function (like) {return like != "鲜花";},isChild: function (age) {return age < 18;}});tp7.overwrite(Ext.get("div7"), data);
查看输出效果:
ext中的EXT.XTemplate()相关推荐
- 《Ext JS权威指南》节选:在Visual Studio中实现Ext JS智能提示
Visual Studio(下面简称VS) 2008和2010都有从JS库文件获取智能提示的功能,不过直接使用ExtJS的库文件的话,虽然也有提示,但是不全,应该说是大部分没有,主要原因是VS脚本提示 ...
- 46. Ext中namespace的作用(转)
转自:https://www.cnblogs.com/givemeanorange/p/5569954.html Ext中在每一个页面中添加一个namespace呢,就像下面的代码: // creat ...
- Ext.Net学习笔记01:在ASP.NET WebForm中使用Ext.Net
Ext.Net是一个对ExtJS进行封装了的.net控件库,可以在ASP.NET WebForm和MVC中使用.从今天开始记录我的学习笔记,这是第一篇,今天学习了如何在WebForm中使用Ext.Ne ...
- 在EXT中向弹窗传值或者对象
在EXT中向弹窗传值(数组结构) 利用record属性来传输retList这个值 new slms.ShowPassword({title:'一次性密码',className: config.clas ...
- ext中引用ux_Ext.ux.form.SearchField使用方法
这学期一直在做一个管理系统,前台用到了ExtJs,现在开始总结这一学期的学习心得,首先我们从Ext.ux.form.SearchField开始讲,因为这个东西一直困扰我好长时间,直到项目结束前几天我才 ...
- ExtJs 中的 Ext.QuickTips.init()
Ext.js中的 Ext.QuickTips.init(); 函数是用来让html标签中 含有data-qtip属性的标签,在鼠标放上去的时候有提示信息,这个功能和html标签的title功能类似. ...
- 【Ext.Net学习笔记】01:在ASP.NET WebForm中使用Ext.Net
Ext.NET是基于跨浏览器的ExtJS库和.NET Framework的一套支持ASP.NET AJAX的开源Web控件,包含有丰富的Ajax运用,其前身是Coolite. 下载地址:http:// ...
- Eclipse中安装Ext插件(Spket IDE)
在网上找了很多资料,这里重新整理一下. Spket IDE是目前支持Ext 2.0最为出色的IDE. 它采用.jsb project file 文件并将继承于基类和所有文档的内容嵌入到生成代码提示的 ...
- ext中ArrayStore,JsonStore,XmlStore的用
ext中ArrayStore,JsonStore,XmlStore的用法 1.Store的用法 var _store = new Ext.data.Store(); var _reco ...
最新文章
- 结婚和年龄有直接关系吗?
- 写文件+三剑客+别名
- 使用CLI设置WildFly绑定地址并关闭
- Hibernate自动事务揪出的编码不规范
- .Net应用程序打包部署总结
- leetcode题库174 地下城游戏
- 精品|从零开始-基于FPGA 的软核处理器设计实现
- 嵌入式Linux使用TFT屏幕:使用TinyDRM点亮ST7789V屏幕
- java加密算法之MD5篇
- 定投的收益率怎么计算
- 甘草泻心汤治疗复发性口腔溃疡的经验
- 定时监控服务端口是否正常 发送邮件
- 《Total Commander:万能文件管理器》——第7.3节.总结与作业
- 发现了一个可以让网盘加速的小工具(文末还有一个用了很久的小方法)
- Mac - 通过 Script 实现更换桌面壁纸
- forward(转发)和redirect(重定向)有什么区别
- 网站分析11——成本控制类指标
- 根据图片名字在drawable中得到图片
- jenkins+pipeline+Amazon_EKS部署java服务
- 扫雷游戏的实现C++
热门文章
- mysql导出结构及数据结构,Mysql导出数据结构 or 数据
- 【英语学习】【Level 07】U03 Amazing wonders L2 A global city
- 【英语学习】【WOTD】wiseacre 释义/词源/示例
- 数据结构与算法之栈与队列:java实现
- python朴素贝叶斯分布对数据的要求_统计学习方法与Python实现(三)——朴素贝叶斯法...
- python的字符串包括哪些_python公开课|Python字符串包含什么,我们应该怎么用
- python socket多线程并发_【Python之旅】第五篇(三):Python Socket多线程并发
- android Intent 全面点的介绍
- 外推主要发布平台(JM)
- 从头写一个Cucumber测试(二) Cucumber Test