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" }); |