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

最新推荐文章于 2023-08-15 18:56:24 发布

diweikang

最新推荐文章于 2023-08-15 18:56:24 发布

阅读量1k

点赞数

分类专栏： ExtJS 文章标签： extjs 格式化 Format

ExtJS 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

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