菠萝三国

大江东去,浪淘尽...
随笔 - 34, 文章 - 47, 评论 - 22, 引用 - 0
数据加载中……

学习EXT第十日--模板(Templates)起步

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

现在我们加载html模板,创建一个模板对象(第五行),然后进行编译(第六行)。尽管编译模板不是必须的,但是一般情况下总能改善性能的。


 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.jackslocum.com/',
     text: "Jack's Site"
 });
 tpl.append('blog-roll', {
     id: 'link2',
     url: 'http://www.extjs.com/',
     text: "Jack's New Site"
 });

这就是模板的基本知识点,对于你来这说非常简单吧?

下一步
如果你想换换口味,文档区便是一个绝佳的好地方。看看范例Feed Viewer,里面就大量使用了模板。

 

posted on 2007-08-07 14:01 菠萝 阅读(342) 评论(0)  编辑  收藏 所属分类: EXT


只有注册用户登录后才能发表评论。


网站导航: