/** * @class Ext.XTemplate *
支持高級功能的模板類， * 如自動數組輸出、條件判斷、子模板、基本數學運行、特殊內建的模板變量， * 直接執行代碼和更多的功能。XTemplate亦提供相應的機制整合到 {@link Ext.DataView}. *
*
XTemplate有些特殊的標籤和內建的操作運算符，是模板創建時生成的，不屬於API條目的一部分。 * 下面的例子就演示了這些特殊部分的用法。每一個例子使用的數據對象如下：
*
var data = {
name: 'Jack Slocum',
title: 'Lead Developer',
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
}]
};
*
自動數組輸出和作用域切換。 * 配合使用標籤tpl和操作符for， * 你可自由切換for所指定的對象作用域，即可訪問聲明於模板之中對象。 * 如果這個對象是一個數組，它就會自動循環輸出，不斷重複tpl標籤內的模板代碼塊，輸出數組內的每一條內容： * *
*
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);
*
在子模板的範圍內訪問父元素對象。 * 當正在處理子模板時，例如在循環子數組的時候， * 可以通過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);
*
數組元素索引和簡單匹配支持。 當正在處理數組的時候，特殊變量#表示當前數組索引+1（由1開始，不是0）。 * 如遇到數字型的元素，模板也支持簡單的數學運算符+ - * /。 *
*
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<tpl if="age > 1">',
'<p>{#}: {name}</p>', // <-- 每一項都加上序號
'<p>In 5 Years: {age+5}</p>', // <-- 簡單的運算
'<p>Dad: {parent.name}</p>',
'</tpl>',
'</tpl></p>'
);
tpl.overwrite(panel.body, data);
*
自動渲染單根數組（flat arrays）。 * 單根數組（Flat arrays），指的是不包含分支對象只包含值的數組。 * 使用特殊變量{.}可循環輸出這類型的數組： *
*
var tpl = new Ext.XTemplate(
'<p>{name}/'s favorite beverages:</p>',
'<tpl for="drinks">',
'<div> - {.}</div>',
'</tpl>'
);
tpl.overwrite(panel.body, data);
*
基本的條件邏輯判斷 * 配合標籤tpl和操作符if的使用，可爲你執行條件判斷，以決定模板的哪一部分需要被渲染出來。 * 注意這沒有else的操作符－－如需要，就要寫兩個邏輯相反的if的語句。 * 屬性項要記得進行編碼，好像下面的例子：
*
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);
*
即時執行任意的代碼
* 在XTemplate中，{[ ... ]}範圍內的內容會在模板作用域的範圍下執行。這裏有一些特殊的變量： *
*
values：當前作用域下的值。若想改變其中的值，你可以切換子模板的作用域。 *
parent：父級模板的對象 *
xindex：若是循環模板，這是當前循環的索引index（從1開始）。 *
xcount：若是循環模板，這是循環的次數。 *
fm：Ext.util.Format的簡寫方式。 *
* 這是一個例子說明怎麼利用這個知識點生成交錯行： *
var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Company: {[company.toUpperCase() + ', ' + title]}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<div class="{[xindex % 2 === 0 ? "even" : "odd"]}">,
'{name}',
'</div>',
'</tpl></p>'
);
tpl.overwrite(panel.body, data);
*
模板成員函數。 對於一些複製的處理， * 可以配置項對象的方式傳入一個或一個以上的成員函數到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);
* @constructor * @param {String/Array/Object} parts HTML判斷或片斷組成的數組，或多個參數然後執行join("")。 */