发新话题
打印

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

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

Summary:摘要 本教程将简述模板的功能,和怎样格式化一些基本数据
Author: Shea Frederick
Translater: Frank Cheung
Published: April 18, 2007

首先建议读者先下载本例的代码,以配合文本的说明。完成好的例子在这里。

第一步 您的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"
        });

这就是模板的基本知识点,对于你来这说非常简单吧?
我的博客
大家好才是真的好

TOP

发新话题