`
langgufu
  • 浏览: 2309302 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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 对象返回,该方法不带任何参数。

分享到:
评论

相关推荐

    Ext中以get开头的方法使用

    **getBody方法** 直接返回文档中与`document.body`这个DOM节点对应的`Ext.Element`对象。此方法不带任何参数。 **语法**: ```javascript Ext.getBody() ``` **示例**: ```javascript Ext.onReady(function(){ var...

    EXT核心API详解.doc

    例如,`Ext.getBody()`可以获取当前文档的body对象,`Ext.getDom()`则可以由ID或DOM节点获取对应的DOM元素。 2. **addBehaviors**: 这个方法用于批量添加事件监听器。它允许你使用一种简洁的方式来为多个选择器绑定...

    Ext.js核心函数详解.docx

    11. `Ext.getDoc()`和`Ext.getBody()`: 分别返回文档对象和Body对象,返回的是`Ext.Element`包装的对象,而不是原始DOM对象。 12. `Ext.getCmp( String id )`: 根据HTML元素的ID获取对应的`Ext.Component`对象。这...

    EXT核心API详解

    以上是EXT框架中部分核心API的详细介绍,这些API不仅涵盖了DOM操作、事件绑定、数据处理等方面,还涉及到了类的继承和扩展等高级特性,为开发者提供了强大的工具箱。理解并熟练掌握这些API将极大地提高开发效率,...

    ext整理的一些知识

    若想从Grid中获取特定行的数据,可以使用`Ext.getCmp("GridID").getStore().getAt("行数")`,其中`"GridID"`是Grid组件的ID,`"行数"`是希望获取的行的索引。进一步获取某列的具体值,可以在获取到行的基础上,使用`...

    Ext js2.1 最新资料汇总

    var domNode = getDom('#some-id'); ``` #### 16. `id([Mixed el], [String prefix]):String` 为对象 `el` 生成一个唯一 ID。如果对象已有 ID,则不会改变。 **示例代码:** ```javascript var uniqueId = id...

    Ext Grid数据导出到Excel

    ### Ext Grid 数据导出到Excel知识点详解 #### 一、背景与目的 在现代Web应用开发中,数据展示和管理是十分重要的环节。对于大型的数据表格(Grid),开发者经常需要提供一个导出功能,以便用户可以将当前显示的...

    extjs核心api详解

    文章最后提到了Ext类的一些常用方法,如addBehaviors、apply、applyIf、decode、destroy、each、encode、escapeRe、extend、fly、get、getBody、getCmp等。这些方法提供了丰富的功能,如事件绑定、对象拷贝、JSON...

    Extjs的Tree和Tab使用json做tree数据交互

    var tabPanel = Ext.getCmp('myTabPanel'); // 获取TabPanel if (!tabPanel.hasItem(record.getId())) { // 如果Tab不存在 tabPanel.add({ title: record.get('text'), // Tab标题取自树节点的文本 bodyHtml: '...

Global site tag (gtag.js) - Google Analytics