Ext.MasterTemplate是一個功能蠻不錯的類，早在今年年頭左右的時間就推出了，但使用的人不是很多。

Ext.MasterTemplate的用處在于，能夠創(chuàng)建單個模板，在這個模板下帶有多個子模板。
這些子模板可將一組對象陣列（arrays of objects ）輕松地“填入”到子模板中，自然地也支持循環(huán)。定義子模板的地方

你須創(chuàng)建一個'tpl'的標(biāo)簽在模板裝飾中(makeup)。

這個例子：

Java代碼

1. var iconArray = [{img: 'images/icons/cog_orange.png', desc: 'Active Order'},   
2.                             {img: 'images/icons/stop.png', desc: 'Cancelled Order'},   
3.                             {img: 'images/icons/tick.png', desc: 'Completed Order'}];                     
4.    var iconTpl = new <SPAN class=hilite1><SPAN class=hilite1>Ext</SPAN></SPAN>.MasterTemplate('<fieldset><legend>{title}</legend><tpl><img src="{img}"    
5.   
6. width="16" height="16" /> {desc}<br/></tpl></fieldset>');   
7.    iconTpl.compile();   
8.    iconTpl.fill(iconArray);   
9.    iconTpl.append(document.body, {title: 'SAMPLE'});  

var iconArray = [{img: 'images/icons/cog_orange.png', desc: 'Active Order'},
{img: 'images/icons/stop.png', desc: 'Cancelled Order'},
{img: 'images/icons/tick.png', desc: 'Completed Order'}];
var iconTpl = new Ext.MasterTemplate('<fieldset><legend>{title}</legend><tpl><img src="{img}"
width="16" height="16" /> {desc}<br/></tpl></fieldset>');
iconTpl.compile();
iconTpl.fill(iconArray);
iconTpl.append(document.body, {title: 'SAMPLE'});

現(xiàn)在我們就可以輕松地用幾行代碼創(chuàng)建icon標(biāo)簽的容器了。fill()的第二個參數(shù)（布爾值）指的是是否允許對子模板復(fù)位，

像這樣：

Java代碼

1. iconTpl.fill(iconArray, true);  

iconTpl.fill(iconArray, true);

如果你不復(fù)位子模板，它會一直 增加、追加新數(shù)組的值。注意該類所也支持模板變量，當(dāng)然只適用于MasterTemplate。

本例中，title變量屬于這種變量，不包含在tpl標(biāo)簽中。


MasterTemplates亦支持創(chuàng)建表格，配合tpl標(biāo)簽不斷循環(huán)tr.
這是一個用戶登陸表的實例：

Java代碼

1. var userArray = [{username: 'aconran', userid: 1, password: '@#jkas(*}'},   
2.                             {username: 'jarred.nicholls', userid: 2, password: 'pIZh4cKm3'},   
3.                             {username: 'djliquidice', userid: 3, password: 'sajkfjhasir'}];                     
4.    var userTpl = new <SPAN class=hilite1><SPAN class=hilite1>Ext</SPAN></SPAN>.MasterTemplate('<table>',   
5.                                                              '<tr bgcolor="#c0c0c0">',   
6.                                                                 '<td>UserID</td>',   
7.                                                                 '<td>UserName</td>',   
8.                                                                 '<td>Password</td>',   
9.                                                              '</tr>',   
10.                                                                 '<tpl>',   
11.                                                                    '<tr>',   
12.                                                                       '<td>{userid}</td>',   
13.                                                                       '<td>{username}</td>',   
14.                                                                       '<td>{password}</td>',   
15.                                                                    '</tr>',   
16.                                                                 '</tpl>',   
17.                                                              '</table>');   
18.    userTpl.compile();   
19.    userTpl.fill(userArray);   
20.    userTpl.add({username: 'jack.slocum', userid: 4, password: '#Cru$hin'});   
21.    userTpl.append(document.body);  

var userArray = [{username: 'aconran', userid: 1, password: '@#jkas(*}'},
{username: 'jarred.nicholls', userid: 2, password: 'pIZh4cKm3'},
{username: 'djliquidice', userid: 3, password: 'sajkfjhasir'}];
var userTpl = new Ext.MasterTemplate('<table>',
'<tr bgcolor="#c0c0c0">',
'<td>UserID</td>',
'<td>UserName</td>',
'<td>Password</td>',
'</tr>',
'<tpl>',
'<tr>',
'<td>{userid}</td>',
'<td>{username}</td>',
'<td>{password}</td>',
'</tr>',
'</tpl>',
'</table>');
userTpl.compile();
userTpl.fill(userArray);
userTpl.add({username: 'jack.slocum', userid: 4, password: '#Cru$hin'});
userTpl.append(document.body);

子模板可分配名字（name屬性），以便在同一個MasterTemplates中處理多個子模板。可在add()/fill()中指定哪個子模

板要去填充。下列代碼是從Jack那里來的：（http://extjs.com/forum/showthread.php?t=1618）

Java代碼

1. var t = new <SPAN class=hilite1><SPAN class=hilite1>Ext</SPAN></SPAN>.MasterTemplate(   
2.     '<div id="{id}">',   
3.     '<div class="right"><tpl name="right"><span>{stuff}</span></tpl></div>',   
4.     '<div class="left"><tpl name="left"><span>{otherStuff}</span></tpl></div>',   
5.     '</div>'  
6.    );   
7.    t.add('right', {stuff: 'foo'});   
8.    t.add('left', {otherStuff: 'bar'});      
9.    t.fill('right', arrayOfStuff);  

var t = new Ext.MasterTemplate(
'<div id="{id}">',
'<div class="right"><tpl name="right"><span>{stuff}</span></tpl></div>',
'<div class="left"><tpl name="left"><span>{otherStuff}</span></tpl></div>',
'</div>'
);
t.add('right', {stuff: 'foo'});
t.add('left', {otherStuff: 'bar'});
t.fill('right', arrayOfStuff);

Ext.MasterTemplate 構(gòu)建器可從三個方面創(chuàng)建：
插入多個參數(shù)的裝飾（makeup）;
傳入構(gòu)建器的字符串?dāng)?shù)組；
單行字符串；
所有格式化功能同樣可以應(yīng)用在MasterTemplates中。您可參閱之前的教程"教程：學(xué)習(xí)利用模板（Templates）的格式化功能"
http://www.ajaxjs.com/yuicn/article.asp?id=20072919

