Ext中的get、getDom、getCmp、getBody、getDoc的差别 (转)
Ext
中包含了几个以
get
开头的方法，这些方法可以用来得到文档中
DOM
、得到当前文档中的组件、得到
Ext
元素等，在使用中要注意区别使用。
1
、
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
节点对象等。看下面的示例代码：
Ext.onReady(function(){
var e=new Ext.Element("hello");
alert(Ext.get("hello"));
alert(Ext.get(document.getElementById("hello")));
alert(Ext.get(e));
});
Html
页面中包含一个
id
为
hello
的
div
，代码如下：
<div id="hello">tttt</div>
Ext.get("hello")
、
Ext.get(document.getElementById("hello"))
、
Ext.get(e)
等三个方法都可以得到一个与
DOM
节点
hello
对应的
Ext
元素。
2
、
getCmp
方法－获得
Ext
组件。
getCmp
方法用来获得一个
Ext
组件，也就是一个已经在页面中初始化了的
Component
或其子类的对象，
getCmp
方法其实是
Ext.ComponentMgr.get
方法的简写形式。
getCmp
方法中只有一个参数，也就是组件的
id
。比如下面的代码：
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
方法来设置该面板的标题。
3
、
getDom
方法－获得
DOM
节点
getDom
方法能够得到文档中的
DOM
节点，该方法中包含一个参数，该参数可以是
DOM
节点的
id
、
DOM
节点对象或
DOM
节点对应的
Ext
元素
(Element)
等。比如下面的代码：
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
节点对象。
4
、
getBody
方法－得到文档的
body
节点元素
(Element)
。
该方法直接得到文档中与
document.body
这个
DOM
节点对应的
ExtJS
元素（
Element
），实质就是把
document.body
对象封装成
ExtJS
元素对象返回，该方法不带任何参数。比如下面的代码把面板
h
直接渲染到文档的
body
元素中。
Ext.onReady(function(){
var h=new Ext.Panel({title:"
测试
",width:300,height:200});
h.render(Ext.getBody());
});
5
、
getDoc
方法－获得与
document
对应的
Ext
元素
(Element)
getDoc
方法实质上就是把当前
html
文档对象，也就是把
document
对象封装成
ExtJS
的
Element
对象返回，该方法不带任何参数。