第一步 您的HTML模板
第一個步驟沒有任何特別,這里的HTML可以說是用來格式化你的數(shù)據(jù)。花括號里面的關(guān)鍵字就是你數(shù)據(jù)中的{id},{url} 和{text}的容器(placeholder) 。或者用純數(shù)字{0},{1},{2}來表示,但是關(guān)鍵字的命名方式會使你的代碼更可讀。
現(xiàn)在我們加載html模板,創(chuàng)建一個模板對象(第五行),然后進(jìn)行編譯(第六行)。盡管編譯模板不是必須的,但是一般情況下總能改善性能的。
var html = '<a id="{id}" href="{url}" class="nav">{text}</a><br />';
var tpl =
new Ext.Template(html);
tpl.compile();
第二步,將數(shù)據(jù)加入到模板中
這里我們將使用append方法加入兩行的數(shù)據(jù)。正如你所見,元素的“id”、“url”和“text”相對應(yīng)于上述模板的容器。
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"
});
這就是模板的基本知識點,對于你來這說非常簡單吧?
下一步
如果你想換換口味,文檔區(qū)便是一個絕佳的好地方。看看范例Feed Viewer,里面就大量使用了模板。