Extjs学习笔记(十) 工具包util

1.Ext.util.CSS

   createStyleSheet( String cssText, String id ) : StyleSheet

创建一个ID="red" 内容为.c{color:red}的CSS样式

结果：

<style id="red" type="text/css">

   .c{color:red}

<style>

 

 

Js代码  

1. // Ext.util.CSS  
2. // 1.createStyleSheet( String cssText, String id ) : StyleSheet  
3. Ext.util.CSS.createStyleSheet(".c{color:red}", "red");  
4. Ext.get("d1").addClsOnOver("c");  

 getRule( String/Array selector, Boolean refreshCache ) : CSSStyleRule

获取指定的css的信心

Js代码  

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

 

 swapStyleSheet( String id, String url ) : void

切换元素使用的.css 文件。

Js代码  

1. var i = 1;  
2. Ext.get("b1").on("click", function() {  
3.     if (i % 2 == 0) {  
4.         Ext.util.CSS.swapStyleSheet("one", "one.css");  
5.         Ext.get("d2").addClsOnOver("col")  
6.         i++;  
7.     } else {  
8.         Ext.util.CSS.swapStyleSheet("two", "two.css");  
9.         Ext.get("d2").addClsOnOver("col")  
10.         i++;  
11.             }  
12. })  

removeStyleSheet( String id ) : void

移除元素上的CSS。

Js代码  

1. Ext.get("b2").on("click", function() {  
2.     Ext.util.CSS.removeStyleSheet("red");  
3.     });  

 updateRule( String/Array selector, String property, String value ) : Boolean

Js代码  

1. Ext.get("b3").on("click", function() {  
2.     Ext.util.CSS.updateRule(".c", "color", "#990055");  
3.     });  

 

2.Ext.util.ClickRepeater  click的转发器是Ext.util.Observable的子类

Js代码  

1. Ext.onReady(function() {  
2.     // 控制元素在指定时间内被单击(如果该元素没有数去焦点)  
3.     var cl = new Ext.util.ClickRepeater(Ext.get("b4"), {  
4.                 delay : 3000,// 首次单击时候的间隔事件  
5.                 interval : 4000,// 发生首次重复事件调用之后每一次事件的相隔时间  
6.                 stopDefault : true,// 停止这个el上得默认单击事件  
7.                 handler : function() {  
8.                     alert("单击我");  
9.                 }  
10.             });  
11.         // 第一次单击马上会触发事件 如果不去点击其他的元素那么3秒或就会自定执行第二次  
12.         // 一或会以4秒的间隔执行相应的程序  
13.         // 用途 类似VS的挤房器,网络忙的时候请等待的功能  
14.     });  

 

3.Ext.util.DelayedTask 代替setTimeout

Js代码  

1. Ext.onReady(function() {  
2.     var dt = new Ext.util.DelayedTask(function() {  
3.                 alert("-----");  
4.             });  
5.     Ext.get("b5").on("click", function() {  
6.                 dt.delay(4000);  
7.                 dt.cancel();  
8.             });  
9.         // dt.cancel();？？？  
10.     });  

 

4.Ext.util.Format 格式化的公共类

Js代码  

1. Ext.onReady(function() {  
2.     // 1.ellipsis() : void  
3.     var str = "www.uspcat.com";  
4.     // alert(Ext.util.Format.ellipsis(str,10));  
5.         //return www.uspcat...  
6.   
7.     // 2.capitalize( ) : void   
8.           首字母大写  
9.     // alert(Ext.util.Format.capitalize(str));  
10.   
11.     // 3.date( String/Date value, String format ) : String  
12.     // alert(Ext.util.Format.date(new Date(),"Y年-m月-d日"));  
13.   
14.     // 4.substr( String value, Number start, Number length ) : String  
15.     // alert(Ext.util.Format.substr(str,0,5));  
16.   
17.     // 5.lowercase( String value ) : String  
18.     // alert(Ext.util.Format.lowercase("USPCAT.COM"))  
19.   
20.     // 6.number( Number v, String format ) : String  
21.     // alert(Ext.util.Format.number("12344556.7892","0,000.00"))  
22.   
23.     // 7.nl2br( String The ) : String  //eg: \n --> <br/>  
24.     alert(Ext.util.Format.nl2br("asd\n123"))  
25.           
26.  });  

 

5.Ext.util.MixedCollection 集合类

1.集合类中的add( String key, Object o ) : Object

Js代码  

1. var item1 = new Ext.util.MixedCollection();  
2.     var a = {  
3.         name : 'a'  
4.     };  
5.     var b = {  
6.         name : 'b'  
7.     };  
8.     item1.add("01", a);  
9.     item1.add("02", b);  
10.     // alert(item1)  

 2.addAll( Object/Array objs ) : void

Js代码  

1. var item2 = new Ext.util.MixedCollection();  
2.     var array = [];  
3.     array.push(a);  
4.     array.push(b);  
5.     item2.addAll(array);  
6.     // alert(item2)  

 3.clear( ) : void

Js代码  

1. item2.clear();  
2. // alert(item2)1  

 4.clone( ) : MixedCollection

Js代码  

1. var item3 = item1.clone();  
2.     // alert(item3)  

 5.contains( Object o ) : Boolean containsKey( String key ) :Boolean

判断集合中是否有相应的对象

Js代码  

1. // alert(item1.contains(a));  
2. // alert(item1.containsKey("01"));  

 6.each( Function fn, [Object scope] ) : void

Js代码  

1. item1.each(function(item) {  
2. // alert(item.name)  
3.             });  

 7.get( String/Number key ) : Object

从集合中得到单个的对象

Js代码  

1. // get( String/Number key ) : Object  
2. // first( ) : Object  
3. // alert(item1.get("01").name);  
4. // alert(item1.first().name);  

  8.集合的有关事件 
    // add,clear,remove,replace

Js代码  

1. item1.on("add", function(index, o, key) {  
2.     alert("集合item1有了一个新的成员 : " + key)  
3. });  

6.Ext.util.TaskRunner 模拟线程控制

Js代码  

1. Ext.onReady(function() {  
2.             var runner = new Ext.util.TaskRunner();  
3.             var task = {  
4.                 run : function() {  
5.                     Ext.getDom("t1").value = Ext.util.Format.date(new Date(),  
6.                             "Y-m-d-s");  
7.                 },  
8.                 interval : 1000  
9.             }  
10.             runner.start(task);  
11.             Ext.get("b6").on("click", function() {  
12.   
13.                         runner.stop(task);  
14.                     });  
15.         });