一、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));
和下面的代码比较一下就能理解该方法的作用:
- 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 日期格式函数
示例:
- 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自己定义的对象。