Extjs-常用函数

最新推荐文章于 2020-12-31 23:55:29 发布

itlwc

最新推荐文章于 2020-12-31 23:55:29 发布

阅读量2.8k

点赞数

分类专栏： Extjs 文章标签：浏览器 ext html

本文链接：https://blog.youkuaiyun.com/itlwc/article/details/7883522

版权

Extjs 专栏收录该内容

42 篇文章

订阅专栏

1. onReady()

Ext需要操作HTML中的DOM内容,只有页面完全下载到客户端并被浏览器完全解析后,我们才可以启动Ext执行预先设置的功能,我们可以使用这个函数来实现这项功能

2.get 函数

Ext中以get开头的函数,可以用来获取HTML中的DOM对象,当前HTML中的组件和Ext元素等,但是在使用时要注意区分获取的对象类型

3.get()

get函数用来获取EXT元素,也就是类型为Ext.Element的对象.
Ext.Element类是Ext对DOM的封装,每一个Element对象都对应着HTMl中的一个DOM元素.
我们可以为DOM创建一个Element对象,并且通过Element对象中的函数来实现对DOM的指定操作
例如可以使用hide()函数隐藏元素,使用initDD函数为指定的DOM添加拖放特性等,
get函数其实是Ext.Element.get的简写
get()函数中只有一个参数,但这个参数可以表示多含义.
它可以是DOM节点的id,也可以是一个Element,或者是一个DOM节点对象

<script type="text/javascript">
	Ext.onReady(function(){
		//这三个函数都是获取一个与DOM节点lwc对应的EXT元素
		//方法一,下面两个方法是一样的
		alert(Ext.get('lwc'));
		alert(new Ext.Element('lwc'));
		//方法二
		alert(document.getElementById('lwc'));
	});
</script>

Ext.Element('MyDiv')与document.getElementById('MyDiv')获取对象是不同的
Ext.Element('MyDiv')虽然可以获取指定id的元素,但失去了EXT提供的常用操作,如动画,CSS
如果我们想通过Ext的get()函数获取指定id的HTML中对应的实际DOM对象,我们使用

Ext.get('MyDiv').dom

示例

<style type="text/css">
	.red {
	    background: red;
	}
</style>
<script type="text/javascript">
	Ext.onReady(function(){
		//第一步:获取Element对象
		var myDiv = new Ext.get('lwc');
		//第二步:用获取的Element对象定义简单动画
		myDiv.highlight();//突出显示,然后渐退
		myDiv.addClass('red');//指定样式表
		myDiv.center();//居中显示
		//myDiv.setOpacity(.25);//半透明效果
		/*
			第三步:实现渐变动画效果
			虽然MyDiv.setWidth(100)可以设置MyDiv的高度,但是无法实现渐变的动画效果
			我们使用MyDiv.setWidth(100,true)第二个参数是打开动画效果
		*/
		//myDiv.setWidth(100,true);
		//第三步:还可以这样控制动画效果
		myDiv.setWidth(100,{
			//表示间隔,数字越大越慢
			duration : 2,
			//动画执行完成执行的回调函数
			callback : function(){
				alert('渐变成功');
			},
			//callback的作用域
			scope : this
		});
	});
</script>

4.getCmp()

ExtCmp()用来获取Ext组件,也就是在页面上被初始化了的Component或者子类对象
ExtCmp函数可以根据指定的id获取对应的Ext.Component.
Ext.getCmp()是Ext.ComponentMgr.get()的简写形式.
Ext中创建每个组件都会注册到ComponentMgr中,只要得到它的id,就会获得对应的组件

<script type="text/javascript">
	Ext.onReady(function(){
		var p = new Ext.Panel({
			id : 'p',
			title : '旧标题',
			width : 300,
			height : 200
		});
		new Ext.Viewport({
			items : [p]
		});
		//一种方法,在内部用
		p.setTitle('新标题');
		//二种方法,在外部用
		Ext.getCmp('p')setTitle('新标题');
	});
</script>

5.getDom()

getDom函数能够获得文档中的DOM节点,它只包含一个参数,该参数可以是DOM节点的id,DOM节点的对象或者DOM节点对应的Ext元素等
Ext.getDom()可以看作是Ext.get().dom

<script type="text/javascript">
	//这三个方法返回的是同一个DOM节点对象,getDOM函数将根据参数的类型自动获取我们所需的结果
	Ext.onReady(function(){
		//第一种方法
		Ext.getDom('lwc')
		//第二,三种方法
		var e = new Ext.Element('lwc');
		Ext.getDom(e);
		Ext.getDom(e.dom);
	});
</script>

6.getBody()

