Extjs4.1 - Ext.util工具包详解

一、Ext.util.CSS

概述：有效的控制样式表，可以多台的删除修改以及交换

主要方法：

1.createStyleSheet创建一个css样式在head中的标签

2.getRule根据类名得到一个CSSRule的对象

3.swapStyleSheet引入一个css样式文件并指定ID

4.removeStyleSheet用指定的id来删除一个样式

5.update修改样式表中的属性值

代码实现以及注释说明：

//1.createStyleSheet(StringcssText,String id) :StyleSheet 创建一个css样式在head中的标签

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

Ext.get("d1").addClsOnOver("c");

//2.getRule(String/Arrayselector,Boolean refreshCache)根据类名得到一个CSSRule的对象，对象可以获取到里面指定属性

varcssobj=Ext.util.CSS.getRule(".c",true);

alert(cssobj.style.color);

//3.swapStyleSheet(Stringid,String url) 引入一个css样式文件并指定ID，交换样式表，将会把此样式表引入的数序靠前。多用于皮肤切换

vari=1;

Ext.get("b1").on("click",function(){

if(i%2==0){

Ext.util.CSS.swapStyleSheet("one","lession10/one.css");

Ext.get("d2").addClsOnOver("col");

i++;

}else{

Ext.util.CSS.swapStyleSheet("two","lession10/two.css");

Ext.get("d2").addClsOnOver("col");

i++;

}

});

//4.removeStyleSheet(Stringid) 用指定的id来删除一个样式

Ext.get("b2").on("click",function(){

Ext.util.CSS.removeStyleSheet("red");

});

//5.updateRule(String/Arrayselector,String property,String value) :Boolean 参数为类名、属性名、值

Ext.get("b3").on("click",function(){

Ext.util.CSS.updateRule(".c","color","#990055");

});

二、Ext.util.ClickRepeater

概述：单机一次，如果不失去焦点。系统自动会去请求 主要用于挤房器和网络忙的时候请等待的功能

直接实例化这个类，第一个参数为 组件的元素对象，第二个为配置对象

delay 首次单机时候的间隔时间

interval发生首次重复事件调用之后每一次事件的间隔时间

stopDefault停止这个el上的默认单机事件

handler执行的动作

//控制元素在指定时间内被单机(如果元素没有失去焦点)

//第一次单击马上会触发事件，如果不去点击其他的元素那么3秒后会自动执行第二次

//以后会以4秒的间隔执行相应的程序

varc1=new Ext.util.ClickRepeater(Ext.get("b4"),{

delay:3000,//首次单机时候的间隔时间

interval:4000,//发生首次重复事件调用之后每一次事件的间隔时间

stopDefault:true,//停止这个el上的默认单机事件

handler:function(){

alert("单机我");

}

});

 

三、Ext.util.DelayedTask

概述：在规定的时间之后调用函数

创建对象指定一个function为参数

主要方法：delay 参数执行时间， 表示多少时间后触发该对象的函数

cancel移除正在等待的最后一个函数

代码：

//实例化对象，并传入一个可执行的函数为参数

varc1=new Ext.util.DelayedTask(function(){

alert("-------");

});

Ext.get("b5").on("click",function(){

c1.delay(2000);//在2秒后调用，也可以传入第二个参数，参数为执行函数。

c1.cancel();//移除在最后等待的事件

});

四、Ext.util.Format

格式化表示数值和日期等

主要方法：

1.ellipsis当超过位超过指定值时，用...来表示

2.capitalize将首字母变为大写， 一般用于得到它的set和get方法的时候常用

3.date格式化输出日期，第一个传入日期对象， 第二个传入格式

4.substr截取字符串操作

5.lowercase将所有大写转化为小写

6.number讲数值以一定的格式去输入，因为各国的数值表示不同

7.nl2br将JS中的换行\n解析成<br>标签

 

代码实现：

varstr="[email protected]";

//1.ellipsis()参数第一为字符串，第二个为当超过位超过此值时，用...来表示

alert(Ext.util.Format.ellipsis(str,10));

