Extjs-常用函数
2012-08-19 16:33
316 查看
1. onReady()
2.get 函数
3.get()
4.getCmp()
6.getBody()
例如下面代码会把面板h直接渲染到body元素上
在函数query和select中我们通过CSS元素选择来批量获取HTML页面中的元素
除了可以根据HTML中的标签id,class进行查找外,我们还可以根据HTML的属性进行查找
8.3CSS值选择符
我们还可以对HTML元素的style属性包含的CSS样式的数值进行查找
9.JavaScript encodeURIComponent()函数
这两个函数是专门用来对JSON数据进行编码和解码的函数
10.1Ext.encode()
encode函数的作用是对对象,数组或其他值进行编码,将对象转换成JSON字符串形式
11.1javascript的继承写法
12.apply()和applyIf()
12.1Ext.apply()是将一个对象中的所有属性复制到另外一个对象
14.isEmpty()
15.each()
如果回调函数中包含了this引用,就需要使用Ext.each函数进行迭代循环时指定回调函数执行范围
16.Ext.DomQuery().select()
在进行批量查询和批量更新时,DomQuery无疑是最佳选择
16.1设置所有标签的span的样式
效果图
代码
效果图
代码
效果图
代码
16.4元素选择符
使用DomHelper生成小片段
17.1Ext.DomHelper.append()
DomHelper.append()函数,会将新生成的节点放到指定节点的最后面
效果图
代码
DomHelper.insertBefore()函数,将会将新生成的节点插入到指定节点的前面
效果图
代码
DomHelper.insertAfter()函数,将会将新生成的节点插入到指定节点的后面
效果图
代码
DomHelper.overwrite()函数,将会替换指定节点的innerHTML内容
效果图
代码
效果图
代码
applyStyles()函数可以指定DOM元素指定的CSS样式,我们可以通过字符串,JSON对象,回调函数,设置CSS样式
17.5.Ext.DomHeper.createTemplate()函数
代码
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Extjs常用函数
- ExtJS中常用类和函数(自己总结的，不完全)
- Extjs常用函数介绍：
- extjs 常用函数
- ExtJS 常用工具函数
- ExtJs常用函数
- Extjs常用工具函数详解
- Extjs.Date 常用函数
- ExtJs4之常用函数
- ExtJS Date(日期)对象常用函数
- ExtJS Date(日期)对象常用函数
- Extjs.Date 常用函数
- ExtJS 常用工具函数
- 程序设计中常用的一些函数概括，很实用也很方便
- [转]SQLServer和Oracle，存储过程区别，常用函数对比
- 导数的定义（一些常用函数的求导公式）
- Delphi数学常用操作函数二
- Sqlserver常用函数例子说明
- C++学习011-常用内存分配及释放函数
- linux网络编程常用函数详解与实例（socket-->bind-->listen-->accept）