一、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自己定义的对象。
相关推荐
NULL 博文链接:https://sonckchi.iteye.com/blog/1266437
extjs多选下拉框,Ext.ux.form.LovCombo,extjs 以修复多选下拉框火狐下取不到值的问题,火狐下div不显示背景色的问题
抄些常用工具方便查找 ———-字符串 Ext.util.Format.capitalize(string str);//将首字母变大写 Ext.util.Format.ellipsis(string value, Number length);//截取指定length字符,将自动在尾处添加省略号’…’ Ext....
该ext.jsb2文件是ExtJS3.4.0中的,因ExtJS4.0.0中没有这个文件,但可以与4.0.0版本共用。
主要介绍了ExtJs的Ext.Ajax.request实现waitMsg等待提示效果,需要的朋友可以参考下
extjs实例 入门,提供ext所需要的资源文件,详细叙述怎么改变文件颜色
extjs 可编辑的表格树,每个单元格自定义编辑组件,可以自适应列宽,只有源码与例子,运行实例要修改路径,不然图片不能显示,注意etree.jsp的js引入路径 支持Ext2.x以上版本 如运行不了EmailTo : codeme9@gmail....
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
EXTjs的上传组件
关于这个原因有很多种,我只说下我遇到的 我这样 写Store来复用的 代码如下: DocStore = Ext.extend(Ext.data.Store,{ initComponent:function(){ this.proxy = new Ext.data.HttpProxy({url:this.url}); this....
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
NULL 博文链接:https://maoyi606.iteye.com/blog/1782825
Extjs4.1多个扩展 1、Ext.ux.aceeditor.Panel 2、Ext.ux.grid.feature.Tileview 3、Ext.ux.upload.Button 4、Ext.ux.toggleslide.ToggleSlide 5、Ext.ux.container.ButtonSegment 6、Ext.ux.grid.plugin.RowEditing ...
目录 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 ...28. extJs 2.0学习笔记(ext.js篇) 77
NULL 博文链接:https://atian25.iteye.com/blog/1019910
ExtJS tooltip功能组件实例
ExtJs学习笔记,共30讲 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一...28. extJs 2.0学习笔记(ext.js篇) 77
Ext Extjs 禁止文本和日期编辑 ExtJS中动态设置TextField的readOnly属性
EXTJS_DATEFORMAT 日期格式对应,网上找到的,挺好用的