***********下面的部分專業(yè)性過于強(qiáng)，，應(yīng)用層面可能不多。小弟我就不譯了**************
The last thing I'd like to touch on is how to utilize the Member formatting functions within Templates. By adding methods to the instance of your class or by subclassing as we will do here you can create your own custom formatting functions. We will add a column called Revoked to our user table and will be returning a 0 or 1 to represent whether or not this user has been revoked. To make this more user friendly we will create a formatting function called yesNoFormat similar to ColdFusions function which converts 'truthy' values to the word "Yes" and 'falsey' values to the word "No". We simply prepend "this." in front of our new formatting function and use the same syntax that is used for native Ext formatting functions.

Java代碼

1. var UserTemplate = function() {    
2.       var userTableHTML = ['<table>',   
3.                                         '<tr bgcolor="#c0c0c0">',   
4.                                            '<td>UserID</td>',   
5.                                            '<td>UserName</td>',   
6.                                            '<td>Password</td>',   
7.                                            '<td>Revoked</td>',   
8.                                         '</tr>',   
9.                                            '<tpl>',   
10.                                               '<tr>',   
11.                                                  '<td>{userid}</td>',   
12.                                                  '<td>{username}</td>',   
13.                                                  '<td>{password}</td>',   
14.                                                  '<td>{isrevoked:this.yesNoFormat}</td>',   
15.                                               '</tr>',   
16.                                            '</tpl>',   
17.                                         '</table>'];   
18.       UserTemplate.superclass.constructor.call(this, userTableHTML);   
19.       this.compile();   
20.    };   
21.    <SPAN class=hilite1><SPAN class=hilite1>Ext</SPAN></SPAN>.<SPAN class=hilite1><SPAN class=hilite1>ext</SPAN></SPAN>end(UserTemplate, <SPAN class=hilite1><SPAN class=hilite1>Ext</SPAN></SPAN>.MasterTemplate, {   
22.       yesNoFormat: function(value) {   
23.          return value ? 'Yes' : 'No';   
24.       }          
25.    });   
26.       
27.    <SPAN class=hilite1><SPAN class=hilite1>Ext</SPAN></SPAN>.onReady(function() {   
28.       var userArray = [{username: 'aconran', userid: 1, password: '@#jkas(*}', isrevoked: 1},   
29.                                {username: 'jarred.nicholls', userid: 2, password: 'pIZh4cKm3', isrevoked: 0},   
30.                                {username: 'djliquidice', userid: 3, password: 'sajkfjhasir', isrevoked: 0}];                     
31.       var userTpl = new UserTemplate();   
32.       userTpl.fill(userArray);   
33.       userTpl.add({username: 'jack.slocum', userid: 4, password: '#Cru$hin', isrevoked: 0});   
34.       userTpl.append(document.body);                           
35.    });  

var UserTemplate = function() {
var userTableHTML = ['<table>',
'<tr bgcolor="#c0c0c0">',
'<td>UserID</td>',
'<td>UserName</td>',
'<td>Password</td>',
'<td>Revoked</td>',
'</tr>',
'<tpl>',
'<tr>',
'<td>{userid}</td>',
'<td>{username}</td>',
'<td>{password}</td>',
'<td>{isrevoked:this.yesNoFormat}</td>',
'</tr>',
'</tpl>',
'</table>'];
UserTemplate.superclass.constructor.call(this, userTableHTML);
this.compile();
};
Ext.extend(UserTemplate, Ext.MasterTemplate, {
yesNoFormat: function(value) {
return value ? 'Yes' : 'No';
}
});
Ext.onReady(function() {
var userArray = [{username: 'aconran', userid: 1, password: '@#jkas(*}', isrevoked: 1},
{username: 'jarred.nicholls', userid: 2, password: 'pIZh4cKm3', isrevoked: 0},
{username: 'djliquidice', userid: 3, password: 'sajkfjhasir', isrevoked: 0}];
var userTpl = new UserTemplate();
userTpl.fill(userArray);
userTpl.add({username: 'jack.slocum', userid: 4, password: '#Cru$hin', isrevoked: 0});
userTpl.append(document.body);
});

Note that this example uses the array format of calling the constructor and that we have seen all 3 ways to instantiate a Template. (single liner, multiple args and an array of strings).