Javascript - ExtJs - 常用方法和属性
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript - ExtJs - 常用方法和属性相关的知识，希望对你有一定的参考价值。
常用方法和属性（Common methods and attributes）
ExtJs中的对象
Ext.Component
Ext组件对象，表示一个可渲染的组件。
Ext.dom.Element
Ext元素对象，通常称为Element对象，Ext.dom.Element是对html Dom元素的封装。在官方API文档中提到的Element，指的就是Ext元素对象，可别当成dom元素。Html Dom被封装为Element，Element被封装为Component组件。获取HtmlDom有两种方式：Element.dom或Element.getDom()。
Ext.dom.CompositeElement
Ext.dom.Element的集合。
Ext命名空间下的类型和方法
Ext类
Ext.onReady(callBack,scope,delay)
//delay：调用回调的延迟毫秒数，指定此参数貌似会形成死循环
//文档装载完毕将执行回调
/*===============编码解码===============*/
Ext.encode(obj)
//obj：Array | Json
//将Array或Json包装成Json格式的字符
Ext.decode(obj)
//obj：ArrayString | JsonString
//将Array字符或Json字符解码为本地Array或Json对象
Ext.urlAppend(urlhead, queryString)
//urlhead：url头部
//queryString：查询字符串
//为url追加查询字符串
Ext.urlEncode(url)
//将url字符编码，以便可以在网络间传输
/*===============选择元素、组件、存储器===============*/
Ext.select(selector)
//获取Element元素，返回CompositeElementLite[ ]
Ext.query(selector)
//获取Html Dom元素，返回Dom元素数组
Ext.get(domID | dom | Element )
//将参数所指转化为Element并返回它
var el = Ext.get("box");
Ext.fly(domID | dom | Element)
//将参数所指转化为Element并返回它，与get区别仅在于fly方法会将结果自动返回到第一次定义的变量里
var el = Ext.fly("box");
Ext.fly("box2");
Ext.fly("box3");
alert(el.dom.id); //box3
Ext.getDoc()
//获取html节点的Element表示
Ext.getBody()
//获取Body节点的Element表示
Ext.getDom(domID | dom | Element)
//获取Element的dom表示，如果需要直接操纵dom元素，此方法非常实用
Ext.getCmp(ComponentID)
//根据Ext组件的ID获取该组件对象，得到组件后可调用以set为前缀的方法去设置组件的各种属性，更多组件的查找方式参看：ExtJS 4.2 组件的查找方式
Ext.getStore(storeID)
//根据存储器的storeId获取存储器对象
/*===============迭代===============*/
Ext.each(x, fn)
//x：Array | CompositeElement
//fn：function（item、index、allItems）
//等同的方法还有：
//ArrayObj.forEach、Ext.each、Ext.Array.forEach、Ext.Array.each，
//数组对象只有forEach方法，其余类似的方法则是Ext或Ext.Array的静态方法
//退出当前循环不能使用continue，可用return作为替代
//类似的方法还有：
//Ext.Array.some()，回调函数返回为true，就终止整个循环
//Ext.Array.every()，回调函数返回为false，就终止整个循环
/*===============其它操作===============*/
Ext.typeOf(x)
//测试参数的数据类型，可能的值如下：
//undefined | null | string | number | boolean | date | function | object | array | regexp | element（dom元素） | textnode | whitspace（空的文本节点）
Ext.clone(x)
//x：object | array | dom
//克隆出独立的对象
//delay：调用回调的延迟毫秒数，指定此参数貌似会形成死循环
//文档装载完毕将执行回调
/*===============编码解码===============*/
Ext.encode(obj)
//obj：Array | Json
//将Array或Json包装成Json格式的字符
Ext.decode(obj)
//obj：ArrayString | JsonString
//将Array字符或Json字符解码为本地Array或Json对象
Ext.urlAppend(urlhead, queryString)
//urlhead：url头部
//queryString：查询字符串
//为url追加查询字符串
Ext.urlEncode(url)
//将url字符编码，以便可以在网络间传输
/*===============选择元素、组件、存储器===============*/
Ext.select(selector)
//获取Element元素，返回CompositeElementLite[ ]
Ext.query(selector)
//获取Html Dom元素，返回Dom元素数组
Ext.get(domID | dom | Element )
//将参数所指转化为Element并返回它
var el = Ext.get("box");
Ext.fly(domID | dom | Element)
//将参数所指转化为Element并返回它，与get区别仅在于fly方法会将结果自动返回到第一次定义的变量里
var el = Ext.fly("box");
Ext.fly("box2");
Ext.fly("box3");
alert(el.dom.id); //box3
Ext.getDoc()
//获取html节点的Element表示
Ext.getBody()
//获取Body节点的Element表示
Ext.getDom(domID | dom | Element)
//获取Element的dom表示，如果需要直接操纵dom元素，此方法非常实用
Ext.getCmp(ComponentID)
//根据Ext组件的ID获取该组件对象，得到组件后可调用以set为前缀的方法去设置组件的各种属性，更多组件的查找方式参看：ExtJS 4.2 组件的查找方式
Ext.getStore(storeID)
//根据存储器的storeId获取存储器对象
/*===============迭代===============*/
Ext.each(x, fn)
//x：Array | CompositeElement
//fn：function（item、index、allItems）
//等同的方法还有：
//ArrayObj.forEach、Ext.each、Ext.Array.forEach、Ext.Array.each，
//数组对象只有forEach方法，其余类似的方法则是Ext或Ext.Array的静态方法
//退出当前循环不能使用continue，可用return作为替代
//类似的方法还有：
//Ext.Array.some()，回调函数返回为true，就终止整个循环
//Ext.Array.every()，回调函数返回为false，就终止整个循环
/*===============其它操作===============*/
Ext.typeOf(x)
//测试参数的数据类型，可能的值如下：
//undefined | null | string | number | boolean | date | function | object | array | regexp | element（dom元素） | textnode | whitspace（空的文本节点）
Ext.clone(x)
//x：object | array | dom
//克隆出独立的对象
Ext.isEmpty(x, [ allowString ] )
//x：对象 | 字符
//allowString：字符是否允许空
//测试对象是否为空
//如果x=string，就需要提供allowString
//如果allowString是true，则返回false，否则返回true
/*===============销毁对象、组件===============*/
Ext.destroy(x)
//销毁组件，包括它的子组件和它注册过的事件。可一次性删除多个x，参数以逗号隔开
Ext.destroyMembers(obj, member1, member2)
//删除对象成员
/*===============为元素注册事件===============*/
Ext.addBehaviors(Json)
//Json：{ "css选择器" : fn }
//为Html元素绑定事件
//为id为box的元素，其包含的span、p的类名为pClass的元素绑定click事件
//事件名以@开头
Ext.addBehaviors({
"#box span,p.pClass@click": function (e) { }
});
//x：对象 | 字符
//allowString：字符是否允许空
//测试对象是否为空
//如果x=string，就需要提供allowString
//如果allowString是true，则返回false，否则返回true
/*===============销毁对象、组件===============*/
Ext.destroy(x)
//销毁组件，包括它的子组件和它注册过的事件。可一次性删除多个x，参数以逗号隔开
Ext.destroyMembers(obj, member1, member2)
//删除对象成员
/*===============为元素注册事件===============*/
Ext.addBehaviors(Json)
//Json：{ "css选择器" : fn }
//为Html元素绑定事件
//为id为box的元素，其包含的span、p的类名为pClass的元素绑定click事件
//事件名以@开头
Ext.addBehaviors({
"#box span,p.pClass@click": function (e) { }
});
Ext.Object类
操作对象
Ext.Object.toQueryString(string,bool)
//对字符进行Url格式化编码
//bool：默认false，如果为true则启用递归转码
var student={
name:"sam",
age:32,
score:[{name:"语文",score:90},{name:"数学",score:80}]
}
var str = Ext.Object.toQueryString(student,true);
//输出：
"name=sam&age=32&score%5B0%5D%5Bname%5D=%E8%AF%AD%E6%96%87&score%5B0%5D%5Bscore%5D=90&score%5B1%5D%5Bname%5D=%E6%95%B0%E5%AD%A6&score%5B1%5D%5Bscore%5D=80"
Ext.Object.fromQueryString(string, bool)
//对字符进行Url格式解码，
//bool：默认false，如果为true则启用递归解码
var student = {
name: "sam",
age: 32,
score: [{ name: "语文", score: 90 }, { name: "数学", score: 80 }]
}
//将student编码之后得到str
var str = "name=sam&age=32&score%5B0%5D%5Bname%5D=%E8%AF%AD%E6%96%87&score%5B0%5D%5Bscore%5D=90&score%5B1%5D%5Bname%5D=%E6%95%B0%E5%AD%A6&score%5B1%5D%5Bscore%5D=80";
var str = Ext.Object.fromQueryString(str, true);
Ext.Msg.alert(\'\', str.score[0].name + "<br>" + str.score[1].name);
Ext.Object.toQueryObjects(obj)
//将对象转化为数组，对构造查询字符串有点用
var student = {
name: "sam",
age: 32,
score: [{ name: "语文", score: 90 }, { name: "数学", score: 80 }]
}
var ary = Ext.Object.toQueryObjects("student", student, true);
var msg = "[<br>";
ary.forEach(function (item) {
msg += "<span style=\'margin-left:30px;\'></span>" + Ext.encode(item) + "<br>";
});
msg += "]";
document.write(msg);
//对字符进行Url格式化编码
//bool：默认false，如果为true则启用递归转码
var student={
name:"sam",
age:32,
score:[{name:"语文",score:90},{name:"数学",score:80}]
}
var str = Ext.Object.toQueryString(student,true);
//输出：
"name=sam&age=32&score%5B0%5D%5Bname%5D=%E8%AF%AD%E6%96%87&score%5B0%5D%5Bscore%5D=90&score%5B1%5D%5Bname%5D=%E6%95%B0%E5%AD%A6&score%5B1%5D%5Bscore%5D=80"
Ext.Object.fromQueryString(string, bool)
//对字符进行Url格式解码，
//bool：默认false，如果为true则启用递归解码
var student = {
name: "sam",
age: 32,
score: [{ name: "语文", score: 90 }, { name: "数学", score: 80 }]
}
//将student编码之后得到str
var str = "name=sam&age=32&score%5B0%5D%5Bname%5D=%E8%AF%AD%E6%96%87&score%5B0%5D%5Bscore%5D=90&score%5B1%5D%5Bname%5D=%E6%95%B0%E5%AD%A6&score%5B1%5D%5Bscore%5D=80";
var str = Ext.Object.fromQueryString(str, true);
Ext.Msg.alert(\'\', str.score[0].name + "<br>" + str.score[1].name);
Ext.Object.toQueryObjects(obj)
//将对象转化为数组，对构造查询字符串有点用
var student = {
name: "sam",
age: 32,
score: [{ name: "语文", score: 90 }, { name: "数学", score: 80 }]
}
var ary = Ext.Object.toQueryObjects("student", student, true);
var msg = "[<br>";
ary.forEach(function (item) {
msg += "<span style=\'margin-left:30px;\'></span>" + Ext.encode(item) + "<br>";
});
msg += "]";
document.write(msg);
Ext.Object.getValues(x)
//获取给定对象所有的值所组成的数组
Ext.Object.getKey(obj,value)
//根据value获取对象的key
Ext.Object.getKeys(obj)
//获取对象所有的key，key以数组返回
Ext.Function类
调用函数
Ext.Function.createDelayed(callBack,delay)
//delay：毫秒
//在指定时间后执行回调
var fn = Ext.Function.createDelayed(function () {
alert("");
}, 2000);
fn(); //2秒后弹出
Ext.Function.defer(callBack,delay)
//delay：毫秒
//在指定时间后执行回调，与createDelayed区别仅在于不需要手动调用fn
var fn = Ext.Function.defer(function () {
alert("");
}, 2000);
//delay：毫秒
//在指定时间后执行回调
var fn = Ext.Function.createDelayed(function () {
alert("");
}, 2000);
fn(); //2秒后弹出
Ext.Function.defer(callBack,delay)
//delay：毫秒
//在指定时间后执行回调，与createDelayed区别仅在于不需要手动调用fn
var fn = Ext.Function.defer(function () {
alert("");
}, 2000);
Ext.DomQuery类
过滤Html Dom Element
Ext.DomQuery.filter(HtmlDomArray, selector, nonMatches)
//selector：选择器
//nonMatches：bool，是否不取相反的结果
//从数组中筛选出符合条件的Html Dom元素，返回匹配后的新数组
<div id="sam" class="box divbox"></div>
<div id="korn" class="box divbox"></div>
<div id="leo" class="box"></div>
Ext.onReady(function () {
var els = Ext.query(".box");
els = Ext.DomQuery.filter(els, "div[class=\'divbox\']", true);
Ext.each(els, function (item, index, allItems) {
alert(item.id); //sam、korn
});
});
//selector：选择器
//nonMatches：bool，是否不取相反的结果
//从数组中筛选出符合条件的Html Dom元素，返回匹配后的新数组
<div id="sam" class="box divbox"></div>
<div id="korn" class="box divbox"></div>
<div id="leo" class="box"></div>
Ext.onReady(function () {
var els = Ext.query(".box");
els = Ext.DomQuery.filter(els, "div[class=\'divbox\']", true);
Ext.each(els, function (item, index, allItems) {
alert(item.id); //sam、korn
});
});
Ext.domHelper类
操纵Dom节点
Ext.domHelper.append(parent, x, bool)
//parent：htmlString | Ext Dom Element | Html Dom Element
//x：htmlString | Html Dom Element | Ext Dom Element | [ ] ，[ ]格式如下：
//[ { tag：\'Html标签名\' , cls : \'Html标签的类名\' , id: \'Html的ID\' , type : \'表单元素的type\' , cn:[子元素1，子元素2] , name : \'表单元素的name\' , value : \'表单元素的值或标签包含文本\',html:\'子html标签名称\' }]
//bool：是否返回Ext Dom Element，默认false，默认返回Html Dom Element
//Json\'sforHtmlSet :
//将x添加到parent所包含的末尾
//示例：
Ext.DomHelper.append("box", "<span><b>hello</b></span>", true);
//等同于
Ext.DomHelper.append("box", [
{
tag: \'span\', cn: [
{ tag: \'b\', cls: \'fontClass\', id: \'fontID\', html: \'hello world\' }
]
}
], true);
Ext.domHelper.applyStyles(Html Dom Element | Ext Dom Element, Json)
//设置css
//示例：
Ext.DomHelper.applyStyles("box", {
\'background-color\':"red",
width: 200,
height: 200,
border:"1px solid black"
});
Ext.domHelper.insertAfter(x,y)
//x：htmlString | Html Dom Element | Ext Dom Element
//y：htmlString | Html Dom Element | Ext Dom Element | [ ]，[ ]格式如下：
//[ { tag：\'Html标签名\' , cls : \'Html标签的类名\' , id: \'Html的ID\' , type : \'表单元素的type\' , cn:[子元素1，子元素2] , name : \'表单元素的name\' , value : \'表单元素的值或标签包含文本\',html:\'子html标签名称\' }]
//将y插入到x之后
Ext.domHelper.insertBefore(x,y)
//x：htmlString | Html Dom Element | Ext Dom Element
//y：htmlString | Html Dom Element | Ext Dom Element | [ ]，[ ]格式如下：
//[ { tag：\'Html标签名\' , cls : \'Html标签的类名\' , id: \'Html的ID\' , type : \'表单元素的type\' , cn:[子元素1，子元素2] , name : \'表单元素的name\' , value : \'表单元素的值或标签包含文本\',html:\'子html标签名称\' }]
//将y插入到x之前
Ext.domHelper.insertHtml(where,x,y)
//x：h
//parent：htmlString | Ext Dom Element | Html Dom Element
//x：htmlString | Html Dom Element | Ext Dom Element | [ ] ，[ ]格式如下：
//[ { tag：\'Html标签名\' , cls : \'Html标签的类名\' , id: \'Html的ID\' , type : \'表单元素的type\' , cn:[子元素1，子元素2] , name : \'表单元素的name\' , value : \'表单元素的值或标签包含文本\',html:\'子html标签名称\' }]
//bool：是否返回Ext Dom Element，默认false，默认返回Html Dom Element
//Json\'sforHtmlSet :
//将x添加到parent所包含的末尾
//示例：
Ext.DomHelper.append("box", "<span><b>hello</b></span>", true);
//等同于
Ext.DomHelper.append("box", [
{
tag: \'span\', cn: [
{ tag: \'b\', cls: \'fontClass\', id: \'fontID\', html: \'hello world\' }
]
}
], true);
Ext.domHelper.applyStyles(Html Dom Element | Ext Dom Element, Json)
//设置css
//示例：
Ext.DomHelper.applyStyles("box", {
\'background-color\':"red",
width: 200,
height: 200,
border:"1px solid black"
});
Ext.domHelper.insertAfter(x,y)
//x：htmlString | Html Dom Element | Ext Dom Element
//y：htmlString | Html Dom Element | Ext Dom Element | [ ]，[ ]格式如下：
//[ { tag：\'Html标签名\' , cls : \'Html标签的类名\' , id: \'Html的ID\' , type : \'表单元素的type\' , cn:[子元素1，子元素2] , name : \'表单元素的name\' , value : \'表单元素的值或标签包含文本\',html:\'子html标签名称\' }]
//将y插入到x之后
Ext.domHelper.insertBefore(x,y)
//x：htmlString | Html Dom Element | Ext Dom Element
//y：htmlString | Html Dom Element | Ext Dom Element | [ ]，[ ]格式如下：
//[ { tag：\'Html标签名\' , cls : \'Html标签的类名\' , id: \'Html的ID\' , type : \'表单元素的type\' , cn:[子元素1，子元素2] , name : \'表单元素的name\' , value : \'表单元素的值或标签包含文本\',html:\'子html标签名称\' }]
//将y插入到x之前
Ext.domHelper.insertHtml(where,x,y)
//x：h
以上是关于Javascript - ExtJs - 常用方法和属性的主要内容，如果未能解决你的问题，请参考以下文章
ExtJs--09--javascript对象的方法的3种写法 prototype通过原型设置方法效率最好