Ext中的get、getDom、getCmp、getBody、getDoc的区别
Ext中的get、getDom、getCmp、getBody、getDoc的区别
Ext中包含了几个以get开头的方法,这些方法可以用来得到文档中DOM、得到当前文档中的组件、得到Ext元素等,在使用中要注意区别使用。
◇get方法
get方法用来得到一个Ext元素,也就是类型为Ext.Element的对象,Ext.Element类是Ext对DOM的封装,代表DOM的元素,可以为每一个DOM创建一个对应的Element对象,可以通过Element对象上的方法来实现对DOM指定的操作,比如用hide方法可以隐藏元素、initDD方法可以让指定的DOM具有拖放特性等。get方法其实是Ext.Element.get的简写形式。
get方法中只有一个参数,这个参数是混合参数,可以是DOM节点的id、也可以是一个Element、或者是一个DOM节点对象等。看下面的示例代码:
Java代码
Ext.onReady(function(){
var e=new Ext.Element("hello");
alert(Ext.get("hello"));
alert(Ext.get(document.getElementByIdx("hello")));
alert(Ext.get(e));
});
Html页面中包含一个id为hello的div,代码如下:
<div id="hello">tttt</div>
Ext.onReady(function(){ var e=new Ext.Element("hello"); alert(Ext.get("hello")); alert(Ext.get(document.getElementByIdx("hello"))); alert(Ext.get(e)); }); Html页面中包含一个id为hello的div,代码如下: <div id="hello">tttt</div>
Ext.get("hello")、Ext.get(document.getElementByIdx("hello"))、Ext.get(e)等三个方法都可以得到一个与DOM节点hello对应的Ext元素。
◇getCmp方法-获得Ext组件
getCmp方法用来获得一个Ext组件,也就是一个已经在页面中初始化了的Component或其子类的对象,getCmp方法其实是Ext.ComponentMgr.get方法的简写形式。getCmp方法中只有一个参数,也就是组件的id。比如下面的代码:
Java代码
Ext.onReady(function(){
var h=new Ext.Panel({
id:"h2",
title:" ",
renderTo:"hello",
width:300,
height:200
});
Ext.getCmp("h2").setTitle("新的标题");
});
Ext.onReady(function(){ var h=new Ext.Panel({ id:"h2", title:" ", renderTo:"hello", width:300, height:200 }); Ext.getCmp("h2").setTitle("新的标题"); });
在代码中,我们使用Ext.getCmp("h2").来得到id为h2的组件,并调用其setTitle方法来设置该面板的标题。
◇getDom方法-获得DOM节点
getDom方法能够得到文档中的DOM节点,该方法中包含一个参数,该参数可以是DOM节点的id、DOM节点对象或DOM节点对应的Ext元素(Element)等。比如下面的代码:
Java代码
Ext.onReady(function(){
var e=new Ext.Element("hello");
Ext.getDom("hello");
Ext.getDom(e);
Ext.getDom(e.dom);
});
Html:<div id="hello">tttt</div>
Ext.onReady(function(){ var e=new Ext.Element("hello"); Ext.getDom("hello"); Ext.getDom(e); Ext.getDom(e.dom); }); Html:<div id="hello">tttt</div>
在上面的代码中,Ext.getDom("hello")、Ext.getDom(e)、Ext.getDom(e.dom)等三个语句返回都是同一个DOM节点对象。
◇getBody方法-得到文档的body节点元素(Element)
该方法直接得到文档中与document.body这个DOM节点对应的ExtJS元素(Element),实质就是把document.body对象封装成ExtJS元素对象返回,该方法不带任何参数。比如下面的代码把面板h直接渲染到文档的body元素中。
Java代码
Ext.onReady(function(){
var h=new Ext.Panel({
title:"测试",
width:300,
height:200
});
h.render(Ext.getBody());
});
Ext.onReady(function(){ var h=new Ext.Panel({ title:"测试", width:300, height:200 }); h.render(Ext.getBody()); });
◇getDoc方法-获得与document对应的Ext元素(Element)
getDoc方法实质上就是把当前html文档对象,也就是把document对象封装成ExtJS的Element对象返回,该方法不带任何参数。
◆◆Ext中apply及applyIf方法的应用
apply及applyIf方法都是用于实现把一个对象中的属性应用于另外一个对象中,相当于属性拷贝。不同的是apply将会覆盖目标对象中的属性,而applyIf只拷贝目标对象中没有而源对象中有的属性。
apply方法的签名为“apply( Object obj, Object config, Object defaults ) : Object”,该方法包含三个参数,第一个参数是要拷贝的目标对象,第二个参数是拷贝的源对象,第三个参数是可选的,表示给目标对象提供一个默认值。可以简单的理解成把第三个参数(如果有的话)及第二个参数中的属性拷贝给第一个参数对象。看下面的代码:
Javascript代码
var b1={
p1:"p1 value",
p2:"p2 value",
f1:function(){alert(this.p2)}
};
var b2=new Object();
b2.p2="b2 value";
Ext.apply(b2,b1);
b2.f1();
var b1={ p1:"p1 value", p2:"p2 value", f1:function(){alert(this.p2)} }; var b2=new Object(); b2.p2="b2 value"; Ext.apply(b2,b1); b2.f1();
在上面的代码中,Ext.apply(b2,b1)这一语句把b1的属性拷贝到了b2对象中,因此调用b2的f1方法可以弹出"p2 value"的提示信息。尽管b2对象已经包含了p2属性值,但拷贝后该属性值会被覆盖。可以在调用apply方法时,在第三个参数中指定拷贝属性的默认值,比如下面的代码:
Javascript代码
Ext.apply(b2,b1,{p3:"p3 value"});
alert(b2.p3);
Ext.apply(b2,b1,{p3:"p3 value"}); alert(b2.p3);
这样会使得b2中包含一个p3的属性,值为"p3 value"。
applyIf方法的功能跟apply一样,只是不会拷贝那些在目标对象及源对象都存在的属性。比如把前面演示apply方法的代码改成applyIf,如下:
Javascript代码
Ext.applyIf(b2,b1);
b2.f1();
Ext.applyIf(b2,b1); b2.f1();
由于b2中已经存在了p2属性,因此,b2.f1()方法中引用this.p2的时候,得到的是"b2 value",而不是在b1中定义的"p2 value"。
◆◆Ext中键盘事件
Java代码
var form = new Ext.form.FormPanel({
baseCls: 'x-plain',
layout:'absolute',
url:'save-form.php',
defaultType: 'textfield',
keys:[{
key: [13],
fn:function() {
alert('您按了回车键!');
}
}],
items: [{
x: 0,
y: 5,
xtype:'label',
text: 'Send To:'
},{
x: 60,
y: 0,
name: 'to',
anchor:'100%'
}]
});
var form = new Ext.form.FormPanel({ baseCls: 'x-plain', layout:'absolute', url:'save-form.php', defaultType: 'textfield', keys:[{ key: [13], fn:function() { alert('您按了回车键!'); } }], items: [{ x: 0, y: 5, xtype:'label', text: 'Send To:' },{ x: 60, y: 0, name: 'to', anchor:'100%' }] });
◆◆Ext中触发按钮单击事件
Java代码
Ext.getCmp('myButtonId').focus();
Ext.getCmp('myButtonId').focus();
◆◆EXTJS同步方式请求
Java代码
var conn = Ext.lib.Ajax.getConnectionObject().conn;
conn.open("GET", listSecretariesUrl, false);
conn.send(null);
//获取响应的json字符串
var respText = Ext.decode(conn.responseText); //若符合JSON规范,转化为JSON数组
◆◆EXTJS decode encode方法
Ext.decode 等价于 Ext.util.JSON.decode() 将符合JSON规范的字符串转化为js数组或对象
Ext.encode 等价于 Ext.util.JSON.encode() 将js数组或对象转化为符合JSON规范的字符串
Ext中的get、getDom、getCmp、getBody、getDoc的区别的更多相关文章
- Ext中 get、getDom、getCmp的区别
getDom方法能够得到文档中的DOM节点,该方法中包含一个参数,该参数可以是DOM节点的id.DOM节点对象或DOM节点对应的Ext元素(Element)等. (与getElementById是一个 ...
- 9. Ext基础1 -- Ext中 getDom、get、getCmp的区别
转自:https://blog.csdn.net/huobing123456789/article/details/7982061 要学习及应用好Ext框架,必须需要理解Html DOM.Ext El ...
- Ext中包含了几个以get开头的方法
Ext中包含了几个以get开头的方法,这些方法可以用来得到文档中DOM.得到当前文档中的组件.得到Ext元素等,在使用中要注意区别使用.1.get方法get方法用来得到一个Ext元素,也就是类型为Ex ...
- Ext中setValue和setRawValue
Ext.getCmp('modifyStatus').setValue(record.get('status').trim()); Ext.getCmp('modifyStatus').setRawV ...
- Ext中renderer用法及参数
转载处:http://blog.csdn.net/yangxiaojun9238/article/details/8240139 setHeader是设置http恳求的头是MIME 和谈的拓展可以实现 ...
- 重写Ext中的typeOf函数
重写Ext中的typeOf函数来解决Ext JS中typeOf对字符串对象.元素节点.文本节点.空白文本节点判断并不准确的问题 重写的typeOf函数使用自己实现的TypeOf函数2中的代码 测试代码 ...
- 46. Ext中namespace的作用(转)
转自:https://www.cnblogs.com/givemeanorange/p/5569954.html Ext中在每一个页面中添加一个namespace呢,就像下面的代码: // creat ...
- 在php中定义常量时,const与define的区别?
问]在php中定义常量时,const与define的区别? [答]使用const使得代码简单易读,const本身就是一个语言结构,而define是一个函数.另外const在编译时要比define快很 ...
- [转载]jQuery中wrap、wrapAll和wrapInner用法以及区别
原文地址:jQuery中wrap.wrapAll和wrapInner用法以及区别作者:伊少君 原文: <ul> <li title='苹果'>苹果</li> ...
随机推荐
- URAL题解三
URAL题解三 URAL 1045 题目描述:有\(n\)个机场,\(n-1\)条航线,任意两个机场有且只有一种方案联通.现有两个恐怖分子从\(m\)号机场出发,第一个人在机场安装炸弹,乘坐飞机,引爆 ...
- Linux删除除了今天以外的文件
[背景] 开发到日志记录功能时,每天都会产生当天的一个日志,久而久之就会产生累积,想要查看的时候,tab键无法自动补全,还要自己额外输入. 比较麻烦. [命令] 经过查找和实验,找到了以下的方法: 1 ...
- MariaDB配置远程访问权限
首先配置允许访问的用户,采用授权的方式给用户权限 1 GRANT ALL PRIVILEGES ON *.* TO 'root'@'%'IDENTIFIED BY '123456' WITH GRAN ...
- flask-login 学习(1)
今天的目标,就是学习 flask-login.争取用1天时间,掌握个大概. 第一步:掌握flask-login的大致使用,具体参考了:https://www.centos.bz/2017/09/fla ...
- 洛谷 P2788数学1(math1)- 加减算式 题解
题目传送门 这道题目可以使用C++的神奇功能: #include<bits/stdc++.h> using namespace std; int ans,t; int main(){ wh ...
- Hadoop案例(九)流量汇总案例
流量汇总程序案例 1.自定义输出 统计手机号耗费的总上行流量.下行流量.总流量(序列化) 1)需求: 统计每一个手机号耗费的总上行流量.下行流量.总流量 2)数据准备 phone_date.txt - ...
- 在WebClient类中保持Session
string url = context.Request["url"]; WebClient MyWebClient = new WebClient(); // 获取或设置用于向I ...
- 【LOJ】 #2520. 「FJOI2018」所罗门王的宝藏
题解 发现似乎相当于问一个2000个元的方程组有没有解-- 然而我懵逼啊-- 发现当成图论,两个点之间连一条边,开始BFS,每个点的值赋成边权减另一个点的点权 如果一个环不合法那么肯定无解 代码 #i ...
- java总结(二)(运算符)
算数和赋值运算符 1.变量类型溢出时候,会直接取反:出现x>x+1 2.知道a++和++a 3.知道a/0错误 a/0.0无穷大 字符串 1.知道栈区.堆区和方法区 2.知道new String ...
- Python - 软件设计规范
为什么要设计好目录结构? "设计项目目录结构",就和"代码编码风格"一样,属于个人风格问题.对于这种风格上的规范,一直都存在两种态度: 一类同学认为,这种个人风 ...