Ext的Template支持通過傳入json數據的方式進行模板替換。
API中有這樣一段示例：

復制代碼 代碼如下:

var t = new Ext.Template( 
    '<div name="{id}">', 
        '<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>', 
    '</div>' 
); 
t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'}); 

稍作修改做個測試：

復制代碼 代碼如下:

var t = new Ext.Template( 
    '<div name="{id}">', 
        '<span class="{cls}">{name} {value}</span>', 
    '</div>' 
); 
var dt=t.apply({id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'}); 
alert(dt); 

運行上面的代碼會彈出<div name="myid"><span class="myclass">foo bar</span></div>說明替換成功。

但如果又這樣一個模板數據：

復制代碼 代碼如下:

{id: 'myid', cls:{o:'myclass'}, name: 'foo', value: 'bar'} 

我們想在替換時將模板中原cls部分替換為cls.o的值，也就是myclass，該怎么做呢？是不是想直接用{cls.o}，你可以試下，絕對無效，沒有替換。因為template匹配替換是直接對{}中冒號前的字符串與JSON變量進行匹配的。當然找不到cls.o這個串所以也就不能匹配。
好在Template支持對數據的解析處理。
我們可以自己定義一個解析函數即可。其實很簡單：
 

復制代碼 代碼如下:

var t = new Ext.Template( 
    '<div name="{id}">', 
        '<span class="{cls:this.parseJSON}">{name} {value}</span>', 
    '</div>' 
); 
t.parseJSON=function(data){return data.o}; 
var dt=t.apply({id: 'myid', cls: {o:'myclass'}, name: 'foo', value: 'bar'}); 
alert(dt) 

我們定義了一個叫parseJSON的解析方法，在模板中訪問頂層的cls然后對cls(是一個object)的值進行處理（直接訪問它的o屬性）即可。