extjs4 一些小知识

extjs4 一些小知识
1、获取页面上的HTML元素，并进行处理，使用Ext.get('elid')方法，参数为HTML元素的id值，由此可对获取到的元素进行各种处理。例如：
Javascript代码
1. var el = Ext.get("the-id");
2. var appendEl = Ext.get("the-id-append");
3. function fn1(){
4. Ext.Msg.alert("提示","您在id为'the_id'的Element上按下了ctrl+c键");
5. }
6. el.addCls("special-css");//为元素添加样式表
7. appendEl.addCls("special-css");
8. appendEl.setWidth(240);
9. appendEl.setWidth(240, true);
10. el.focus();//将焦点移到el元素上
11. el.addClsOnFocus("focus-css");//为得到和失去焦点添加和移除css类
12. el.addClsOnOver("mouseover-css");//为鼠标移入移出事件添加和移除css类
13. el.addClsOnClick("click-css");//为点击事件添加和移除css类
14. el.setWidth(240);//将元素的宽度设为100相素
15. el.setWidth(240, true);//将元素的宽度设为100并带有动画效果
16. el.addKeyMap({key : "c",ctrl : true,fn:fn1,scope:el});//绑定el元素当键盘按下ctrl+c键时将呼叫fn函数
17. el.addKeyListener({key:"g",ctrl:true},fn1,el);//和上面的addKeyMap的功能相同，只是参数的传递方式不同
```
var el = Ext.get("the-id");
	var appendEl = Ext.get("the-id-append");
	function fn1(){
		Ext.Msg.alert("提示","您在id为'the_id'的Element上按下了ctrl+c键");
	}
	el.addCls("special-css");//为元素添加样式表
	appendEl.addCls("special-css");
	appendEl.setWidth(240);
	appendEl.setWidth(240, true);
	el.focus();//将焦点移到el元素上
	el.addClsOnFocus("focus-css");//为得到和失去焦点添加和移除css类
	el.addClsOnOver("mouseover-css");//为鼠标移入移出事件添加和移除css类
	el.addClsOnClick("click-css");//为点击事件添加和移除css类
	el.setWidth(240);//将元素的宽度设为100相素
	el.setWidth(240, true);//将元素的宽度设为100并带有动画效果
	el.addKeyMap({key : "c",ctrl : true,fn:fn1,scope:el});//绑定el元素当键盘按下ctrl+c键时将呼叫fn函数
	el.addKeyListener({key:"g",ctrl:true},fn1,el);//和上面的addKeyMap的功能相同，只是参数的传递方式不同 
```
2、获取页面上的HTML元素，还可用select方法，可以获取一系列元素，也可为之设定相同的事件，或者进行相同的设置，例如：
Javascript代码
1. var el = Ext.select(["div1","div2"],true);
2. el.on("click",function tes(e){
3. Ext.Msg.alert("提示","您点击了id为" + Ext.get(e.target).dom.id + "的节点");
4. });
```
var el = Ext.select(["div1","div2"],true);
		el.on("click",function tes(e){
			Ext.Msg.alert("提示","您点击了id为" + Ext.get(e.target).dom.id + "的节点");
		});
```
3、获取页面上的HTML元素，还可以用query方法，与前面的区别在于参数不同，例如：
Javascript代码
1. //选择元素为div其id为div1的节点的数组
2. var el = Ext.query("#div1");
3. //选择元素为div的且这些div具备属性为property1其值为pro1的节点的数组
4. var targetD = Ext.query('div[property1=pro1]');
5. if(el.length>0 || targetD.length>0){
6. var msg = '';
7. msg = "取得了"+el.length+"个div的id为'div1'的节点<br>"+"取得了"+targetD.length+"个类型为div<br>具备属性property1且其值为'pro1'的节点";
8. msg += "<br>内容为：";
9. for(var i = 0; i<el.length; i++)
10. {
11. msg += el[i].id + ":" + el[i].innerHTML;
12. }
13. msg += "<br>内容为：";
14. for(var i = 0; i<targetD.length; i++)
15. {
16. msg += targetD[i].id + ":" + targetD[i].innerHTML;
17. }
18. Ext.Msg.alert('提示',msg);
19. }
```
//选择元素为div其id为div1的节点的数组
		var el = Ext.query("#div1");
		//选择元素为div的且这些div具备属性为property1其值为pro1的节点的数组
		var targetD = Ext.query('div[property1=pro1]');
		if(el.length>0 || targetD.length>0){
			var msg = '';
			msg = "取得了"+el.length+"个div的id为'div1'的节点<br>"+"取得了"+targetD.length+"个类型为div<br>具备属性property1且其值为'pro1'的节点";
			msg += "<br>内容为：";
			for(var i = 0; i<el.length; i++)
			{
			    msg += el[i].id + ":" + el[i].innerHTML;
			}
			msg += "<br>内容为：";
			for(var i = 0; i<targetD.length; i++)
			{
			   msg += targetD[i].id + ":" + targetD[i].innerHTML;
			}
			Ext.Msg.alert('提示',msg);
		}
```
4、获取Ext的组件，用getCmp方法，然后根据其特定类型可以进行相应的处理，例如：
Javascript代码
1. //获得id为'panel1'的组件
2. var comp = Ext.getCmp('panel1');
3. Ext.Msg.alert('提示',"取得的id为'panel1'的组件的类型为"+comp.getXType());
4. comp.setTitle("aaaaaa");
```
//获得id为'panel1'的组件
		var comp = Ext.getCmp('panel1');
		Ext.Msg.alert('提示',"取得的id为'panel1'的组件的类型为"+comp.getXType());
		comp.setTitle("aaaaaa");
```
5、获取元素的DOM，使用getDom方法
Javascript代码
1. //获得id为'panel1'的组件的Dom,其执行结果和panel.el.dom相同
2. var comp = Ext.getDom('panel1');
3. Ext.Msg.alert('提示',"通过Ext.getDom取得的dom的id:"+comp.id+
4. "<br>通过另一种方式取得panel的dom其id:"+panel.el.dom.id);
```
//获得id为'panel1'的组件的Dom,其执行结果和panel.el.dom相同
		var comp = Ext.getDom('panel1');
		Ext.Msg.alert('提示',"通过Ext.getDom取得的dom的id:"+comp.id+
			"<br>通过另一种方式取得panel的dom其id:"+panel.el.dom.id);
```
6、判断对象是否为空，用isEmpty方法，例如：
Javascript代码
1. //判断对象是否为空
2. //当判断字符串时如果第二个参数不不同时结果也会不同
3. //第二个参数表示'是否允许字符串为空'
4. Ext.Msg.alert('提示',"我们已经实例化的panel是否为空?"+Ext.isEmpty(panel)+"<br>Ext.isEmpty('',true)的值:"+Ext.isEmpty("",true)+"<br>Ext.isEmpty('',false)的值"+Ext.isEmpty("",false));
```
//判断对象是否为空
//当判断字符串时如果第二个参数不不同时结果也会不同
//第二个参数表示'是否允许字符串为空'
Ext.Msg.alert('提示',"我们已经实例化的panel是否为空?"+Ext.isEmpty(panel)+"<br>Ext.isEmpty('',true)的值:"+Ext.isEmpty("",true)+"<br>Ext.isEmpty('',false)的值"+Ext.isEmpty("",false));
```
7、Ext.each方法的使用示例：
Javascript代码
1. //定义一个集合
2. var array = [],i;
3. //为集合加入元素,这些元素为从0到9的数字
4. for(i=0;i<10;i++){
5. array.push(i);
6. }
7. function fn(item,index,allItems){
8. //如果跌代对象的元素值大于5则终止跌代执行
9. if(item>5){
10. return false;
11. }else{
12. //为集合元素中值小于5的元素进行字符串的追加
13. allItems[index] = item+"_st"
14. }
15. }
17. function fn1(item,index,allItems){
18. if(index>0)
19. return false;
20. //只执行一次
21. Ext.Msg.alert('最后的处理结果',
22. "<div style='160px'>最后集合为:"+allItems+"</div>");
23. }
24. //对集合进行字符串的追加
25. Ext.each(array,fn);
26. //打印集合的所有元素值
27. Ext.each(array,fn1);
```
//定义一个集合
		var array = [],i;
		//为集合加入元素,这些元素为从0到9的数字
		for(i=0;i<10;i++){
			array.push(i);
		}
		function fn(item,index,allItems){
			//如果跌代对象的元素值大于5则终止跌代执行
			if(item>5){
				return false;
			}else{
				//为集合元素中值小于5的元素进行字符串的追加
				allItems[index] = item+"_st"
			}
		}

		function fn1(item,index,allItems){
			if(index>0)
				return false;
			//只执行一次
			Ext.Msg.alert('最后的处理结果',
				"<div style='160px'>最后集合为:"+allItems+"</div>");
		}
		//对集合进行字符串的追加
		Ext.each(array,fn);
		//打印集合的所有元素值
		Ext.each(array,fn1);
```
8、Ext.apply方法的使用示例：
Javascript代码
1. //定义两个对象,一个目标对象一个源对象
2. var tarObj = {},srcObj
3. srcObj = {};
4. srcObj.name = "源对象";
5. srcObj.text = "我的文本内容已经从srcObj中拷贝过来了";
6. srcObj.width = "130px";
7. //调用Ext.apply进行处理,从srcObj中拷贝属性到tarObj中
8. Ext.apply(tarObj,srcObj);
9. Ext.Msg.alert('Ext.apply示例',"tarObj的属性如下:<br>name:"+
10. tarObj.name+"<br>text:"+tarObj.text+
11. "<br>"+tarObj.width);
```
//定义两个对象,一个目标对象一个源对象
var tarObj = {},srcObj
srcObj = {};
srcObj.name = "源对象";
srcObj.text = "我的文本内容已经从srcObj中拷贝过来了";
srcObj.width = "130px";
//调用Ext.apply进行处理,从srcObj中拷贝属性到tarObj中
Ext.apply(tarObj,srcObj);
Ext.Msg.alert('Ext.apply示例',"tarObj的属性如下:<br>name:"+
		tarObj.name+"<br>text:"+tarObj.text+
		"<br>"+tarObj.width);
```
9、Ext.encode方法，将对象转换为字符串
Javascript代码
1. var person = {name : 'Tom', age: 24};//定义一个json对象
2. Ext.Msg.alert("提示",Ext.encode(person));//打印将对象转变成字符串
```
var person = {name : 'Tom', age: 24};//定义一个json对象
Ext.Msg.alert("提示",Ext.encode(person));//打印将对象转变成字符串
```
10、Ext.htmlDecode方法示例：
Javascript代码
1. Ext.Msg.alert("提示",Ext.htmlDecode("<table width='240' border='1' id='tab1' cellspacing='2' cellpadding='4'><tr><td>简单的html表格<input type='button' value='按钮'></td></tr></table>"));
```
Ext.Msg.alert("提示",Ext.htmlDecode("<table width='240' border='1' id='tab1' cellspacing='2' cellpadding='4'><tr><td>简单的html表格<input type='button' value='按钮'></td></tr></table>"));
```
11、Ext.typeOf方法示例：
Javascript代码
1. var panel = new Ext.Panel({//实例化了一个对象
2. className:"test",
3. title:"示例",
4. renderTo:'sub1',
5. '300px',
6. html:"<div id='div1' style='height:200px'></div>"
7. });
8. var el = Ext.select(["div1"],true);
9. var array1 = new Array();//实例化了一个数组
10. el.on("click",function tes(){
11. Ext.Msg.alert("提示",'panel的类型是：'+Ext.typeOf(panel)+'，array1的类型是：'+Ext.typeOf(array1));
12. });
```
var panel = new Ext.Panel({//实例化了一个对象
	className:"test",
	title:"示例",
	renderTo:'sub1',
	'300px',
	html:"<div id='div1' style='height:200px'></div>"
});
var el = Ext.select(["div1"],true);
var array1 = new Array();//实例化了一个数组
el.on("click",function tes(){
	Ext.Msg.alert("提示",'panel的类型是：'+Ext.typeOf(panel)+'，array1的类型是：'+Ext.typeOf(array1));
});
```
12、Ext.core.DomHelper示例：
Javascript代码
1. Ext.core.DomHelper.append(Ext.get("div1"),"<br>新追加了文本",true);
3. //给id为div1的元素指定一个样式表
4. //其样式表的形式可以是直接用文本,如:font-size:18px
5. //也可以用文本表示的对象,如:{font-size:18px;}
6. Ext.core.DomHelper.applyStyles(Ext.get("div1"),"font-size:18px;color:green;font-weight:bold;");
7. var str = Ext.get("div1").dom.outerHTML;
8. //由于Ext.Msg.alert会展示alert里的html
9. //所以我们特意用文本框来展示应用了样式表后的div效果字符串
10. Ext.Msg.alert('DomHelper示例','<textarea rows="6" cols="35">'+str+'</textarea>');
12. //首先通过DomHelper.createTemplate创建一套模板
13. var test = Ext.core.DomHelper.createTemplate('<div name="{id}">'+
14. '<span class="{cls}">{name:trim} {value:ellipsis(10)}<br>第二行文本</span>'+
15. '</div>');
16. //通过定义的模板替换模板中的变量,然后追加在div的id为div1的div里面进行展现
17. test.append(Ext.get("div1"),{id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'},true);
19. //给指定的div1在其后插入一个新的div，类似的有insertBefore方法，insertFirst方法
20. Ext.core.DomHelper.insertAfter(Ext.get("div1"),{id: 'item2', html: "<div id='div2' style='height:60px;padding:5px;background-color:#FEFCE7'>我是新追加的Div对象</div>"});
21. //给指定的div1在之前插入一个新的html
22. Ext.core.DomHelper.insertHtml("beforeBegin",document.getElementById("div1"),"我是新插入的Html文本");
23. //给指定的div1替换新的html
24. Ext.core.DomHelper.overwrite(document.getElementById("div1"),"我是新替换的Html文本");
```
Ext.core.DomHelper.append(Ext.get("div1"),"<br>新追加了文本",true);

//给id为div1的元素指定一个样式表
//其样式表的形式可以是直接用文本,如:font-size:18px
//也可以用文本表示的对象,如:{font-size:18px;}
Ext.core.DomHelper.applyStyles(Ext.get("div1"),"font-size:18px;color:green;font-weight:bold;");
var str = Ext.get("div1").dom.outerHTML;
//由于Ext.Msg.alert会展示alert里的html
//所以我们特意用文本框来展示应用了样式表后的div效果字符串
Ext.Msg.alert('DomHelper示例','<textarea rows="6" cols="35">'+str+'</textarea>');

//首先通过DomHelper.createTemplate创建一套模板
var test = Ext.core.DomHelper.createTemplate('<div name="{id}">'+
	'<span class="{cls}">{name:trim} {value:ellipsis(10)}<br>第二行文本</span>'+
	'</div>');
//通过定义的模板替换模板中的变量,然后追加在div的id为div1的div里面进行展现
test.append(Ext.get("div1"),{id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'},true);

//给指定的div1在其后插入一个新的div，类似的有insertBefore方法，insertFirst方法
Ext.core.DomHelper.insertAfter(Ext.get("div1"),{id: 'item2', html: "<div id='div2' style='height:60px;padding:5px;background-color:#FEFCE7'>我是新追加的Div对象</div>"});
//给指定的div1在之前插入一个新的html
Ext.core.DomHelper.insertHtml("beforeBegin",document.getElementById("div1"),"我是新插入的Html文本");
//给指定的div1替换新的html
Ext.core.DomHelper.overwrite(document.getElementById("div1"),"我是新替换的Html文本");
```
13、DomQuery用法示例：
Javascript代码
1. //获到所有的以id为div0为父节点的div
2. //(在第二节中讲述过Ext.query的使用规则,忘记了的读者可以温习一下)
3. var tarArry = Ext.query('#div0 div');
4. //选择那些不包含id为div1的节点
5. var except = Ext.core.DomQuery.filter(tarArry,"#div1",true);
6. //选择那些包含id为div1的节点
7. var include = Ext.core.DomQuery.filter(tarArry,"#div1",false);
8. //对对数组中是否包含指定id的节点进行判断
9. var isInclude = Ext.core.DomQuery.is(except,'#div0');
10. //选择以id为divo的所有div子点中的第一个节点
11. var selectNode = Ext.core.DomQuery.selectNode("#div0 div");
12. function retStr(array){
13. var str ="";
14. for(var i=0;i<array.length;i++){
15. if(i<array.length-1)
16. str+=(array[i].id+";");
17. else
18. str+=array[i].id;
19. }
20. return str;
21. }
22. Ext.Msg.alert('返回结果',"不包含id为'div1'的所有div的id为:"+retStr(except)+
23. "<br>包含id为div1的所有div的id为:"+retStr(include)+
24. "<br>通过Ext.core.DomHelper.is(except,'#div0')的返回结果"+isInclude+
25. ",<br>表示"+retStr(except)+"是否包含id为div0的节点:"+
26. "<br>在id为div0的第一个子节点的id是:"+selectNode.id);
```
//获到所有的以id为div0为父节点的div
		//(在第二节中讲述过Ext.query的使用规则,忘记了的读者可以温习一下)
		var tarArry = Ext.query('#div0 div');
		//选择那些不包含id为div1的节点
		var except = Ext.core.DomQuery.filter(tarArry,"#div1",true);
		//选择那些包含id为div1的节点
		var include = Ext.core.DomQuery.filter(tarArry,"#div1",false);
		//对对数组中是否包含指定id的节点进行判断
		var isInclude = Ext.core.DomQuery.is(except,'#div0');
		//选择以id为divo的所有div子点中的第一个节点
		var selectNode = Ext.core.DomQuery.selectNode("#div0 div");
		function retStr(array){
			var str ="";
			for(var i=0;i<array.length;i++){
				if(i<array.length-1)
					str+=(array[i].id+";");
				else
					str+=array[i].id;
			}
			return str;
		}
		Ext.Msg.alert('返回结果',"不包含id为'div1'的所有div的id为:"+retStr(except)+
				"<br>包含id为div1的所有div的id为:"+retStr(include)+
				"<br>通过Ext.core.DomHelper.is(except,'#div0')的返回结果"+isInclude+
				",<br>表示"+retStr(except)+"是否包含id为div0的节点:"+
				"<br>在id为div0的第一个子节点的id是:"+selectNode.id);
```
14、Ext.util.CSS示例：
Javascript代码
1. //通过传递一个样式表描述文本创建一个指定的样式表和id为the绑定在一起
2. Ext.util.CSS.createStyleSheet(".myclass{color:blue}","the");
3. var cssObj = Ext.util.CSS.getRule(".myclass",true);
4. Ext.Msg.alert('获取的信息','创建样式表<br>获取myclass样式表中规则的字体颜色:'+cssObj.style.color);
6. Ext.util.CSS.createStyleSheet(".a1{font-size:12px;color:blue;}","thecss");
7. var pan = new Ext.panel.Panel({
8. title:'添加css并移除',
9. html:'首先我们添加一个样式,然后移除他'
10. ,
11. height:200,
12. 300,
13. cls: 'a1'
14. });
15. pan.render("hr_panel");
17. setBtn = new Ext.button.Button(
18. text : '移除样式',
19. width : 50,
20. handler : function(){
21. Ext.util.CSS.removeStyleSheet("thecss");
22. }
23. });
24. setBtn.render("setBut");
26. //定义使用改变个性化定制的控件
27. //该控制实际上为一个可供选择样式表值的下拉框
28. //当改变下拉框的选择时则调用Ext.util.CSS.swapStyleSheet来替换其样式表路径
29. Ext.onReady(function(){
30. var themes = [
31. {theme:'默认', css:'ext-all.css'},
32. {theme:'黑色',css: 'ext-all-access.css'},
33. {theme:'红色',css: 'ext-all-red.css'}];
34. //创建主题数据模型
35. Ext.regModel('Theme', {
36. fields: ['theme','css']
37. });
38. //创建主题数据源
39. var themeStore = Ext.create('Ext.data.Store',{
40. model : 'Theme',
41. data : themes
42. });
43. //创建主题切换选择框
44. var themeChange = Ext.create('Ext.form.ComboBox',{
45. id : 'themeChange',
46. width : 150,
47. labelWidth : 60,
48. labelSeparator :'：',//分隔符
49. fieldLabel:'样式选择',
50. store : themeStore,
51. editable : false,
52. triggerAction: 'all',//单击触发按钮显示全部数据
53. store : themeStore,//设置数据源
54. displayField : 'theme',
55. valueField : 'css',
56. queryMode: 'local',//本地模式
57. value:'ext-all.css',//默认风格
58. listeners : {
59. 'collapse' : function() {
60. Ext.util.CSS.swapStyleSheet('theme', 'extjs4/resources/css/'+ this.getValue());
61. contentIframe.window.themeChange(this.getValue());
62. }
63. }
64. });
65. //定义panel
66. Ext.create('Ext.form.FormPanel',{
67. title:'Ext.form.ComboBox本地数据源示例',
68. renderTo: Ext.getBody(),
69. bodyPadding: 5,
70. frame : true,
71. height:100,
72. 270,
73. defaults:{//统一设置表单字段默认属性
74. labelSeparator :'：',//分隔符
75. labelWidth : 70,//标签宽度
76. width : 200,//字段宽度
77. labelAlign : 'left'//标签对齐方式
78. },
79. items:themeChange
80. });
81. });
```
//通过传递一个样式表描述文本创建一个指定的样式表和id为the绑定在一起
Ext.util.CSS.createStyleSheet(".myclass{color:blue}","the");
var cssObj = Ext.util.CSS.getRule(".myclass",true);
Ext.Msg.alert('获取的信息','创建样式表<br>获取myclass样式表中规则的字体颜色:'+cssObj.style.color);

Ext.util.CSS.createStyleSheet(".a1{font-size:12px;color:blue;}","thecss");
var pan = new Ext.panel.Panel({
	title:'添加css并移除',
	html:'首先我们添加一个样式,然后移除他'
,
			height:200,
			300,
			cls: 'a1'
});
pan.render("hr_panel");

setBtn = new Ext.button.Button(
	text : '移除样式',
	width : 50,
	handler : function(){
		Ext.util.CSS.removeStyleSheet("thecss");
	}
});
setBtn.render("setBut");

//定义使用改变个性化定制的控件
//该控制实际上为一个可供选择样式表值的下拉框
//当改变下拉框的选择时则调用Ext.util.CSS.swapStyleSheet来替换其样式表路径
Ext.onReady(function(){
	var themes = [
			{theme:'默认', css:'ext-all.css'},
			{theme:'黑色',css: 'ext-all-access.css'},
			{theme:'红色',css: 'ext-all-red.css'}];
		//创建主题数据模型
		Ext.regModel('Theme', {
		    fields: ['theme','css']
		});
		//创建主题数据源
		var themeStore = Ext.create('Ext.data.Store',{
			model : 'Theme',
			data : themes
		});
		//创建主题切换选择框
		var themeChange = Ext.create('Ext.form.ComboBox',{
			id : 'themeChange',
			width : 150,
			labelWidth : 60,
			labelSeparator :'：',//分隔符
			fieldLabel:'样式选择',
			store : themeStore,
			editable : false,
			triggerAction: 'all',//单击触发按钮显示全部数据
			store : themeStore,//设置数据源
			displayField : 'theme',
			valueField : 'css',
			queryMode: 'local',//本地模式
			value:'ext-all.css',//默认风格
			listeners : {
				'collapse' : function() {
					Ext.util.CSS.swapStyleSheet('theme', 'extjs4/resources/css/'+ this.getValue());
					contentIframe.window.themeChange(this.getValue());
				}
			}
		});
		//定义panel
		Ext.create('Ext.form.FormPanel',{
			title:'Ext.form.ComboBox本地数据源示例',
			renderTo: Ext.getBody(),
			bodyPadding: 5,
			frame : true,
			height:100,
			270,
			defaults:{//统一设置表单字段默认属性
				labelSeparator :'：',//分隔符
				labelWidth : 70,//标签宽度
				width : 200,//字段宽度
				labelAlign : 'left'//标签对齐方式
			},
			items:themeChange
		});
});
```
15、格式化字符串示例：
Javascript代码
1. var str = "<table width='300' cellspacing=1 border=1 cellpadding=1><tr><td>table string</td></tr></table>";
2. var str1 = " aV";
3. var dat = new Date();
4. var str2 = 12345;
5. var str3 = 1.2345;
6. Ext.Msg.alert(
7. "提示",
8. "原str为:"+str+"<br>ellipsis(str,5)后为:<br>"+Ext.util.Format.ellipsis(str,5)+"<br><br>"+
9. "原strl为:"+str1+"<br>进行capitalize(str1)后为:<br>"+Ext.util.Format.capitalize(str1)+"<br>"+
10. "<br>原dat为:<br>"+dat+"<br>"+
11. "进行date(dat,'yyyy/mm/dd')后为:<br>"+Ext.util.Format.date(dat)+"<br><br>"+
12. "注意调用htmlDecode(str)后展现出来的是一个带边框的表格:<br>"+Ext.util.Format.htmlDecode(str)+"<br>"+
13. "原strl:"+str1+"<br>经过lowercase后为:<br>"+Ext.util.Format.lowercase (str1)+
14. "<br>原str2:"+str2+",经过number后为:"+Ext.util.Format.number(str2,"-1234.0")+
15. "<br>原str3:"+str2+",经过number后为:"+Ext.util.Format.round(str3,2)
16. );
18. //通过用字符串描述一个对象
19. var jsonStr = "{name:'the json name', value: 'the json sample'}";
20. //将该字符串进行编码，这时将形成一个含有逻辑关系的对象
21. var obj = Ext.JSON.decode(jsonStr,true);
22. //定义一些对象，最后用数组包装起来
23. var g='g',h='h',e =[g,h],f='f',b=[e,f],a = [b,'c'];
24. //将该数组中存放的对象进行解码，打印该字符串
25. var endA = Ext.JSON.encode(a);
26. Ext.Msg.alert('提示',endA);
```
var str = "&lt;table width='300' cellspacing=1 border=1 cellpadding=1><tr><td>table string</td></tr></table>";
var str1 = " aV";
var dat = new Date();
var str2 = 12345;
var str3 = 1.2345;
Ext.Msg.alert(
	"提示",
	"原str为:"+str+"<br>ellipsis(str,5)后为:<br>"+Ext.util.Format.ellipsis(str,5)+"<br><br>"+
	"原strl为:"+str1+"<br>进行capitalize(str1)后为:<br>"+Ext.util.Format.capitalize(str1)+"<br>"+
	"<br>原dat为:<br>"+dat+"<br>"+
	"进行date(dat,'yyyy/mm/dd')后为:<br>"+Ext.util.Format.date(dat)+"<br><br>"+
	"注意调用htmlDecode(str)后展现出来的是一个带边框的表格:<br>"+Ext.util.Format.htmlDecode(str)+"<br>"+
	"原strl:"+str1+"<br>经过lowercase后为:<br>"+Ext.util.Format.lowercase (str1)+
	"<br>原str2:"+str2+",经过number后为:"+Ext.util.Format.number(str2,"-1234.0")+
	"<br>原str3:"+str2+",经过number后为:"+Ext.util.Format.round(str3,2)
);		

//通过用字符串描述一个对象
var jsonStr = "{name:'the json name', value: 'the json sample'}";
//将该字符串进行编码，这时将形成一个含有逻辑关系的对象
var obj = Ext.JSON.decode(jsonStr,true);
//定义一些对象，最后用数组包装起来
var g='g',h='h',e =[g,h],f='f',b=[e,f],a = [b,'c'];
//将该数组中存放的对象进行解码，打印该字符串
var endA = Ext.JSON.encode(a);
Ext.Msg.alert('提示',endA);
```
16、MixedCollection示例(还有first，get等方法):
Javascript代码
1. var item = new Ext.util.MixedCollection();
2. var item2 = new Ext.util.MixedCollection();
3. var a = {name:'a'};
4. var b = {name:'b'};
5. item.add('01',a);
6. item.add('01',b);
7. item2.add('01',a);
8. item2.add('02',a);
9. Ext.Msg.alert('提示','当已存在关联的索引时往01关联以象,item的个数为:'+item.length+'<br>'+'当不存在关联的索引往索引关联对象,item的个数为:'+item2.length);
```
var item = new Ext.util.MixedCollection();
var item2 = new Ext.util.MixedCollection();
var a = {name:'a'};
var b = {name:'b'};
item.add('01',a);
item.add('01',b);
item2.add('01',a);
item2.add('02',a);
Ext.Msg.alert('提示','当已存在关联的索引时往01关联以象,item的个数为:'+item.length+'<br>'+'当不存在关联的索引往索引关联对象,item的个数为:'+item2.length);
```
Javascript代码
1. var item = new Ext.util.MixedCollection();
2. var arr = [];
3. arr.push({name:'a'});
4. arr.push({name:'b'});
5. item.addAll(arr);
6. Ext.Msg.alert('提示','原item中的对象个数为:'+item.length+'<br>当加入arr数组中的两个对象后item中的对象个数为:'+item.length);
```
var item = new Ext.util.MixedCollection();
		var arr = [];
		arr.push({name:'a'});
		arr.push({name:'b'});
		item.addAll(arr);
		Ext.Msg.alert('提示','原item中的对象个数为:'+item.length+'<br>当加入arr数组中的两个对象后item中的对象个数为:'+item.length);
```
Javascript代码
1. var item = new Ext.util.MixedCollection();
2. var arr = [{name:'a'},{name:'b'}];
3. item.clear();
4. Ext.Msg.alert('提示','当调用clear()后item的对象个数为:'+item.length);
```
var item = new Ext.util.MixedCollection();
var arr = [{name:'a'},{name:'b'}];
item.clear();
Ext.Msg.alert('提示','当调用clear()后item的对象个数为:'+item.length);
```
Javascript代码
1. var item = new Ext.util.MixedCollection();
2. item.addAll([{name:'a'},{name:'b'}]);
3. var col = new Ext.util.MixedCollection();
4. col = item.clone();
5. item.clear();
6. Ext.Msg.alert('提示','当调用item的clone()后返回的col的对象个数为:'+col.length);
```
var item = new Ext.util.MixedCollection();
item.addAll([{name:'a'},{name:'b'}]);
var col = new Ext.util.MixedCollection();
col = item.clone();
item.clear();
Ext.Msg.alert('提示','当调用item的clone()后返回的col的对象个数为:'+col.length);
```
Javascript代码
1. var item = new Ext.util.MixedCollection();
2. var obja = {name:'a'};
3. item.add('obj1',obja);
4. Ext.Msg.alert('提示','集合中是否含有以obj1为关联索引的对象:'+item.containsKey('obj1')+'<br>集合中是否含有对象obja:'+item.contains(obja));
```
var item = new Ext.util.MixedCollection();
var obja = {name:'a'};
item.add('obj1',obja);
Ext.Msg.alert('提示','集合中是否含有以obj1为关联索引的对象:'+item.containsKey('obj1')+'<br>集合中是否含有对象obja:'+item.contains(obja));
```
Javascript代码
1. var item = new Ext.util.MixedCollection();
2. var obja = {name:'a'};
3. item.add('obj1',obja);
4. item.add('obj2',{name:'b'});
5. item.each(function(tempObj){
6. tempObj.name='newA';
7. Ext.Msg.alert('提示','通过调用each后的名称为:'+tempObj.name);
8. });
```
var item = new Ext.util.MixedCollection();
var obja = {name:'a'};
item.add('obj1',obja);
item.add('obj2',{name:'b'});
item.each(function(tempObj){
	tempObj.name='newA';
	Ext.Msg.alert('提示','通过调用each后的名称为:'+tempObj.name);
});
```
Javascript代码
1. var item = new Ext.util.MixedCollection();
2. item.on('add',function(index,o,key){
3. Ext.Msg.alert('提示','    当前有对象加入,加入后的index是:'+index+'<br>    该对象的name是:'+o.name+'<br>    加入对应的key是:'+key);
4. });
5. item.add('obj2key',{name:'nobj2name'});
```
var item = new Ext.util.MixedCollection();
item.on('add',function(index,o,key){
	Ext.Msg.alert('提示','&nbsp;&nbsp;&nbsp;&nbsp;当前有对象加入,加入后的index是:'+index+'<br>&nbsp;&nbsp;&nbsp;&nbsp;该对象的name是:'+o.name+'<br>&nbsp;&nbsp;&nbsp;&nbsp;加入对应的key是:'+key);
});
item.add('obj2key',{name:'nobj2name'});
```
Javascript代码
1. var item = new Ext.util.MixedCollection();
2. item.on('remove',function(o,key){
3. Ext.Msg.alert('提示','当前移除的对象的name是:'+o.name+'<br>其key是:'+key);
4. });
5. item.add('obj2key',{name:'nobj2name'});
6. item.removeAtKey('obj2key');
```
var item = new Ext.util.MixedCollection();
item.on('remove',function(o,key){
	Ext.Msg.alert('提示','当前移除的对象的name是:'+o.name+'<br>其key是:'+key);
});
item.add('obj2key',{name:'nobj2name'});
item.removeAtKey('obj2key');
```
Javascript代码
1. var item = new Ext.util.MixedCollection();
2. var obj1 = {name:'obj1Name'};
3. var obj2 = {name:'obj2Name'};
4. item.add('obj1Key',obj1);
5. item.replace('obj2Key',obj1);
6. item.on('replace',function(key, oldO, newO){
7. Ext.Msg.alert('提示','当前被替换的对象的name是:'+oldO.name+'<br>其key是:'+key+'<br>新对象的name是:'+newO.name);
8. });
9. item.replace('obj2Key',obj2);
```
var item = new Ext.util.MixedCollection();
var obj1 = {name:'obj1Name'};
var obj2 = {name:'obj2Name'};
item.add('obj1Key',obj1);
item.replace('obj2Key',obj1);
item.on('replace',function(key, oldO, newO){
	Ext.Msg.alert('提示','当前被替换的对象的name是:'+oldO.name+'<br>其key是:'+key+'<br>新对象的name是:'+newO.name);
});
item.replace('obj2Key',obj2);
```
17、线程运行实例：
Javascript代码
1. var task ={
2. run:function(){
3. Ext.Msg.alert('提示','线程已经运行!我将每次运行将重复5次!但10秒后我将停止!');
4. },
5. interval:1000,
6. repeat:5,
7. duration:10000
8. };
9. var task1 = new Ext.util.TaskRunner();
10. task1.start(task);
```
var task ={
	run:function(){
		Ext.Msg.alert('提示','线程已经运行!我将每次运行将重复5次!但10秒后我将停止!');
	},
	interval:1000,
	repeat:5,
	duration:10000
};
var task1 = new Ext.util.TaskRunner();
task1.start(task);
```
18、获得文本块的高和宽示例：
Javascript代码
1. var t = new Ext.util.TextMetrics('id01',5);
2. Ext.Msg.alert("测试","通过getSize('the text')取得的文本块的宽度是:"+t.getSize('the text').width+
3. "<br>通过getHeight('new text test')取得的文本块的高度是:"+t.getHeight('new text test')+
4. "<br>measure('id01','重新测试方法',3)方法测试"+Ext.util.TextMetrics.measure('id01','重新测试方法',3).width);
```
var t = new Ext.util.TextMetrics('id01',5);
Ext.Msg.alert("测试","通过getSize('the text')取得的文本块的宽度是:"+t.getSize('the text').width+
"<br>通过getHeight('new text test')取得的文本块的高度是:"+t.getHeight('new text test')+
"<br>measure('id01','重新测试方法',3)方法测试"+Ext.util.TextMetrics.measure('id01','重新测试方法',3).width);
```
19、键盘绑定对象示例：
Javascript代码
1. var el = Ext.get("id01");
2. var nav = new Ext.KeyNav(el,{
3. "left" : function(e){
4. alert('向左的按键被按下了');
5. //this.moveLeft(e.ctrlKey);
6. },
7. "right" : function(e){
8. alert('向右的按键被按下了');
9. //this.moveRight(e.ctrlKey);
10. },
11. "enter" : function(e){
12. alert('回车键被按下了');
13. //this.save();
14. },
15. scope : el
16. });
17. nav.enable();
相关阅读:
gsoap 学习 1-自己定义接口生成头文件
 arcgis for silverlight 鼠标点击地图获取当前经纬度
 远程桌面服务器和本机粘贴板共享
 开源ORM
Memcached
Visual Studio一些插件
 asp.net 中的事务
 (转载)轻量级表达式树解析框架Faller
冒泡排序
 （转）理解POCO
原文地址：https://www.cnblogs.com/luluping/p/2243766.html