可以直接获取文档中的document.body这个DOM节点对应的Ext元素,该方法不带任何参数
实质就是把document.body对象封装成EXT元素并作为结果返回

例如下面代码会把面板h直接渲染到body元素上

<script type="text/javascript">
	Ext.onReady(function(){
		var h = new Ext.Panel({
			title : '测试',
			width : 300,
			height : 200
		});
		h.render(Ext.getBody());
	});
</script>

7.getDoc()

getDoc函数可以将当前HTML文档对象document封装成EXT的Element对象并返回,该方法不带任何参数
getBody只能用于显示,getDoc包含了更多对页面的操作

8.query()和select()

上面的方法都只能获取单个元素
如果我们需要批量获取元素就使用query函数和select函数
query函数是Ext.DomQuery.select()的简写方法,query函数返回的都是原生的DOM对象,需要进行遍历,然后再将它们转换为Ext.Element对象
query函数和select函数的区别是:
query()返回数组,我们只能循环迭代处理
select()返回一个Ext.CompositeElement类型的对象,对于select返回的对象,我们还可以调用它提供的各种函数并执行特殊的操作

<style type="text/css">
	.red {
	    background: red;
	}
</style>
<script type="text/javascript">
	Ext.onReady(function(){
		//使用select()函数,获取p元素,突出显示,然后渐退
		Ext.select('p').highlight();
		//使用query函数
		function selectQ(){
			var array = Ext.query('div');
			for(var i=0;i<array.length;i++){
				Ext.get(array[i]).highlight();
			}
		}
		selectQ();
	});
</script>
    </head>
    <body>
        <p>p1</p>
        <br>
        <div class="red">div.red1</div>
        <br>
        <p>p2</p>
        <br>
        <div class="red">div.red2</div>
        <br>
        <p>p3</p>
        <br>
    </body>
</html>

8.1 CSS元素选择符

在函数query和select中我们通过CSS元素选择来批量获取HTML页面中的元素

Ext.query('span')		获取HTML中所有span元素
Ext.query('span','foo')	获取id='foo'元素下的所有span元素
Ext.query('#foo')		获取id='foo'的标签
Ext.query('.foo')		获取class='foo'的标签
Ext.query('*')			使用通配符,它会获取HTML中的所有标签
Ext.query('div p')		获取处于div标签下的所有p标签
Ext.query('div,p,span')	获取所有div, span和p标签

8.2CSS属性选择符

除了可以根据HTML中的标签id,class进行查找外,我们还可以根据HTML的属性进行查找

Ext.query('*[name]')		获取所有包含name属性的元素
Ext.query('*[name=bar]')	获取所有name属性等于bar的元素
Ext.query('*[name!=bar]')	获取所有name属性不等于bar的元素
Ext.query('*[name^=b]')		获取所有name属性以b开头的元素
Ext.query('*[name$=r]')		获取所有name属性以r结尾的元素
Ext.query('*[name*=a]')		获取所有name属性包含a的元素

8.3CSS值选择符
我们还可以对HTML元素的style属性包含的CSS样式的数值进行查找

