Extjs学习总结之07格式化

格式化的意思就是说对字符等数据的操作，比如Java中对String的格式化差不多，EXTJS也有，下面是具体的一些API的方法

Ext.onReady(function(){
	//严格的说 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(Ext.util.Format.ellipsis(v1,15));
	
	
	/*
	 * 2、undef(Mixed value):Mixed
	 * 检查一个值是否为underfined 若是的话转换为空值
	 * 参数项： value:Mixed:要检查的值
	 * 返回：Mixed 转换成功为空白字符串否则为原来的值
	 */
	var v2;
	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:要编码的字符串
	 */
	 var v4 = "<a href='http://www.baidu.com'>百度一下你就知道</a>";
	 Ext.Msg.alert("htmlEncode",Ext.util.Format.htmlEncode(v4));
	 Ext.Msg.alert("htmlEncode",v4);//对比一下你就知道
	
	 
	 
	 /*
	  * 5、htmlDecode(String value):String
	  * 将（&,<>,and,'）字符从HTML显示的格式还原
	  * 参数项：value:String:解码的字符串
	  */
	 
	 /*
	  * 6、trim(String value):String
	  * 剪裁一段文本的前后多余的空格
	  * 参数项：value:String:要剪裁的文本
	  */
	 
	 /*
	  * 7、substr(String value,Number start,Number length):String
	  * 返回一个从指定位置开始的指定长度的子字符串
	  * 参数项：	value:String:原始文本
	  * 		start:Number:所需要的字符串的起始位置
	  * 		length:Number:所需要的字符串中包括字符个数
	  */
	var v5 = "我们都是好孩子";
	Ext.Msg.alert("截断",Ext.util.Format.substr(v5,0,2));
	
	/*
	 * 8、lowercase(String value):String
	 * 返回一个字符串，该字符串中的字母被转换为小写字母
	 * 参数项：	value:String:要转换的字符串
	 */
	var v6 = "WELCOME TO BEIJING";
	Ext.Msg.alert("截断",Ext.util.Format.lowercase(v6));
	
	
	/*
	 * 9、uppercase(String value):String
	 * 返回一个字符串 该字符串中的字母被转换为大写字母
	 * 参数项：	value:String:要转换的字符串
	 */
	
	/*
	 * 10、capitalize(String value):String
	 * 返回一个字符串，该字符串中的第一个字母转换为大写字母，剩余的是小写
	 * 参数项：	value:String:要转换的字符串
	 */
	
	/*
	 * 11、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"));
	
	
	/*
	 * 12、stripTags(Mixed value):String
	 * 剥去所有的html标签
	 * 参数项：	value:Mixed:要剥去的文本
	 */
	var v8 = "<a href='http://www.baidu.com'>百度一下你就知道</a>";
	Ext.Msg.alert("htmlEncode",Ext.util.Format.stripTags(v8));
	
	
	/*
	 * 13、stripScript(Mixed value):String
	 * 剥去所有的脚本（script）标签
	 */
	
	/*
	 * 14、fileSize(Number/String size):String
	 * 对文件打消进行简单的格式化：(xxx bytes,xxx KB ,xxx MB)
	 * 参数项： 	size:Number/String 要格式化的数值
	 * Format会根据字节的大小自动的选择单位
	 */
	var v9=23432;
	Ext.Msg.alert("fileSize",Ext.util.Format.fileSize(v9));
	
	/****************************************************/
	/*
	 * XTemplate用于定义一个模版，并将值提供给{占位符，XTemplate也能和Ext.util.Format配合}
	 * 将填充的值进行格式化，得到用户想要的任何效果
	 */
	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>"
	);
	// <div id="xt"></div> 
	//  <div id="xt2"></div> 
	xt.append("xt",{b:"1",w:"500",v1:new Date(),v2:"HELLOWORLD",v3:"这是一个非常长的字符串"});
	xt.compile();
	
	/****************************************************/
	/*
	 * 如果连Format都不能满足XTemplate的需要呢？
	 */
	
	var xt2 = new Ext.XTemplate(
		"您的性别是：{sex:this.sexRender}"
	);
	
	xt2.sexRender = function(value){
		return value="男"?"boy":"girl"
	}
	
	xt2.append("xt2",{
		sex:'女'
	});
	xt2.compile();
	
});

 

截图如下：