Ext JS - Learning Center

Tutorial:Getting Started with Templates (Chinese)

From Learn About the Ext JavaScript Library

Jump to: navigation, search
Summary: 本教程将简述模板的功能,和怎样格式化一些基本数据
Author: Shea Frederick(译者:Frank Cheung)
Published: 2007六月十日
Ext Version: 1.1
Languages: en.png English cn.png Chinese

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

第一步 您的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,里面就大量使用了模板。

  • This page was last modified 05:37, 13 May 2008.
  • This page has been accessed 9,885 times.