Ext.template的使用

JS的Ext库中用到现在唯一感到用的很爽的就是template，实在是ajax数据前台显示的利器,jQuery没有类似该对象实在是遗憾，虽然有第三方实现，但表现不如人意，还要引入大小不菲的js文件。
首先要提下Xtemplate，它其实比template更高级，更强大，可以实现部分逻辑，包括循环、判断等。但是用到它则必须引入ext-all.js，500kb的庞然大物，我一般只会用ext-core.js，为了一个对象引入500kb的文件，以现在中土网络条件来看是非常不可取的。包括用ext来显示ui组件，也并不可取。其实大部分的功能在用template就能解决，无需Xtemplate出马。
template模板的基本格式

{name[:][format][(params)]}

其中name为传入对象的属性名称，format为调用的格式函数及参数（可选）。
格式函数有：

ellipsis(length) – 对大于指定长度部分的字符串，进行裁剪，增加省略号（“…”）的显示。适用于只显示前N位的字符，然后提供详细页面的场合。
undef -检查一个值是否为underfined，如果是的转换为空值
htmlEncode – 转换(&, <, >, and ‘) 字符
trim – 对一段文本的前后多余的空格裁剪
substr(start, length) – 返回一个从指定位置开始的指定长度的子字符串。
lowercase – 返回一个字符串，该字符串中的字母被转换为小写字母。
uppercase – 返回一个字符串，该字符串中的字母被转换为大写字母。
capitalize – 返回一个字符串，该字符串中的第一个字母转化为大写字母，剩余的为小写。
usMoney – 格式化数字到美元货币。如：$10.97
date[(format)] – 将一个日期解析成为一个特定格式模式的日期。如日期字符串不输入，默认为“月/日/年”
stripTags – 剥去变量的所有HTML标签

格式函数也可以根据实际应用调用自己实现的函数，调用方式{name:this.your_function_name[params]}
比如：

var testCustomTpl = new Ext.Template(‘

User: {username} IsRevoked:{revoked:this.yesNoFormat}

’);
testCustomTpl.yesNoFormat = function(value) {
 return value ? ‘Yes’ : ‘No’;
};

接下去就是一段实际项目使用的代码测试段：

function addTemp(){
var tpl = new Ext.Template(
‘

’,
‘’,
‘’,
‘’,
‘’,
‘’,
‘

{content}

{hot}

’
);
tpl.compile();
var data = [{"id":"1","content":"test","hot":"10"},{"id":"2","content":"hello world","hot":"100"}]

for(var i in data){
  if(typeof(data[i])== “object”){
     data[i]["idx"] = parseInt(i)+parseInt(1);
     tpl.append(’sms_list’,data[i])
   }
}
}

这段代码模拟了ajax方式从后台取得数据后通过组织显示在页面。实际项目data为后台取得数据。
没有Xtemplate中的循环标记，我们通过for方法来代替数据组织。
没有Xtemplate中的{#}标记当前序列数，我们可以通过for循环中计数临时存放入json对象中idx属性。
由于Ext的封装，for循环中会有function对象的进入，所以要对对象进行判断，data[i])== “object”。
其他的业务逻辑可以在for循环中实现，一样能够达到使用Xtemplate的效果

转载于:https://www.cnblogs.com/hannover/archive/2011/02/12/1951865.html