当前位置: 代码迷 >> Web前端 >> Ext中的get、getDom、getCmp、getBody、getDoc的差别 (转)
  详细解决方案

Ext中的get、getDom、getCmp、getBody、getDoc的差别 (转)

热度:176   发布时间:2012-08-28 12:37:01.0
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 对象返回,该方法不带任何参数。