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

最新推荐文章于 2020-08-25 13:35:18 发布

最新推荐文章于 2020-08-25 13:35:18 发布 · 134 阅读

Exjs学习笔记专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了Ext.util CSS类的使用方法，包括创建样式、获取规则、切换样式表、移除样式及更新样式规则。同时，还展示了如何利用Ext.util ClickRepeater、Ext.util.DelayedTask等实用工具类实现特定功能。涵盖了Ext.js框架中多个关键组件的应用实例。

1.Ext.util.CSS

createStyleSheet( String cssText, String id ) : StyleSheet

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

结果：

.c{color:red}

<style>

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

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

获取指定的css的信心

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

swapStyleSheet( String id, String url ) : void

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

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++;
			}
})

removeStyleSheet( String id ) : void

移除元素上的CSS。

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

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

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

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

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

3.Ext.util.DelayedTask 代替setTimeout

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

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

Ext.onReady(function() {
	// 1.ellipsis() : void
	var str = "www.uspcat.com";
	// alert(Ext.util.Format.ellipsis(str,10));
        //return www.uspcat...

	// 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  //eg: \n --> <br/>
	alert(Ext.util.Format.nl2br("asd\n123"))
        
 });

5.Ext.util.MixedCollection 集合类

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

从集合中得到单个的对象

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

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

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

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

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