原创力文档- 1、本文档共6页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 5、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 6、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
ExtJs4 笔记（4） Ext.XTemplate 模板
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14 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 ?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 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: 游戏
????}]
}; ?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 //使用标签tpl和操作符for
var tpl = new Ext.XTemplate(
??????table cellpadding=0 cellspacing=0 border=1 width=400px,
??????trtd colspan=2 align=centerb{name}的个人资料/b/td/tr,
??????trtd姓名：/tdtd{name}/td/tr,
??????trtd工作：/tdtd{job}/td/tr,
??????trtd公司：/tdtd{company}/td/tr,
??????trtd地址：/tdtd{address}/td/tr,
??????trtd喜好饮品：/tdtd{drinks}/td/tr,
??????trtd他的好友：/tdtd,
??????tpl for=friends,
??????p{name}：{age}岁/p,
??????/tpl/td/tr,
??????/table
);
tpl.overwrite(Ext.get(div1), data);
二、在子模板的范围内访问父元素对象
当我们在遍历输出张三的朋友时，需要再次访问张三的信息，怎么做呢，看如下js：
[Js]
?
1
2
3
4
5
6
7 //在子模板的范围内访问父元素对象
var tp2 = new Ext.XTemplate(
?tpl for=friends,
?p{name}是{}的好友。/p,
??/tpl
);
tp2.overwrite(Ext.get(div2), data);
三、数组元素索引和简单运算支持
在循环访问数组时，可以通过{#}获取索引信息,基础数据还可以支持简单运算:
[Js]
?
1
2
3
4
5
6
7 //数组元素索引和简单运算支持
var tp3 = new Ext.XTemplate(
?tpl for=friends,
?????p{#}、一年后,{name}的年龄是：{age+1}/p,
??/tpl
);
tp3.overwrite(Ext.get(div3), data);
四、自动渲染单根数组
通过{.}可以自动渲染没有键值对的单根数组，示例如下:
[Js]
?
1
2
3
4
5
6
7 //自动渲染单根数组
var tp4 = new Ext.XTemplate(
?喜好饮品：tpl for=drinks,
? {.},
??/tpl
);
tp4.overwrite(Ext.get(div4), data);
五、条件逻辑判断
文档评论（0）