`
tmartin
  • 浏览: 104853 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

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>

 

 

// 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);
					});
		});
 
分享到:
评论

相关推荐

    ExtJS学习笔记.doc

    ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc

    extJs 2.1学习笔记

    目录 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 ...28. extJs 2.0学习笔记(ext.js篇) 77

    Extjs4.0学习笔记

    Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式,就是Ext.create(....),而且可以使用动态加载JS的方式来加快组件的渲染,我们再也不必一次加载已经...ExtJS4学习笔记(十)---ExtJS4图片验证码的实现

    Extjs 5 学习笔记

    ### Extjs 5 学习笔记之 SenchaCmd 深入解析 #### 一、SenchaCmd 的简介 SenchaCmd 是一个跨平台的命令行工具,它为基于 ExtJS 和 Sencha Touch 应用程序的开发周期提供了全面的支持。从创建应用程序的基础结构到...

    界面框架extjs学习笔记

    EXTJS in Action 是一本专为学习EXTJS编写的书籍,但这里我们主要关注学习笔记中的关键知识点。 首先,EXTJS的目录结构非常重要,因为它包含了所有必要的资源和源码: 1. `adapter`:这部分包含了适配器,用于将...

    ExtJs学习笔记 ExtJs Api

    适合ExtJs开发人员extjs技术上手以及深入

    ExtJs简明教程+Extjs学习笔记

    ExtJs简明教程+Extjs学习笔记,来源网络,免费奉送,我讨厌需要资源分~

    语言程序设计资料:ExtJs学习笔记-2积分.doc

    语言程序设计资料:ExtJs学习笔记-2积分.doc

    ExtJs学习笔记.pdf

    ### ExtJs 学习笔记知识点总结 #### 一、初识 ExtJs ##### 1.1 入门 - **背景介绍**: - **ExtJs**:一款强大的JavaScript库,用于构建现代化的Web应用程序。它提供了一系列丰富的UI组件、布局管理器以及数据...

    extjs 学习心得笔记

    在探讨《ExtJS学习心得笔记》这一主题时,我们不仅会深入理解ExtJS框架的核心概念与实践技巧,还会从新手的角度出发,提炼出一系列有助于快速上手的学习策略,避免常见的学习陷阱,确保学习过程高效而有成效。...

    ExtJs学习笔记,共30讲

    这个学习笔记涵盖了从基础到高级的多个主题,帮助读者深入理解ExtJs的核心概念和技术。以下是一些关键知识点的详细说明: 1. **ExtJs 结构树**:这部分内容可能涉及ExtJs如何构建可自定义的用户界面组件树,包括...

    Extjs学习笔记有用

    ExtJS 是一个强大的JavaScript框架,主要用于构建富客户端Web应用程序。...学习ExtJS可以帮助开发者快速构建功能丰富的、交互性强的Web应用。通过深入理解和实践,可以提升开发效率,创建出符合现代Web标准的用户界面。

    ExtJS资料笔记(extjs各个属性的详解)

    ExtJS资料笔记(extjs各个属性的详解) ExtJS资料笔记(extjs各个属性的详解) ExtJS资料笔记(extjs各个属性的详解)

    extjs4 学习笔记源码

    exjts4 学习笔记源码,源码包含windws,hbox,vbox和Grid的应用,其中grid介绍比较多。下载解压后,部署后就可以使用,所有代码均在demo文件夹下。更多extjs4教程,请关注http://www.mhzg.net

Global site tag (gtag.js) - Google Analytics