//2.capitalize()将首字母变为大写， 一般用于得到它的set和get方法的时候常用

alert(Ext.util.Format.capitalize(str));

//3.date()格式化输出日期，第一个传入日期对象， 第二个传入格式

alert(Ext.util.Format.date(newDate(),"Y年-m月-d日"));

//4.substr截取字符串操作

alert(Ext.util.Format.substr(str,0,5));

//5.lowercase将所有大写转化为小写

alert(Ext.util.Format.lowercase("MARICO"));

//6.number讲数值以一定的格式去输入，因为各国的数值表示不同

alert(Ext.util.Format.number(123123.123123,"0,000.00"));

//7.nl2br将JS中的换行\n解析成<br>标签

alert(Ext.util.Format.nl2br("marico\nzhang"));

五、Ext.util.MixedCollection对象集合类

概述：可以增加对应的键值对，相当于java的一个Map集合，适合做缓存和静态常量，方便管理

主要方法：

1.集合类的add(String key,Object o) 添加一个对象到集合类中,也可以在第一个参数指定的相应的key值

2.addAll(Object/Arrayobjs)方法。 增加一个数组或者一个集合类

3.clear方法 移除里面所有的对象

4.clone克隆 等于复制对象

5.判断集合中是否有相应的对象 contains(Objecto) containsKey(String key) 返回一个boolean值

6.each(functionfn,[Object scope]) :void 遍历这个集合类

7.从集合中得到单个的对象

get(String/Numberkey): Object 根据key得到指定的对象

first()得到集合类中的第一个对象

8.集合的有关事件 当执行add,clear,remove,replace方法的时候可以指定触发的事件,可以on方法来指定

事件，参数一为执行什么操作，第二个是函数，函数参数第一个为这个对象的坐标，第二个为这个对象，第三个为

这个对象key值

 

代码实现：

//1.集合类的add(String key,Object o) 添加一个对象到集合类中,也可以在第一个参数指定的相应的key值

varitem1=new Ext.util.MixedCollection();

vara={name:'a'};

varb={name:'b'};

item1.add("01",a);

item1.add("02",b);

//alert(item1);

//2.addAll(Object/Arrayobjs)方法。 增加一个数组或者一个集合类

vararr=[a,b]

varitem2=new Ext.util.MixedCollection();

item2.addAll(arr);

//alert(item2);

//3.clear方法 移除里面所有的对象

item2.clear();

//alert(item2);

//4.clone克隆 等于复制对象

varitem3=item1.clone();

//alert(item3);

/*

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

* contains(Object o): 返回一个boolean值

* containsKey(String key):Boolean

* */

//alert(item3.contains(a));

//alert(item3.containsKey("01"));

//6.each(functionfn,[Object scope]) :void 遍历这个集合类

item1.each(function(item){

//alert(item.name);

});

//7.从集合中得到单个的对象

//get(String/Numberkey): Object 根据key得到指定的对象

//first()得到集合类中的第一个对象

//alert(item1.get("01").name);

//alert(item1.get(1).name);

//alert(item1.first().name);

//8.集合的有关事件

//add,clear,remove,replace

item1.on("add",function(index,o,key){

alert("集合item1有了一个新的成员："+key);

});

item1.add("03",{name:"c"});

六、Ext.util.TashRunner

概述：主要操作的为线程，可以实现线程的运行和停止，多个线程之间互不影响，与java中的多线程机制相似

1.实例化一个Ext.util.TaskRunner类的对象

2.定一个线程的对象 里面指定属性：

run指定的为function，表示线程开启后执行的函数

interval指定的为一个时间数，表示每隔多少事件执行run指定的函数

3.调用start方法开启线程 传入的一个线程的对象

4.调用stop方法停止线程，传入的是需要停止的那个线程的对象

 

varrunner=new Ext.util.TaskRunner();

vartask={

run:function(){

Ext.getDom("input").value=Ext.util.Format.date(newDate(),"Y-m-d-s");

},

interval:1000

};

runner.start(task);

Ext.get("b6").on("click",function(){

runner.stop(task);

});