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).