1.Ext.Template()
模版中的数据索引是从0开始的,创建新模版之后必须调用compile()函数进行编译
效果图代码
<%@ page language="java" pageEncoding="UTF-8"%>
<% String rootpath = request.getContextPath();%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="<%=rootpath%>/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=rootpath%>/ext/ext-all.js"></script>
<script type="text/javascript" src="<%=rootpath%>/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="<%=rootpath%>/ext/ext-lang-zh_CN.js"></script>
<style type="text/css">
.red {
background: red;
}
</style>
<script type="text/javascript" defer>
Ext.onReady(function (){
var data = [
['1','male','李文超','李文超描述'],
['2','female','蛋蛋','蛋蛋描述'],
['3','male','道士','道士描述'],
['4','female','懒蛋','懒蛋描述'],
['5','male','吖男','吖男描述']
];
//我们还可以使用Ext.util.Format中预定义的格式化函数对原始数据进行格式化,比如trim
var t = new Ext.Template(
'<tr>',
'<td>{0}</td>',
'<td>{1:this.renderSex}</td>',
'<td>{2:trim}</td>',//去掉字符串的首位空白
'<td>{3:ellipsis(4)}</td>',//字符串超过指定长度会自动截取
'</tr>'
);
//一定要放在t.compile()上面
t.renderSex = function(value) {
if (value == 'male') {
return "<span style='color:red;'>红男</span>";
} else {
return "<span style='color:green;'>绿女</span>";
}
};
//创建新模版后调用它来编译,现在可以通过这个生成我们需要的HTML的内容了
t.compile();
for(var i = 0;i<data.length;i++){
/*
第一个参数对应HTML中的一个表格,我们使用Ext提供的模版将JSON数据的每一行都转换为HTML,
并添加到指定的table标签中,最终的显示结果包含5行数据的表格
*/
t.append(Ext.get('some-element'),data[i]);
}
});
</script>
</head>
<body>
<table border="1" id="some-element">
<tr>
<td>id</td>
<td>sex</td>
<td>name</td>
<td>descn</td>
</tr>
</table>
</body>
</html>
2.复杂模版Ext.XTemplate
XTemplate是对Template的增强,XTemplate不仅支持在模版内部使用子模板,
还具有for和if功能,可以让我们的模版实现循环和判断
XTemplate的内部
变量名 说明
values 当前范围内部的变量,每次使用使用时tpl都会进入一个子模板,只能使用子模板对应变量
parent 如果进入子模板,就需要通过parent引用上一级模版里的变量
xindex 循环索引值,从1开始
xcount 循环的总长度
fm Ext.util.Format,想执行格式化操作,就直接引用它
2.1XTemplate输出后台传来的JSON对象
效果图
JSON对象
{student:[{id:'1',code:'1001',name:'',sex:'1',age:'23'}]}
代码
detailStore = new Ext.data.Store({
url: 'list.jsp?flag=beforeUpdate',
method : 'post',
reader : new Ext.data.JsonReader({
root: 'student',
fields: [
{name : 'id'},
{name : 'code'},
{name : 'name'},
{name : 'sex'},
{name : 'age'}
]
})
});
var xtpl = new Ext.XTemplate(
'<tpl for=".">',
'<table width="284" align="center" cellpadding="0" cellspacing="0" style="font-size:12px;" bgcolor="#C7D4E4">',
'<tr height="30" align="center">',
'<td style="border:1px solid #000000;">编号</td>',
'<td style="border:1px solid #000000;"> {id}</td>',
'</tr>',
'<tr height="30" align="center">',
'<td style="border:1px solid #000000;">学号</td>',
'<td style="border:1px solid #000000;"> {code}</td>',
'</tr>',
'<tr height="30" align="center">',
'<td style="border:1px solid #000000;">名字</td>',
'<td style="border:1px solid #000000;"> {name}</td>',
'</tr>',
'<tr height="30" align="center">',
'<td style="border:1px solid #000000;">性别</td>',
'<td style="border:1px solid #000000;"> {sex}</td>',
'</tr>',
'<tr height="30" align="center">',
'<td style="border:1px solid #000000;">年龄</td>',
'<td style="border:1px solid #000000;"> {age}</td>',
'</tr>',
'</table>',
'</tpl>'
);
//详细信息面板
var detailPanel = new Ext.Panel({
/*
能够为自己设计模板和特定格式而提供的一种数据显示机制.
DataView采用Ext.XTemplate为其模板处理的机制,
并依靠Ext.data.Store来绑定数据,
这样的话store中数据发生变化时便会自动更新前台.
*/
items : new Ext.DataView({
store : detailStore,
//构成这个DataView的HTML片断,或片断的数组
tpl : xtpl,
//True表示为允许同时可以选取多个对象项,false表示只能同时选择单个对象项或根本没有选区
multiSelect: true,
/*
此项是必须的设置
任何符号Ext.DomQuery格式的CSS选择符(如div.some-class or span:first-child)
以确定DataView所使用的节点是哪一种元素
*/
itemSelector:'div.thumb-wrap',
//没有数据显示时,向用户提示的信息
emptyText: ''
})
});
//详细信息窗体
detailWindow = new Ext.Window({
id : 'detailMessageWindow',
title : '学生信息详细',
width:300,
height:184,
closeAction:'hide',
layout : 'fit',
items : [detailPanel]
});
//详细信息
var detailRenderer = function(recordId){
return '<input type="button" value="...." οnclick="detailMessage('+recordId+')"/>';
};
//打开详细信息窗口
function detailMessage(recordId){
detailStore.load({
params:{id : recordId}
});
detailWindow.show();
};
2.1XTemplate输出一个下拉框 效果图
代码一:
<script type="text/javascript" defer>
Ext.onReady(function (){
var data = {
//data中包含两部分内容:主体部分name和size,以及options数组
name : 's',
size : 5,
options : [{
text : '陕西省',
value : '陕西'
},{
text : '西安市',
value : '西安'
},{
text : '碑林区',
value : '长安立交'
}]
};
var xtpl = new Ext.XTemplate(
'<select name = "{name}" size = "{5}">',
/*
使用tpl标签定义一个子模板,for="options"表示我们要对原始数据中的options属性进行循环操作,
这样子模板会自动调用options的数据,循环输出为<option>标签
*/
'<tpl for="options">',
'<option value="{value}">{text}</option>',
'</tpl>',
'</select>'
);
xtpl.append(Ext.getBody(),data);
});
</script>
代码二:
<script type="text/javascript" defer>
Ext.onReady(function (){
var data = {
name : 's',
size : 5,
options : ['陕西省','西安市','长安立交']
};
var xtpl = new Ext.XTemplate(
'<select name = "{name}" size = "{5}">',
'<tpl for="options">',
//如果data.options中包含3个简单数组,子模板tpl可以使用{.}表示数组的每一项
'<option value="{.}">{.}</option>',
'</tpl>',
'</select>'
);
xtpl.append(Ext.getBody(),data);
});
</script>
2.2默认选奇数行
<script type="text/javascript" defer>
Ext.onReady(function (){
var data = {
name : 's',
size : 5,
options : ['陕西省','西安市','长安立交']
};
var xtpl = new Ext.XTemplate(
'<select name = "{name}" size = "{5}">',
'<tpl for="options">',
/*
XTemplate()没有提供else功能,我们只好用if来判断
这里使用xindex是for内置的一个变量,它表示循环项的索引值
xindex是从1开始的
*/
'<tpl if="xindex%2==0">',
'<option value="{.}">{.}</option>',
'</tpl>',
'<tpl if="xindex%2==1">',
'<option value="{.}" selected>{.}</option>',
'</tpl>',
'</tpl>',
'</select>'
);
xtpl.append(Ext.getBody(),data);
});
</script>
2.3简化判断
<script type="text/javascript" defer>
Ext.onReady(function (){
var data = {
name : 's',
size : 5,
options : ['陕西省','西安市','长安立交']
};
var xtpl = new Ext.XTemplate(
'<select name = "{name}" size = "{5}">',
'<tpl for="options">',
//因为这个xidex不是外部提供的数据,所以要在{}上加上[],在XTemplate中调用内部变量都要这样用
'<option value="{.}" {[xindex%2==1?"selected":""]}>{.}</option>',
'</tpl>',
'</select>'
);
xtpl.append(Ext.getBody(),data);
});
</script>