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

简介: 一、Ext.util.Format 类 严格来说,Ext.util.Format 并不是一个类,只是一个对象。所以,调用他的方法时并不需要先行实例化,直接调用即可,类似于java 中的static方法。 如果打开他的源代码,基本结构是这样的: Js代码 Ext.util.Format = function() {      var trimR

一、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. xt2.append("xt2", { 
  7.             sex : "女" 
  8.         }); 
  9. xt2.compile(); 

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

目录
相关文章
|
Web App开发 前端开发 JavaScript
《Ext JS实战》——2.2 Ext.Element类
这个getElementById方法很好用,可以执行一些类似改变innerHTML的内容,或者美化和配置一个CSS类这样的基本任务。不过要是想对该节点做更多的事情,例如管理它的事件,在有鼠标点击时应用某个样式,或者替换一个CSS类?必须自己管理全部代码,还要不断地对代码进行更新,以保证能够全部浏览器的兼容性。
1746 0