10extjs util 的讲解

1.ext.util.css就是添加一些css的操作。  下面的代码就是将一个css进行创建，后面的参数是创建的xs

		Ext.util.CSS.createStyleSheet(".c{color:red}","red");
		Ext.get("d1").addClsOnOver("c");

将css赋给一个id为d1的元素。

2.第二个代码就是将一个css样式读出来，这样就可以获取里面的所有的参数了。

var cssobj = Ext.util.CSS.getRule(".c",true);
		//alert(cssobj.style.color)

</pre>就是说可以传入一个样式表的名字这样就可以获取样式表的所有的数值了。<p></p><p>3.动态的更换样式表（点击按钮实现样式表的更换）。</p><p></p><p>4.删除一个样式表（同样也是点击一个按钮进行相应的触发）。</p><p></p><p>5.更新样式表（点击按钮进行更换）</p><p>将一个存在的样式表进行更新。</p><p></p><p>6.下面上代码</p><p><pre name="code" class="javascript">(function(){
	Ext.onReady(function(){
//Ext.util.CSS
//1.createStyleSheet( String cssText, String id ) : StyleSheet
		Ext.util.CSS.createStyleSheet(".c{color:red}","red");
		Ext.get("d1").addClsOnOver("c");
//2.getRule( String/Array selector, Boolean refreshCache ) : CSSRule
		var cssobj = Ext.util.CSS.getRule(".c",true);
		//alert(cssobj.style.color)
//3.swapStyleSheet( String id, String url ) : void
		var i = 1;
		Ext.get("b1").on("click",function(){
			if(i%2==0){
				Ext.util.CSS.swapStyleSheet("one","one.css");
				Ext.get("d2").addClsOnOver("col")
				i++;
			}else{
				Ext.util.CSS.swapStyleSheet("two","two.css");
				Ext.get("d2").addClsOnOver("col")				
				i++;
			}			
		})
//4.removeStyleSheet( String id ) : void	
		Ext.get("b2").on("click",function(){
			Ext.util.CSS.removeStyleSheet("red");
		});
//5.updateRule( String/Array selector, String property, String value ) : Boolean
		Ext.get("b3").on("click",function(){
			Ext.util.CSS.updateRule(".c","color","#990055");
		});
	})
})()

页面上的代码

	<br><div id='d1'>123456</div>
	
	<br><br><br>
	<div id="d2">asdfghj</div>
	<input type="button" value="change" id="b1">
	
	<br><br><br>
	<div id="d3" class="c">请移除我身上的样式</div><br>
	<input type="button" value="remove" id="b2">
	
	<br><br><br>
	<div id="d4" class="c">更新我身上的样式</div><br>
	<input type="button" value="update" id="b3">	

7.extjs直接实例化一个类

千万不要忘记new 关键字

8.在extjs的文档中要是一个参数是：el 就是说可以通过extjs的get方法可以得到这个元素。或者是直接使用ext.getCmp()就好了。

9.下面讲解了一个可以实现重复点击的类

10.下面讲解一个类可以实现按照指定的时间执行一个函数（比如两秒之后执行这个函数）

这个可以拖延执行时间。

代码：

Ext.onReady(function(){
	var dt = new Ext.util.DelayedTask(function(){
		alert("-----");
	});
	Ext.get("b5").on("click",function(){
		dt.delay(4000);
		dt.cancel();
	});
	//dt.cancel();
})

11.格式化。

比如eliplis 这个方法，可以只是读到指定的长度的，然后其余的用... 进行代替。

代码中的第二个例子就是将一个字符串的首字母转换为大写。

第三个就是格式化日期的操作。

第四个是截取一个字符串的操作。

第五个将所有的字母变为小写

第六个就是将数字表示格式进行转换，将不同的国家的习惯进行统一。

第七个就是将js的换行符直接转换为<br>

下面就是代码：

Ext.onReady(function(){
	//1.ellipsis() : void
	var str = "www.uspcat.com";
		//alert(Ext.util.Format.ellipsis(str,10));
	//2.capitalize( ) : void
	 	//alert(Ext.util.Format.capitalize(str));
	//3.date( String/Date value, String format ) : String
		//alert(Ext.util.Format.date(new Date(),"Y年-m月-d日"));
	//4.substr( String value, Number start, Number length ) : String
		//alert(Ext.util.Format.substr(str,0,5));
	//5.lowercase( String value ) : String
		//alert(Ext.util.Format.lowercase("USPCAT.COM"))
	//6.number( Number v, String format ) : String
		//alert(Ext.util.Format.number("12344556.7892","0,000.00"))
	//7.nl2br( String The ) : String
	alert(Ext.util.Format.nl2br("asd\n123"))
})

12. 对象集合类

注意第一种方法里面的使用一个对象的add的方法和使用items的方法这样就达到了等同的效果。

第二个里面使用的push方法就是一种使用原生态的方法。这就是数组的添加的原生态的方法。

注意item里面的方法，要是一个变量根本不知道是什么，就将他进行alert。 然后这样再用firebug进行查看这个对象中到底有什么就好了。

第三种就是清除对象里面的所有的item项。

代码：

Ext.onReady(function(){
	//1.集合类中的add( String key, Object o ) : Object
	var item1 = new Ext.util.MixedCollection();
	var a = {name:'a'};
	var b = {name:'b'};
	item1.add("01",a);
	item1.add("02",b);
	//alert(item1)
	//2.addAll( Object/Array objs ) : void
	var item2 = new Ext.util.MixedCollection();
	var array = [];
	array.push(a);
	array.push(b);
	item2.addAll(array);
	//alert(item2)
	//3.clear( ) : void
	item2.clear();
	//alert(item2)1
	//4.clone( ) : MixedCollection
	var item3 = item1.clone();
	//alert(item3)
	/**
	 * 5.判断集合中是否有相应的对象
	 * contains( Object o ) : Boolean
	 * containsKey( String key ) : Boolean
	 */
	//alert(item1.contains(a));
	//alert(item1.containsKey("01"));
	//6.each( Function fn, [Object scope] ) : void
	item1.each(function(item){
		//alert(item.name)
	});
	//7.从集合中得到单个的对象
	//get( String/Number key ) : Object
	//first( ) : Object
	//alert(item1.get("01").name);
	//alert(item1.first().name);
	//集合的有关事件
	//add,clear,remove,replace
	item1.on("add",function(index,o,key ){
		alert("集合item1有了一个新的成员 : "+key)
	});
	//item1.add("03",{name:'c'});

})

 

13.时间间隔运行器，就是通过时间间隔从而运行函数。通过两个按钮进行开始和停止。

页面代码：

	<input type="text" value="timeout" id="t1">
	<input type="button" value="stop" id="b6">

下面是js代码：

Ext.onReady(function(){
	var runner = new Ext.util.TaskRunner();
	var task = {
		run:function(){
			Ext.getDom("t1").value = Ext.util.Format.date(new Date(),"Y-m-d-s");
		},
		interval:1000
	}
	runner.start(task);
	Ext.get("b6").on("click",function(){
	
		runner.stop(task);
	})
})