Extjs 模板的自訂格式化

假設我們打算從一變數中，列印出內容，但當中的內容有可能會佔用過多的空間。對於這種情況，通過的辦法是對該內容截取，限制在50個英文字元內，然後做成串連讓使用者點擊後觀察全文。函數"ellipsis" 的功能正是這樣，可限制在任一字元數內。另外，在截取字串的後面，該函數還會加上“...“，以示實際的內容還有更多。 

一個模板如下示 

var myTpl = new Ext.Template( 
    '<div>{content:ellipsis(50)}<br/><a href="{moreLink}">Read More</a></div>' 
); 

通過處理，其中有47個字元是屬於內容本身的，另外三個字元是”...“,一共50個字元。 

這是一份可用於模板格式化函數的列表： 

    * ellipsis(length) - 對大於指定長度部分的字串，進行裁剪，增加省略符號（“...”）的顯示。適用於只顯示前N位的字元，然後提供詳細頁面的連結。 
    * undef -檢查一個值是否為underfined，如果是的轉換為空白值 
    * htmlEncode - 轉換(&, <, >, and ') 字元 
    * trim - 對一段文本的前後多餘的空格裁剪 
    * substr(start, length) - 返回一個從指定位置開始的指定長度的子字串。 
    * lowercase - 返回一個字串，該字串中的字母被轉換為小寫字母。 
    * uppercase - 返回一個字串，該字串中的字母被轉換為大寫字母。 
    * capitalize - 返回一個字串，該字串中的第一個字母轉化為大寫字母，剩餘的為小寫。 
    * usMoney - 格式化數字到美元貨幣。如：$10.97 
    * date[(format)] - 將一個日期解析成為一個特定格式模式的日期。如日期文字不輸入，預設為“月/日/年” 
    * stripTags - 剝去變數的所有HTML標籤 

您亦可以建立自訂的格式化函數，具體做法是，在模板的執行個體上加入新的方法，繼而在模板上調用，格式化的函數應該像這樣的：{VARIABLE:this.<formatfunction></formatfunction>}" 

這是一個簡單的執行個體，對模板執行個體加入一個"parseJson "的新函數。 

 JS代碼

 1 var tplFun = new Ext.Template(  
 2             '<table border=1 cellpadding=0 cellspacing = 0>',  
 3             '<tr><td width=90 >姓名</td>',  
 4             '<td width=120>{name}</td></tr>',  
 5             '<tr><td width=90 >年齡</td>',  
 6             '<td width=120>{age}</td></tr>',  
 7             '<tr><td width=90 >身高</td>',  
 8             '<td width=120>{stature:this.parseJson()}</td></tr>',  
 9             '</table>'  
10         );  
11         var data = {  
12             name : 'tom',  
13             age : 24,  
14             stature : {  
15                 num : 170,  
16                 unit : '厘米'  
17             }  
18         }  
19           
20         tplFun.parseJson = function(json){  
21             return json.num + json.unit;  
22         }  
23 tplFun.append('tpl-table',data);