ExtJS之格式化(Ext.util.Format)

一、ext.util.format 類

嚴格來說，ext.util.format 并不是一個類，隻是一個對象。是以，調用他的方法時并不需要先行執行個體化，直接調用即可，類似于java 中的static方法。

如果打開他的源代碼，基本結構是這樣的：

ext.util.format = function() { 

    var trimre = /^\s+|\s+$/g; 

    return { 

    // 方法定義在此區 

    }; 

}(); 

我們看到，最後是以()結束的，實際上這已經是一個對象了

1、ellipsis ( string value, number length ) : string

對大于指定長度部分的字元串，進行裁剪，增加省略号（“...”）的顯示

參數項：

value : string：要裁剪的字元串

length : number：允許長度

傳回：

string 轉換後的文本

示例：

var v1 = "對大于指定長度部分的字元串，進行裁剪，增加省略号（“...”）的顯示"; 

ext.msg.alert("ellipsis", ext.util.format.ellipsis(v1, 10)); 

結果：對大于指定長度...

2、undef ( mixed value ) : mixed

檢查一個值是否為underfined，若是的話轉換為空值

value : mixed：要檢查的值

mixed 轉換成功為空白字元串，否則為原來的值

var v2 = ext.get("a");

// html頁面中不存在id=a的元素 

ext.msg.alert("undef", ext.util.format.undef(v2));

// 輸出結果為"" 

3、defaultvalue ( mixed value, string defaultvalue ) : string

檢查一個值（引用的）是否為空，若是則轉換到預設值。

value : mixed：要檢查的引用值

defaultvalue : string：預設賦予的值（預設為""）

string

var v3; 

ext.msg.alert("defaultvalue", ext.util.format.defaultvalue(v3,

"這是預設值")); 

4、htmlencode ( string value ) : string

轉義(&, <, >, and ') 為能在html中顯示的字元

value : string：要編碼的字元串

string 編碼後的文本

var v4 = "<a href='http://www.zz-jb.com'>株洲北大青鳥</a>"; 

ext.msg.alert("htmlencode", ext.util.format.htmlencode(v4)); 

和下面的代碼比較一下就能了解該方法的作用：

ext.msg.alert("htmlencode", v4); 

5、date ( mixed value, [string format] ) : function

将某個值解析成為一個特定格式的日期。

value : mixed：要格式化的值

format : string：（可選的）任何有效的日期字元串（預設為“月/日/年”）

function 日期格式函數

var v7 = new date();//擷取目前日期 

ext.msg.alert("date", ext.util.format.date(v7,

"y-m-d h:i:s")); 

在格式化日期時，y 表示年，m表示月，d表示日，h 表示24小時制的小時，h表示12 小時制的小時，i表示分鐘，s表示秒。和java 不太一樣。

關于日期格式化的更多内容，請參考ext幫助文檔date部分。

6、striptags ( mixed value ) : string

剝去所有html标簽

value : mixed：要剝去的文本

string 剝去後的html标簽

var v8 = "<a href='http://www.zz-jb.com'>株洲北大青鳥</a>"; 

ext.msg.alert("striptags ", ext.util.format.striptags(v8)); 

結果：株洲北大青鳥

7、filesize ( number/string size ) : string

對檔案大小進行簡單的格式化（xxx bytes、xxx kb、xxx mb）

size : number/string：要格式化的數值

string 已格式化的值

var v9 = 2349327423; 

ext.msg.alert("filesize", ext.util.format.filesize(v9)); 

結果：2240.5 mb （format會根據位元組的大小自動選擇機關。）

二、再談xtemplete

xtemplate用于定義一個模闆，并将值提供給{}占位符，xtemplate也能和ext.util.format配合，将填充的值進行格式化，得到使用者想要的任何效果。

基本格式：{index|name:method(params)}

說明：

index：索引

name：json對象的屬性名

method：ext.util.format類的方法名

params：ext.util.format類的方法參數

例子：

ext.onready(function() { 

            var xt = new ext.xtemplate("<table border={b} width={w}>",

"<tr>", 

                    '<td>{v1:date("y 年m月d日h 時i分s秒")}</td>', 

                    "<td>{v2:lowercase}</td>",

"<td>{v3:ellipsis(5)}</td>", 

                    "</tr>", "</table>"); 

            xt.append("xt", { 

// 頁面中必須有一個id=xt的元素 

                        b : 1, 

                        w : 300, 

                        v1 : new date(), 

                        v2 : "cell2", 

                        v3 : "這是一段非常長的字元串" 

                    }); 

            xt.compile(); 

        }); 

從上面代碼中看出，v1 為日期類型，按符合中國人口味的日期格式輸出；v2 為大寫字母，變成小寫字母後輸出；v3 是一段較長的字元串，隻顯示一部分，剩餘的用“…”來代替。

另外，強調的一點是，輸出日期時，如果使用"<td>{v1:date('y 年m月d 日h 時i 分s秒')}</td>"（即雙引号在外，單引号在内）會産生錯誤。

性别用圖檔顯示的例子：

var xt2 = new ext.xtemplate("您是性别是：{sex:this.sexrender}"); 

xt2.sexrender = function(value) { 

    return value == "男" 

            ? "<img src='../imgs/134.gif'>" 

            : "<img src='../imgs/133.gif'>" 

} 

xt2.append("xt2", { 

            sex : "女" 

xt2.compile(); 

顯示性别時，調用sexrender 方法，該方法的參數是實際填充的值，我們根據該參數傳回不同的圖檔。this.sexrender 中的this是指xt2 對象，是以，sexrender 必須定義在xt2上，否則，extjs會從fm對象中索取方法，fm是extjs自己定義的對象。