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. }(); 

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

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

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

var v1 = "对大于指定长度部分的字符串，进行裁剪，增加省略号（“...”）的显示";
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));
   // 输出结果为"" 

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

示例：

Js代码

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

var v3;
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)); 

var v4 = "<a href='http://www.zz-jb.com'>株洲北大青鸟</a>";
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); 

var v4 = "<a href='http://www.zz-jb.com'>株洲北大青鸟</a>";
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")); 

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标签

示例：

Js代码

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

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 已格式化的值

示例：

Js代码

1. var v9 = 2349327423; 
2. Ext.Msg.alert("fileSize", Ext.util.Format.fileSize(v9)); 

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类的方法参数

例子：

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

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>"（即双引号在外，单引号在内）会产生错误。

性别用图片显示的例子：

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(); 

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自己定义的对象。