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

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

你須創建一個'tpl'的標簽在模板裝飾中(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'});

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

像這樣：

Java代碼

1. iconTpl.fill(iconArray, true);  

iconTpl.fill(iconArray, true);

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

本例中，title變量屬于這種變量，不包含在tpl標簽中。


MasterTemplates亦支持創建表格，配合tpl標簽不斷循環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 構建器可從三個方面創建：
插入多個參數的裝飾（makeup）;
傳入構建器的字符串數組；
單行字符串；
所有格式化功能同樣可以應用在MasterTemplates中。您可參閱之前的教程"教程：學習利用模板（Templates）的格式化功能"
http://www.ajaxjs.com/yuicn/article.asp?id=20072919

***********下面的部分專業性過于強，，應用層面可能不多。小弟我就不譯了**************
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).