Ext.query('*{color=red}')	获得所有style='color:red'的标签
Ext.query('*{color=red}
		*{color=pink}')		所有style='color:red'元素下style='color:pink'的标签
Ext.query('*{color!=red}')	获得所有color的值不等于red的标签
Ext.query('*{color^=b}')	获得所有color的值以b开头的标签
Ext.query('*{color$=r}')	获得所有color的值以r结尾的标签
Ext.query('*{color*=a}')	获得所有color的值包含a的标签

9.JavaScript encodeURIComponent()函数

encodeURIComponent() 函数可把字符串作为URI组件进行编码。
语法:
encodeURIComponent(URIstring)
URIstring必需,一个字符串,含有 URI 组件或其他要编码的文本.
说明:
该方法不会对ASCII字母和数字进行编码,也不会对这些ASCII标点符号进行编码

10.encode()和decode()
这两个函数是专门用来对JSON数据进行编码和解码的函数
10.1Ext.encode()
encode函数的作用是对对象,数组或其他值进行编码,将对象转换成JSON字符串形式

Ext.encode('abcd')

因为HTTP协议只能发送字符串形式的参数,所以无法将javascirpt中的对象传递给后台,
就需要先Ext.encode函数进行对Javascirpt对象进行编码,生成JSON字符串,再传后台
HTTP请求只能发送ISO-8859-1编码格式,中文传送还需要先转换为ISO-8859-1

encodeURIComponent(Ext.encode('你好吗'));

10.2Ext.decode()

decode()函数作用是将字符串解析为JSON对象,但被解析的字符串必须符合JSON要求的字符串格式,如果字符串无效将抛出法语错误

11.extend()

11.1javascript的继承写法

<script type="text/javascript">
	//定义一个名字为BaseClass的类
	var BaseClass = function(){};
	//定义两个函数
	BaseClass.prototype.someMethod = function(){};
	BaseClass.prototype.overridenMethod = function(){};
	//定义一个子类
	var SubClass = function(){
		//调用BaseClass的构造函数初始化数据
		BaseClass.call(this);
	};
	//这条语句让SubClass类获的BaseClass所有属性和函数
	SubClass.prototype = new BaseClass();
</script>

11.2Ext的继承写法

<script type="text/javascript">
	Ext.onReady(function(){
		//定义一个名字为BaseClass的类
		var BaseClass = function(){};
		//定义两个函数
		BaseClass.prototype.someMethod = function(){};
		BaseClass.prototype.overridenMethod = function(){};
		//定义一个子类
		var SubClass = function(){
			//直接访问父类构造器
			SubClass.superclass.constructor.call(this);
		};
		Ext.extend(SubClass,BaseClass,{
			newMethod : function(){}
		});
		/*
			如果父类构造器需要传入参数可以使用
			SubClass.superclass.constructor.call(this,config);
		*/
	});
</script>

12.apply()和applyIf()
12.1Ext.apply()是将一个对象中的所有属性复制到另外一个对象

var a = {desc : '123'};
var b = {desc : '4565'};
Ext.apply(b,a);
//会覆盖b以前的,打印结果123
alert(b.desc);

12.2Ext.applyIf()如果另外一个对象已经存在不会覆盖

var a = {desc : '123'};
var b = {desc : '456'};
Ext.applyIf(b,a);
//不会覆盖b以前的,打印结果456
alert(b.desc);

13.namespace()

Ext.namespace函数的作用是把出入的参数转换为对象,
使用该方法的主要目的是区分名称相同的类,这个与java的package作用类似

待补充...

14.isEmpty()

isEmpty函数可以判断传入的参数值是否为空,当参数值为null,undefined或者空字符串,isEmpty函数都返回true
isEmpty不能判断数组和对象,如果判断都会返回false

var param1 = null;
var param1 = undefined;
var param1 = '';
Ext.isEmpty(param1);//都会返回true的

15.each()

Ext.each(array,fn) 的作用是遍历array,并且对每项分别调用fn函数,如果array不是数组,则只执行一次,
如果某项调用fn返回false,那么遍历将结束退出,后面的array将不会遍历,
遍历过程中,每次为fn传入的参数分别为当前遍历的数组元素,当前元素索引和包含原数组所有数据的array变量

当需要对数组中每一个元素进行相同操作的时候可以使用这个函数,它会迭代数组,将每一个元素都传入预先定义的回调函数.

<script type="text/javascript">
	Ext.onReady(function(){
		var array = [1,2,3,4,5,6];
		var sum = 0;
		Ext.each(array,function(item){
			//item是每一个值
			sum +=item;
		});
		alert(sum);
	});
</script>

如果回调函数中包含了this引用,就需要使用Ext.each函数进行迭代循环时指定回调函数执行范围

<script type="text/javascript">
	Ext.onReady(function(){
		var array = [1,2,3,4,5,6];
		Lwc = {
			sum : 0,
			fn : function(item){
				this.sum +=item
			}
		}
		//第三个参数是范围
		Ext.each(array,Lwc.fn,Lwc);
		alert(Lwc.sum);
	});
</script>

有时候需要当前循环的索引值,使用预留的另外两个参数

<script type="text/javascript">
	Ext.onReady(function(){
		var array = [1,2,3,4,5,6];
		var sum = 0;
		Ext.each(array,function(item,index,allArray){
			//item是每一个值
			sum +=item;
			alert(index+' - '+allArray)
		});
		alert(sum);
	});
</script>

16.Ext.DomQuery().select()

在进行批量查询和批量更新时,DomQuery无疑是最佳选择
16.1设置所有标签的span的样式
效果图

代码

<script type="text/javascript">
	Ext.onReady(function(){
		array = Ext.DomQuery.select('span');
	    Ext.each(array, function(elem) {
	        elem.style.backgroundColor = 'red';
	    });
	});
</script>
    </head>
    <body>
     <div id="root1">
        <span class="span1">span 1</span>
        <span class="span2">span 2</span>
      </div>
      <div id="root2">
        <span class="span3">span 3</span>
      </div>
    </body>
</html>

16.2设置id=root1的div标签内部span标签
效果图

代码

<script type="text/javascript">
	Ext.onReady(function(){
		array = Ext.DomQuery.select('div#root1>span');
	    Ext.each(array, function(elem) {
	        elem.style.backgroundColor = 'red';
	    });
	});
</script>
    </head>
    <body>
     <div id="root1">
        <span class="span1">span 1</span>
        <span class="span2">span 2</span>
      </div>
      <div id="root2">
        <span class="span3">span 3</span>
      </div>
    </body>
</html>

16.3设置id=root1的div标签下所有class为span1的span标签
效果图

代码

<script type="text/javascript">
	Ext.onReady(function(){
		array = Ext.DomQuery.select('div#root1>span.span1');
	    Ext.each(array, function(elem) {
	        elem.style.backgroundColor = 'red';
	    });
	});
</script>
    </head>
    <body>
     <div id="root1">
        <span class="span1">span 1</span>
        <span class="span2">span 2</span>
        <span class="span1">span 11</span>
      </div>
      <div id="root2">
        <span class="span3">span 3</span>
      </div>
    </body>
</html>

16.4元素选择符

*	  		匹配所有元素
E	  		匹配标签为E的元素
E F	  		匹配所有包含在E标签中的F标签
E>F or E/F	匹配所有包含在E标签中,作为直接子节点的F标签元素
E+F	   		匹配所有直接前驱节点为F标签的E标签
E~F	   		匹配所有前驱节点为F标签的E标签

16.5属性选择符

E[foo]		匹配所有拥有foo属性值的E标签	   
E[foo=bar]	匹配所有拥有foo属性值等于bar的E标签	
E[foo^=bar]	匹配所有拥有foo属性值以bar开头的E标签	
E[foo$=bar]	匹配所有拥有foo属性值以bar结尾的E标签	
E[foo*=bar]	匹配所有拥有foo属性值包含bar的E标签	
E[foo%=2]	匹配所有拥有foo属性值可以被2整除的E标签	
E[foo!=bar]	匹配所有拥有foo属性不等于bar的E标签

16.6伪劣

E:first-child		匹配所有当前标签是本身父节点的第一个子节点的元素	   
E:last-child		最后一个	 
E:nth-child(0)		第几个,索引从1开始	 
E:nth-child(odd)	奇数子节点	
E:nth-child(even)	偶数子节点	
E:only-child		匹配父节点唯一的子节点元素	
E:checked			check属性为true	
E:frist				结果集为的第一个元素	
E:last				最后一个	
E:nth(0)			当前标签第N个元素	
E:odd				奇数	
E:even				偶数	
E:contains(foo)		标签的innerHTML属性值包含foo
					<E>xxfooxx</E>
E:nodeValue(foo)	标签的textValue或者nodeValue值为foo	
					<E>foo</E>
E:not(s)			标签不匹配简单选择符S	E:not(E.e1)
					<E class='e1'></E><E class='e2'></E>只返回<E class='e2'></E>
E:has(s)			标签有一个后继与简单选择符S匹配	E.has(F.f)
					<E><F class='f'></F><E>
E:next(s)			标签后一个兄弟标签与简单选择符S匹配	E.next(F.f)
					<E></E><F class='f'></F>
E: prev (s)			标签后一个兄弟标签与简单选择符S匹配	E.prev(F.f)
					<F class='f'></F><E></E>

16.7CSS选择值

E{display=none}		匹配所有CSS的display值为none的元素
E{display^=none}	开头
E{display$=none}	结尾
E{display*=none}	包含
E{display%=2}		除
E{display!=none}	不等于

17.Ext.DomHelper

使用DomHelper生成小片段
17.1Ext.DomHelper.append()
DomHelper.append()函数,会将新生成的节点放到指定节点的最后面
效果图

代码

<script type="text/javascript">
	Ext.onReady(function(){
		/*
		这段代码表示向id=parent的元素中添加一个p元素,并且为这个div指定red的CSS样式
		第二个参数都有会为新生成的元素的属性,下面4个特殊属性除外
		*/
		Ext.DomHelper.append('parent',{
			tag : 'p',//指定生成的标签类型
			cls : 'red',//表示HTML标签中的class属性,因为class是javascript的关键字不可以使用
			//children : [],//指定子节点,它的值是一个数组,数组包含了对相应子节点的定义
			html : 'append child'//对应标签的innerHTML的值,如果children太繁琐,可以使用它来设置HTML内容
		});
	});
</script>
    </head>
    <body>
     <div id='parent'></div>
     <div id='parent2'></div>
    </body>
</html>

17.2Ext.DomHelper.insertBefore()

DomHelper.insertBefore()函数,将会将新生成的节点插入到指定节点的前面

效果图

代码

<script type="text/javascript">
	Ext.onReady(function(){
		Ext.DomHelper.insertBefore('parent',{
			tag : 'p',
			cls : 'red',
			html : 'insert before child'
		});
	});
</script>
    </head>
    <body>
     <div id='parent'></div>
     <div id='parent2'></div>
    </body>
</html>

17.3Ext.DomHelper.insertAfter()

DomHelper.insertAfter()函数,将会将新生成的节点插入到指定节点的后面
效果图

代码

<script type="text/javascript">
	Ext.onReady(function(){
		Ext.DomHelper.insertAfter('parent',{
			tag : 'p',
			cls : 'red',
			html : 'insert after child'
		});
	});
</script>
    </head>
    <body>
     <div id='parent'></div>
     <div id='parent2'></div>
    </body>
</html>

17.3Ext.DomHelper.overwrite()

DomHelper.overwrite()函数,将会替换指定节点的innerHTML内容
效果图

代码

<script type="text/javascript">
	Ext.onReady(function(){
		Ext.DomHelper.overwrite('parent',{
			tag : 'p',
			cls : 'red',
			html : 'over write child'
		});
	});
</script>
    </head>
    <body>
     <div id='parent'></div>
     <div id='parent2'></div>
    </body>
</html>

17.4children属性
效果图

代码

<script type="text/javascript">
	Ext.onReady(function(){
		Ext.DomHelper.append('parent',{
			tag : 'ul',
			cls : 'red',
			children : [{
				tag : 'li',
				html : 111
			},{
				tag : 'li',
				html : 222
			},{
				tag : 'li',
				html : 333
			}]
		});
	});
</script>
    </head>
    <body>
     <div id='parent'></div>
    </body>
</html>

17.4Ext.DomHelper.applyStyles()

applyStyles()函数可以指定DOM元素指定的CSS样式,我们可以通过字符串,JSON对象,回调函数,设置CSS样式

<script type="text/javascript">
	Ext.onReady(function(){
		//通过字符串
		Ext.DomHelper.applyStyles('parent1','background-color:red');
		//使用JSON对象
		Ext.DomHelper.applyStyles('parent2',{
			'background-color':'green',
			'font-weight':'bold'
		});
		//通过回调函数
		Ext.DomHelper.applyStyles('parent3',function(){
			var time = new Date().getTime();
			if(time%2==0){
				return 'background-color:yellow';
			}else{
				return 'background-color:blue';
			}
		});
			
	});
</script>
    </head>
    <body>
     <div id='parent1'>111</div>
     <div id='parent2'>222</div>
     <div id='parent3'>333</div>
    </body>
</html>

17.5.Ext.DomHeper.createTemplate()函数

createTemplate函数可以直接创建一个模版对象,
下面我们使用createTemplate函数将DomHelper和Template这两种HTML生成方式结合起来

效果图

代码

<%@ page language="java"  pageEncoding="UTF-8"%>
<%	String rootpath = request.getContextPath();%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/resources/css/ext-all.css"/>
	<script type="text/javascript" src="<%=rootpath%>/ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-all.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-all-debug.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-lang-zh_CN.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/PagingMemoryProxy.js"></script>
	<style type="text/css">
		.red {
		    background: red;
		}
    </style>
	<script type="text/javascript" defer>
		Ext.onReady(function (){
			var tpl = new Ext.DomHelper.createTemplate({
				tag : 'tr',
				children : [{
					tag : 'td',
					html : '{0}'
				},{
					tag : 'td',
					html : '{1}'
				},{
					tag : 'td',
					html : '{2}'
				},{
					tag : 'td',
					html : '{3}'
				}]
			});
			
			//创建新模版后调用它来编译,现在可以通过这个生成我们需要的HTML的内容了
			tpl.compile();
			
			var data = [
				['1','male','李文超','李文超描述'],
				['2','female','蛋蛋','蛋蛋描述'],
				['3','male','道士','道士描述'],
				['4','female','懒蛋','懒蛋描述'],
				['5','male','吖男','吖男描述']
			];
			
			for(var i = 0;i<data.length;i++){
				/*
					第一个参数对应HTML中的一个表格,我们使用Ext提供的模版将JSON数据的每一行都转换为HTML,
					并添加到指定的table标签中,最终的显示结果包含5行数据的表格
				*/
				tpl.append('element',data[i]);
			}
		});
    </script>
   </head>
   <body>
       <table border="1" id="element">
	       <tr>
	           <td>id</td>
	           <td>sex</td>
	           <td>name</td>
	           <td>descn</td>
	       </tr>
       </table>
    </body>
</html>