1:基本知识
XTemplate是Ext.Template扩展的新类,它支持高级功能的模板类,如自动数组输出、条件判断、子模板、基本数学运行、特殊内建的模板变量,直接执行代码和更多的功能
2:简单例子1
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
xtemplate
程序效果:
上述代码中使用了标签tpl和操作符for,可以自由切换for所指定的对象作用域来访问声明于模板中的对象,特殊变量#表示当前数组索引+1(由1开始,不是0)
Ext.XTemplate类常用的方法如下:
applay(): 返回值为void,applyTemplate的简写形式
compile(): 返回值为Function,把模板编译成一个函数
form(String/HTMLElement el): 返回值为Ext.Template,从某个元素的value或innerHTML中创建模板
applyTemplate(Object/Array values): 返回值为String, 返回HTML片段,这块片段是由数据填充模板之后而成
其特性
1:Auto filling of arrays
The tpl tag and the for operator are used to process the provided data object:
程序代码:
程序效果:
2: 修改tp1的内容 An example illustrating how the for property can be leveraged to access specified members of the provided data object to populate the template:
var tpl = new Ext.XTemplate(
'Name: {name}
',
'Title: {title}
',
'Company: {company}
',
'Kids: ',
'', // interrogate the kids property within the data
'{name}
',
'
'
);
程序效果:
3:修改tp1的内容, Flat arrays that contain values (and not objects) can be auto-rendered using the special {.} variable inside a loop. This variable will represent the value of the array at the current index:
var tpl = new Ext.XTemplate(
'{name}\'s favorite beverages:
',
'',
' - {.}',
' '
);
程序效果:
4: 修改tp1的内容,When processing a sub-template, for example while looping through a child array, you can access the parent object's members via the parent object:
var tpl = new Ext.XTemplate(
'Name: {name}
',
'Kids: ',
'',
'',
'{name}
',
'Dad: {parent.name}
',
' ',
'
'
);
程序效果:
5:修改tp1的内容 The following basic math operators may be applied directly on numeric data values (+ - * /)
var tpl = new Ext.XTemplate(
'Name: {name}
',
'Kids: '
,
'' ,
'' , // <-- Note that the > is encoded
'{#}: {name}
', // <-- Auto-number each item
'In 5 Years: {age+5}
', // <-- Basic math
'Dad: {parent.name}
',
'',
''
);
程序效果图:
6:修改tp1的内容 This example demonstrates basic row striping using an inline code block and the xindex variable:
Execute arbitrary inline code with special built-in template variables
Anything between {[ ... ]}
is considered code to be executed in the scope of the template. There are some special variables available in that code:
var tpl = new Ext.XTemplate(
'Name: {name}
',
'Company: {[values.company.toUpperCase() + ", " + values.title]}
',
'Kids: ',
'',
'',
'{name}',
'',
'
'
);
CSS样式为:
程序效果图:
可以看到偶数行和奇数行显示不同的颜色
7:修改tp1的内容
Template member functions
One or more member functions can be specified in a configuration object passed into the XTemplate constructor for more complex processing:
var tpl = new Ext.XTemplate(
'Name: {name}
',
'Kids: ',
'',
'',
'Girl: {name} - {age}
',
' ',
// use opposite if statement to simulate 'else' processing:
'',
'Boy: {name} - {age}
',
' ',
'',
'{name} is a baby!
',
' ',
'
',
{
// XTemplate configuration:
compiled: true,
// member functions:
isGirl: function(name){
return name == 'Sara Grace';
},
isBaby: function(age){
return age < 1;
}
}
);
程序效果为: