Extjs学习 XTemplate
来源:互联网 发布:阿里云杭州和北京对比 编辑:程序博客网 时间:2024/06/10 05:17
ExtJs的模板同样也可以组织生成灵活的html,而且代码和html有效的分离。本文将细细分析ExtJs模板的用法。
行文之前我先把公共的html和用到的js数据贴在前面,后面的代码都要引用到。
[html]01
<
h1
>使用标签tpl和操作符for</
h1
>
02
<
div
class
=
"content"
id
=
"div1"
></
div
>
03
<
h1
>在子模板的范围内访问父元素对象</
h1
>
04
<
div
class
=
"content"
id
=
"div2"
></
div
>
05
<
h1
>数组元素索引和简单运算支持</
h1
>
06
<
div
class
=
"content"
id
=
"div3"
></
div
>
07
<
h1
>自动渲染单根数组</
h1
>
08
<
div
class
=
"content"
id
=
"div4"
></
div
>
09
<
h1
>条件逻辑判断</
h1
>
10
<
div
class
=
"content"
id
=
"div5"
></
div
>
11
<
h1
>即时执行任意的代码</
h1
>
12
<
div
class
=
"content"
id
=
"div6"
></
div
>
13
<
h1
>模板成员函数</
h1
>
14
<
div
class
=
"content"
id
=
"div7"
></
div
>
定义data数据源:
[Js]01
var
data = {
02
name:
'张三'
,
03
job:
'C#程序员'
,
04
company:
'惠普'
,
05
email:
'zhangsan@163.com'
,
06
address:
'武汉市洪山区光谷软件园'
,
07
city:
'武汉'
,
08
state:
'正常'
,
09
zip:
'430000'
,
10
drinks: [
'绿茶'
,
'红酒'
,
'咖啡'
],
11
friends: [{
12
name:
'李四'
,
13
age: 6,
14
like:
'鲜花'
15
}, {
16
name:
'王五'
,
17
age: 26,
18
like:
'足球'
19
}, {
20
name:
'赵六'
,
21
age: 81,
22
like:
'游戏'
23
}]
24
};
一、使用标签tpl和操作符for
现在我要把data数据源展示到页面上,并组织到table里面。但是这个html不是写死的,而是通过模板生成。配合使用标签tpl和操作符for,可以循环输出张三的朋友:
[Js]01
//使用标签tpl和操作符for
02
var
tpl =
new
Ext.XTemplate(
03
'<table cellpadding=0 cellspacing=0 border=1 width=400px>'
,
04
'<tr><td colspan=2 align=center><b>{name}的个人资料</b></td></tr>'
,
05
'<tr><td>姓名:</td><td>{name}</td></tr>'
,
06
'<tr><td>工作:</td><td>{job}</td></tr>'
,
07
'<tr><td>公司:</td><td>{company}</td></tr>'
,
08
'<tr><td>地址:</td><td>{address}</td></tr>'
,
09
'<tr><td>喜好饮品:</td><td>{drinks}</td></tr>'
,
10
'<tr><td>他的好友:</td><td>'
,
11
'<tpl for="friends">'
,
12
'<p>{name}:{age}岁</p>'
,
13
'</tpl></td></tr>'
,
14
'</table>'
15
);
16
tpl.overwrite(Ext.get(
"div1"
), data);
查看输出效果:
二、在子模板的范围内访问父元素对象
当我们在遍历输出张三的朋友时,需要再次访问张三的信息,怎么做呢,看如下js:
[Js]1
//在子模板的范围内访问父元素对象
2
var
tp2 =
new
Ext.XTemplate(
3
'<tpl for="friends">'
,
4
'<p>{name}是{parent.name}的好友。</p>'
,
5
'</tpl>'
6
);
7
tp2.overwrite(Ext.get(
"div2"
), data);
查看输出效果:
三、数组元素索引和简单运算支持
在循环访问数组时,可以通过{#}获取索引信息,基础数据还可以支持简单运算:
[Js]1
//数组元素索引和简单运算支持
2
var
tp3 =
new
Ext.XTemplate(
3
'<tpl for="friends">'
,
4
'<p>{#}、一年后,{name}的年龄是:{age+1}</p>'
,
5
'</tpl>'
6
);
7
tp3.overwrite(Ext.get(
"div3"
), data);
查看输出效果:
四、自动渲染单根数组
通过{.}可以自动渲染没有键值对的单根数组,示例如下:
[Js]1
//自动渲染单根数组
2
var
tp4 =
new
Ext.XTemplate(
3
'喜好饮品:<tpl for="drinks">'
,
4
' {.}'
,
5
'</tpl>'
6
);
7
tp4.overwrite(Ext.get(
"div4"
), data);
查看输出效果:
五、条件逻辑判断
配合标签tpl和操作符if的使用,可以做一些简单的逻辑判断,注意没有else操作符,你可以写两个if来代替。另外大于,小于符号要经过html编码,不能直接写出。
[Js]01
//条件逻辑判断
02
var
tp5 =
new
Ext.XTemplate(
03
'<table cellpadding=0 cellspacing=0 border=1 width=400px>'
,
04
'<tr><td>他的好友:</td><td>'
,
05
'<tpl for="friends">'
,
06
'<tpl if="age < 18"><p>{name}:[未成年]</p></tpl>'
,
07
'<tpl if="age >= 18"><p>{name}:{age}岁</p></tpl>'
,
08
'</tpl></td></tr>'
,
09
'</table>'
10
);
11
tp5.overwrite(
"div5"
, data);
查看输出效果:
六、即时执行任意的代码
在XTemplate中,{[ ... ]}范围内的内容会在模板作用域的范围下执行。这里有一些特殊的变量:
values:当前作用域下的值。若想改变其中的值,你可以切换子模板的作用域。
parent:父级模板的对象
xindex:若是循环模板,这是当前循环的索引index(从1开始)。
xcount:若是循环模板,这是循环的次数 。
01
//即时执行任意的代码
02
var
tp6 =
new
Ext.XTemplate(
03
'当前日期:{[new Date().toLocaleDateString()]}'
,
04
'<table cellpadding=0 cellspacing=0 border=1 width=400px>'
,
05
'<tpl for="friends"><tr>'
,
06
'<tpl if="xindex == 1"><td rowspan={[xcount]}>他的好友:</td></tpl>'
,
07
'<td>{["姓名:" + values.name + ",年龄:" + values.age + ","+ (values.like=="鲜花"?"是个女孩":"是个男孩")]}</td>'
,
08
'</tr></tpl>'
,
09
'</table>'
10
);
11
tp6.overwrite(
"div6"
, data);
查看输出效果:
七、模板成员函数
在模板中还可以调用自定义函数,这些函数通过配置传入。相关写法如下:
[Js]01
//模板成员函数
02
var
tp7 =
new
Ext.XTemplate(
03
'<b>他的好友:</b><tpl for="friends"><p>'
,
04
'<tpl if="this.isWoman(like)">{name}:是个女性。</tpl>'
,
05
'<tpl if="this.isMen(like)">{name}:是个男性。</tpl>'
,
06
'<tpl if="this.isChild(age)">{name}:是个小孩。</tpl>'
,
07
'</p></tpl>'
, {
08
isWoman:
function
(like) {
09
return
like ==
'鲜花'
;
10
},
11
isMen:
function
(like) {
12
return
like !=
"鲜花"
;
13
},
14
isChild:
function
(age) {
15
return
age < 18;
16
}
17
}
18
);
19
tp7.overwrite(Ext.get(
"div7"
), data);
查看输出效果:
- Extjs学习 XTemplate
- ExtJs学习笔记(XTemplate的使用)
- ExtJs中Ext.XTemplate使用方法学习
- ExtJs学习笔记(21)-使用XTemplate结合WCF显示数据
- ExtJs学习笔记(23)-ScriptTagProxy+XTemplate+WCF跨域取数据
- ExtJs中XTemplate实例
- extjs Ext.XTemplate
- Extjs之XTemplate简单应用
- ExtJs学习笔记(22)-XTemplate + WCF 打造无刷新数据分页
- Ext.XTemplate模板学习
- extjs - grid - 自定义单元呈现方式(xtemplate)
- ExtJs2.0学习系列(11)--Ext.XTemplate
- ExtJs2.0学习系列(11)--Ext.XTemplate
- ExtJs2.0学习系列(11)--Ext.XTemplate
- Ext Js中Ext.XTemplate使用方法学习
- ExtJs2.0学习系列(11)--Ext.XTemplate
- extjs学习
- Extjs学习
- oracle 1=1 1=2 区别
- 一步步优化JVM三:GC优化基础
- android adb shell
- I2S协议
- SYN-Flood遭遇战——Linux内核SYN-Cookie实现探究
- Extjs学习 XTemplate
- ExtJs大比拼JQuery:Dom文档操作
- 包含winsock2.h后出现type redefinition错误
- Team Queue STL
- Ubuntu linux安装ssh server
- string : undeclared identifier 出错原因
- 如何将4个字节的int转为1个字节的BYTE?
- TMS320C55x的指令系统
- 一步步优化JVM四:决定Java堆的大小以及内存占用