ExtJs之格式化(Ext.util.Format) ~转

一、Ext.util.Format 类

 

严格来说，Ext.util.Format 并不是一个类，只是一个对象。所以，调用他的方法时并不需要先行实例化，直接调用即可，类似于java 中的static方法。

 

如果打开他的源代码，基本结构是这样的：

Js代码  

1. Ext.util.Format = function() {  
2.     var trimRe = /^\s+|\s+$/g;  
3.     return {  
4.     // 方法定义在此区  
5.     };  
6. }();  

 我们看到，最后是以()结束的，实际上这已经是一个对象了

 

1、ellipsis ( String value, Number length ) : String

对大于指定长度部分的字符串，进行裁剪，增加省略号（“...”）的显示

参数项：

value : String：要裁剪的字符串

length : Number：允许长度

返回：

String 转换后的文本

示例：

Js代码  

1. var v1 = "对大于指定长度部分的字符串，进行裁剪，增加省略号（“...”）的显示";  
2. Ext.Msg.alert("ellipsis", Ext.util.Format.ellipsis(v1, 10));  

 结果：对大于指定长度...

 

2、undef ( Mixed value ) : Mixed

检查一个值是否为underfined，若是的话转换为空值

参数项：

value : Mixed：要检查的值

返回：

Mixed 转换成功为空白字符串，否则为原来的值

示例：

Js代码  

1. var v2 = Ext.get("a"); // HTML页面中不存在id=a的元素  
2. Ext.Msg.alert("undef", Ext.util.Format.undef(v2)); // 输出结果为""  

 

3、defaultValue ( Mixed value, String defaultValue ) : String

检查一个值（引用的）是否为空，若是则转换到缺省值。

参数项：

value : Mixed：要检查的引用值

defaultValue : String：默认赋予的值（默认为""）

返回：

String

示例：

Js代码  

1. var v3;  
2. Ext.Msg.alert("defaultValue", Ext.util.Format.defaultValue(v3, "这是缺省值"));  

 

4、htmlEncode ( String value ) : String

转义(&, <, >, and ') 为能在HTML中显示的字符

参数项：

value : String：要编码的字符串

返回：

String 编码后的文本

示例：

Js代码  

1. var v4 = "<a href='http://www.zz-jb.com'>株洲北大青鸟</a>";  
2. Ext.Msg.alert("htmlEncode", Ext.util.Format.htmlEncode(v4));  

 和下面的代码比较一下就能理解该方法的作用：

Js代码  

1. var v4 = "<a href='http://www.zz-jb.com'>株洲北大青鸟</a>";  
2. Ext.Msg.alert("htmlEncode", v4);  

 

5、date ( Mixed value, [String format] ) : Function

将某个值解析成为一个特定格式的日期。

参数项：

value : Mixed：要格式化的值

format : String：（可选的）任何有效的日期字符串（默认为“月/日/年”）

返回：

Function 日期格式函数

示例：

Js代码  

1. var v7 = new Date();//获取当前日期  
2. 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标签

示例：

Js代码  

1. var v8 = "<a href='http://www.zz-jb.com'>株洲北大青鸟</a>";  
2. 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 已格式化的值

示例：

Js代码  

1. var v9 = 2349327423;  
2. 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类的方法参数

 

例子：

Js代码  

1. Ext.onReady(function() {  
2.             var xt = new Ext.XTemplate("<table border={b} width={w}>", "<tr>",  
3.                     '<td>{v1:date("Y 年m月d日H 时i分s秒")}</td>',  
4.                     "<td>{v2:lowercase}</td>", "<td>{v3:ellipsis(5)}</td>",  
5.                     "</tr>", "</table>");  
6.             xt.append("xt", {  // 页面中必须有一个id=xt的元素  
7.                         b : 1,  
8.                         w : 300,  
9.                         v1 : new Date(),  
10.                         v2 : "CELL2",  
11.                         v3 : "这是一段非常长的字符串"  
12.                     });  
13.             xt.compile();  
14.         });  

从上面代码中看出，v1 为日期类型，按符合中国人口味的日期格式输出；v2 为大写字母，变成小写字母后输出；v3 是一段较长的字符串，只显示一部分，剩余的用“…”来代替。

 

另外，强调的一点是，输出日期时，如果使用"<td>{v1:date('Y 年m月d 日H 时i 分s秒')}</td>"（即双引号在外，单引号在内）会产生错误。

 

 

性别用图片显示的例子：

Js代码  

1. var xt2 = new Ext.XTemplate("您是性别是：{sex:this.sexRender}");  
2. xt2.sexRender = function(value) {  
3.     return value == "男"  
4.             ? "<img src='../imgs/134.gif'>"  
5.             : "<img src='../imgs/133.gif'>"  
6. }  
7. xt2.append("xt2", {  
8.             sex : "女"  
9.         });  
10. xt2.compile();  

 

显示性别时，调用sexRender 方法，该方法的参数是实际填充的值，我们根据该参数返回不同的图片。this.sexRender 中的this是指xt2 对象，所以，sexRender 必须定义在xt2上，否则，Extjs会从fm对象中索取方法，fm是Extjs自己定义的对象。