Ext.XTemplate

来源：互联网发布：python 字符集转换编辑：程序博客网时间：2024/05/06 22:56

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>

运行结果如下：