導言：
最常用的，容納數據的面板是 FormPanel 、 GirdPanel 、 TreePanel 。
它們內置了一些好用的工具方法，像排序、複選、摺疊、搜索、編輯等等。
有些情況下，僅僅這幾類的數據展示面板實在不夠用。比如在一行數據裏面放一張圖片？
又或者在數據量比較大的時候，使用封裝得比較嚴實 Record 對象，會帶來更嚴重的渲染性能問題。
再有就是，有時候我們只是展示一下數據，沒有什麼操作要做，實在沒必要拿上那麼重量級的武器。
那麼在這些情況下，結合 DataView 與 XTemplate 來構建自己特有的數據展示界面就很有必要。而且，總體說，模板會比封裝的 Record 更高效一些。
另外，在閱讀源代碼的過程中，我發現一個事情，設計到 UI 部分的內容大量地使用了 Template 和 XTemplate 。所以，先把模板這部分內容熟悉一下也可以爲繼續閱讀代碼節省不少精力，磨刀不誤砍柴工嘛。
模板中的一些特性對於熟悉 JSTL(2.0) 的人來說是相當親切的，像自動行號、迭代操作、條件判斷。
模板使用示例圖片：
API 文檔翻譯：
模板類支持更高級的功能，例如：
自動填充數組；
按照基本的比較運算符進行條件過濾；
子模板；
支持基本的方法匹配；
特殊的內置模板參數；
執行內嵌的代碼，
等等。
模板也提供一種模式化的機制使它成爲 Ext.DataView 的組件。
模板支持很多特殊的標籤和內置的操作符，這些沒有被作爲 API 的一部分來定義，但是可以作爲模板的一部分來創建。以下的例子演示了所有支持的特性。下面是一個數據對象，每段示例代碼都使用這個對象。
var data = {
name: ' 傑克 . 斯洛克姆 ',
title: ' Ext 首席開發者 ',
company: 'Ext JS, LLC',
email: '[email protected]',
address: '4 Red Bulls Drive',
city: 'Cleveland',
state: 'Ohio',
zip: '44102',
drinks: ['Red Bull', 'Coffee', 'Water'],
kids: [
{
name: 'Sara Grace',
age:3
},{
name: 'Zachary',
age:2
},{
name: 'John James',
age:0
}
]
};
1、 自動填充數組並切換作用域
使用 ”<tpl>” 標籤和 ”for” 操作符，你可以把作用域切換到 ”for” 所指向的對象，然後訪問這個對象的成員來組裝模板。如果 ”for” 循環中的變量是一個數組，它將被自動填充，對於數組中的每個元素，重複 ”<tpl>” 標籤中的模板 ( 定義 ) 塊 ( 來自動填充 ) 。（譯者注：這句的意思是，如果 for 循環裏面指定的對象是個數組，就會自動解析這個數組，然後使用數組中的每個元素來填充模板。）
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Title: {title}</p>',
'<p>Company: {company}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<p>{name}</p>',
'</tpl></p>'
);
tpl.overwrite(panel.body, data);
（譯者注：運行效果圖如下。
）
2、 從內部的子模板作用域訪問父對象
當處理一個子模板時，例如當迭代 ”child” 這個數組的時候，你可以通過 ”parent” 關鍵字來訪問父對象的成員。
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<tpl if="age > 1">',
'<p>{name}</p>',
'<p>Dad: {parent.name}</p>',
'</tpl>',
'</tpl></p>'
);
tpl.overwrite(panel.body, data);
（譯者注：運行效果圖如下。
）
3、 數組元素序號和基本的匹配支持
當處理數組的時候，特殊的變量 ”{#}” 可以提供數組當前的 index+1 （這個數據）。模板也支持基本的數學運算符 ”+” 、 ”-” 、 ”*” 、 ”/” ，這些操作符可以直接在數字型的數據值上使用。
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<tpl if="age > 1">',
'<p>{#}: {name}</p>', // <-- Auto-number each item
'<p>In 5 Years: {age+5}</p>', // <-- Basic math
'<p>Dad: {parent.name}</p>',
'</tpl>',
'</tpl></p>'
);
tpl.overwrite(panel.body, data);
（譯者注：運行效果圖如下。
）
4、 自動渲染普通的（譯者注：數組元素不是對象，是基本的 String 、 Number ）數組
普通的數組，包含的元素（不是對象型的）可以使用特殊的變量 ”{.}” 在一個循環體內自動渲染。這個變量用來描述數組當前索引中的值。
var tpl = new Ext.XTemplate(
'<p>{name}/'s favorite beverages:</p>',
'<tpl for="drinks">',
'<div> - {.}</div>',
'</tpl>'
);
tpl.overwrite(panel.body, data);
（譯者注：運行效果圖如下。
）
5、 基本的條件匹配邏輯
使用 ”<tpl>” 標籤和 ”if” 操作符，你可以提供條件檢查，來決定是否渲染模板中指定的部分。注意：沒有 ”else” 操作符 --- 如果需要，你必須使用兩個條件不同的 ”if” 。這裏需要編碼好的（譯者注：意指 URL 轉義字符 ）符號，就像以下的示例一樣 :
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<tpl if="age > 1">',// ß 注意： ”>” 號是編碼好的。
'<p>{name}</p>',
'</tpl>',
'</tpl></p>'
);
tpl.overwrite(panel.body, data);
（譯者注：運行效果圖如下。 
）
6、 執行任意內嵌代碼的能力
在一個模板裏面，位於 ”{[…]}” 號中的任何東西都被當作是需要在模板作用域內被執行的代碼。在這段代碼裏面，有一些特殊的變量可以使用：
“ values ” ：當前作用域下的值。如果你使用子模板來改變作用域，你就可以改變 ”values” 的值。
“ parent ” ：“祖先”模板的作用域（或值）。
“ xindex ” ：如果你在一個循環的模板裏面，這個值表示你當前所在的“第幾次”循環（從 1 開始）。
“ xcount ” ：如果你在一個循環的模板裏面，這個值表示你正在迭代的數組的總長度。
“ fm ” ： Ext.util.Format 對象的別名。
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Company: {[values.company.toUpperCase() + ", " + values.title]}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">',
'{name}',
'</div>',
'</tpl></p>'
);
tpl.overwrite(panel.body, data);
（譯者注：使用myext 放出來的 Ext2.0 API 的人請注意，這份 API 上的這段示例代碼有錯誤，無法運行。筆者查閱了原始的文檔，發現和他們發出來的不一致。 ）
（譯者注：運行效果圖如下。 
）
7、 模板的成員函數
可以在 config 對象中定義一個或多個成員函數傳遞給 XTemplate 的構造函數，來進行更復雜的處理。
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<tpl if="this.isGirl(name)">',
'<p>Girl: {name} - {age}</p>',
'</tpl>',
'<tpl if="this.isGirl(name) == false">',
'<p>Boy: {name} - {age}</p>',
'</tpl>',
'<tpl if="this.isBaby(age)">',
'<p>{name} is a baby!</p>',
'</tpl>',
'</tpl></p>', {
isGirl: function(name){
return name == 'Sara Grace';
},
isBaby: function(age){
return age < 1;
}
});
tpl.overwrite(panel.body, data);
（譯者注：運行效果圖如下。 
）
總結：
請注意模板的第六和第七個特性，這兩個特性使得我們在實現處理數據時的一些特殊的要求變得輕而易舉。而且這種寫法代碼清晰，可以說是相當優雅。
有了這七個示例給出來的 Demo ，對於模板的使用應該就比較順暢了。下一篇，我們就來分析模板 XTemplate 到底是怎麼實現的，它的運行機制是什麼。