Templete 是模板之意,就是定义一段 HTML 代码,并放置若干个{}作为占位符,运行
时将数据填充到{}中去。看来看去,和java中的MessageFormat很像。
XTemplate和DomHelper有很深的渊源,DomHelper是XTemplate的小弟,DomHelper
解决不了的事情,XTemplate一定可以。
使用XTemplate一般会经历三个步骤:
1、定义XTemplate对象,指定一段HTML代码作为模板;
2、指定XTemplate中定义的HTML应该放置的位置,并填充占位符信息;
3、编译Xtemplate
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJs整理</title>
<link rel="stylesheet" type="text/css" href="ExtJs/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJs/adapter/ext-base.js"></script>
<script type="text/javascript" src="ExtJs/ext-all.js"></script>
<script type="text/javascript" src="ExtJs/src/locale/ext-lang-zh_CN.js"></script>
</head>
<script type="text/javascript">
Ext.onReady(function(){
var xt = new Ext.XTemplate(
"<table border={0} width={1}>",
"<tr>",
"<td>{2}</td>",
"<td>{3}</td>",
"<td>{4}</td>",
"</tr>",
"</table>"
);
xt.append("xt", [1, 300, '单元格1', '单元格2', '单元格3']);
xt.compile();
});
</script>
<script type="text/javascript">
//下面是改造后的例子,填充数据时用json对象代替了原来的数组:
Ext.onReady(function(){
var xt = new Ext.XTemplate(
"<table border={b} width={w}>",
"<tr>",
"<td>{v1}</td>",
"<td>{v2}</td>",
"<td>{v3}</td>",
"</tr>",
"</table>"
);
xt.append("xt", {b: 1, w: 300, v1: "单元格1-1", v2: "单元格1-2", v3: "单元格1-3"});
xt.compile();
});
</script>
<body>
<div id="xt"></div>
<div id="xt"></div>
</body>
</html>
运行结果如下: