Ext.Templates

Ext.Templates

2009-05-06 14:09

Ext.Templates 主要用来生成一套html代码模板。非常实用！下面介绍一些高级应用，之后有个简单的例子

比如
<span class="{cls}">{name} {value}</span>。
加处理函数之后，

<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>。


相关函数
这是一份格式化函数的列表，可用于模板：

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


使用介绍

第一步 HTML模板这里的HTML可以说是用来格式化你的数据。花括号里面的关键字就是你数据中的{id},{url} 和{text}的容器（placeholder） 。或者用纯数字{0},{1},{2}来表示,但是关键字的命名方式会使你的代码更可读。

       var html = '<a id="{id}" href="{url}" class="nav">{text}</a><br />';        var tpl = new Ext.Template(html);        tpl.compile();第二步，将数据加入到模板中这里我们将使用append方法加入两行的数据。正如你所见，元素的“id”、“url”和“text”相对应于上述模板的容器。
tpl.append('blog-roll', { id: 'link1', url: 'http://www.17ext.com/', text: "Jack's Site" }); tpl.append('blog-roll', { id: 'link2', url: 'http://www.17ext.com/', text: "Jack's New Site" });

转自http://hi.baidu.com/lraly/blog/item/906d98876c1fdf3667096ed3.html