一、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自己定义的对象。
相关推荐
本文将深入探讨Ext.util.Format.Number()函数,它是ExtJS 4.0中的一个重要工具,用于格式化数字。 `Ext.util.Format`是ExtJS中一个非常实用的工具类,包含了一系列用于字符串、日期和数值等类型的数据格式化的静态...
`Ext.util.Format`:提供了一系列的格式化方法,如截断字符串(`ellipsis`),首字母大写(`capitalize`)等,方便对数据显示进行处理。 `Ext.util.ClickRepeater`:这是一个事件监听器,用于处理点击、鼠标按下和松开...
模板(`Ext.XTemplate`或`Ext.util.Format`)则用于格式化和渲染每个图片项的HTML。 图片上传功能通常借助于ExtJS的表单组件(`Ext.form.Panel`)和上传字段(`Ext.form.field.File`)。在ExtJS 4.2中,上传组件...
例如,对于`time1`列,我们使用了`Ext.util.Format.dateRenderer('Y-m-d')`来将日期格式化为“年-月-日”的形式显示在网格中。 ```javascript renderer:Ext.util.Format.dateRenderer('Y-m-d'), ``` ### 三、日期...
`renderer`参数接收一个日期格式化函数,`Ext.util.Format.dateRenderer('Y-m-d H:i:s')`表示日期将以'年-月-日 时:分:秒'的格式显示。 4. **创建GridPanel**: 最后,创建GridPanel并附加到ColumnModel和Store:...
- `Ext.util.Format.number(number, format)`:格式化数字。 #### 二十、Ext.util.DelayedTask类(第20页) - **概述**:Ext.util.DelayedTask类提供了一种延迟执行任务的方式。 - **常用方法**: - `Ext.util....
6.8 Ext.util.Format提供常用的格式化方法 6.8.1 ellipsis() 6.8.2 capitalize() 6.8.3 date() 6.8.4 htmlEncode() 6.8.5 htmlDecode() 6.8.6 stripTags() 6.8.7 substr() 6.8.8 lowercase...
Extjs.util.Format是Extjs框架中用于格式化不同类型数据的工具集合,它包含了一系列静态方法来处理字符串、日期以及扩展函数操作。 首先,来看字符串处理方法: - capitalize(str):此方法可以将传入的字符串首字母...
- `Ext.util.Format.number(value, format)`: 格式化数字。 - `Ext.util.Format.stripTags(value)`: 去除HTML标签。 #### 20. Ext.util.DelayedTask 类 (P.20) - **概述**:提供了延迟任务管理。 - **常用方法**...
第四步:在 extjs 中,可以使用 Ext.util.Format.dateRenderer 函数来格式化日期时间。例如,可以使用以下代码来格式化日期时间: ``` Ext.util.Format.dateRenderer = function(value) { return Ext.Date.format...
- **Ext.util.Format 类**:提供了一系列用于格式化文本的方法,如日期格式化、货币格式化等。 - **XTemplate**:除了基本的模板功能外,还可以结合格式化方法来增强数据展示的效果。 #### 八、ExtJS 组件结构 - *...
8.1.3 格式化输出数据:ext.string、ext.number、ext.date和ext.util.format / 389 8.1.4 超级模板:ext.xtemplate(包括ext.xtemplateparser和ext.xtemplatecompiler) / 393 8.1.5 模板的方法 / 396 8.2 组件...
EXTJS提供了`Ext.Date`和`Ext.util.Format`类来处理这些格式,可以根据不同的语言和地区设置合适的格式规则。 5. **工具支持**: - 标签“工具”可能是指EXTJS提供的一些辅助工具,如构建工具或者IDE插件,它们...
18. **Ext.util.Format 类**:包含各种数据格式化方法,如日期、颜色、大小等。 19. **Ext.util.DelayedTask 和 Ext.util.TaskRunner 类**:用于定时任务的执行,DelayedTask用于延迟调用,TaskRunner用于周期性...
- **Ext.util.Format类**: 提供了一系列字符串格式化的方法,如货币、日期等。 6. **ExtJS组件结构** - **组件分类**: 按照功能和用途对组件进行分类。 - **组件的生命周期**: 组件从创建到销毁的整个过程。 - ...
- **日期格式化**: `Ext.util.Format.date(new Date(), 'Y-m-d')`。 **6.3 XTemplate 进阶** - **功能**: 更复杂的模板逻辑。 - **示例**: 在模板中嵌入条件语句。 #### 七、Extjs 组件结构 **7.1 组件结构** -...
Extjs的`Ext.util.Format`类提供了一组内置的格式化函数,用于文本、日期和数字的格式化。还可以自定义格式化函数,或者通过`XTemplate`进一步自定义内容。 #### 8. 组件结构 Extjs的组件结构复杂且功能强大,包括...
5. **格式化**:Ext.util.Format类提供了多种格式化数据的方法,适用于格式化字符串、数字、日期等。文档会介绍这些方法的使用,以及如何与XTemplete配合使用。 6. **Extjs组件结构**:Ext.js是基于组件的框架,...
5. **Ext.util.Format.date()**:这是一个格式化日期的辅助方法,可以将日期对象转换为指定格式的字符串,方便在UI上展示。 6. **Ext.XTemplate**:XTemplate是一种强大的模板引擎,用于动态生成HTML内容。它可以...