• 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="marcio_zhang@163.com";

    //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);

    });

  • 相关阅读:
    第二阶段团队冲刺第二天站立会议
    第二阶段冲刺第一天站立会议
    对身边常用的软件进行评价
    学习进度条
    进度条
    团队冲刺第四天站立会议
    用户模板及场景分析
    团队冲刺第一天战略会议
    团队冲刺第九天
    团队冲刺第八天
  • 原文地址:https://www.cnblogs.com/zhangxb/p/2503671.html
Copyright © 2020-2023  润新知