`
韩悠悠
  • 浏览: 841841 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Ext.get

阅读更多

Ext中的get、getDom、getCmp、getBody、getDoc的区别
2008-06-16 10:02
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对象返回,该方法不带任何参数。


本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/aikesi117/archive/2009/08/22/4473076.aspx

分享到:
评论

相关推荐

    Ext.get与Ext.fly的区别

    ### Ext.get与Ext.fly的区别 在Ext JS框架中,`Ext.get`和`Ext.fly`是两个非常重要的方法,它们主要用于操作DOM元素。理解这两个方法之间的区别以及如何使用它们对于开发高质量、高效率的应用程序至关重要。 #### ...

    Ext.get与Ext.fly 的区别

    在EXTJS这个强大的JavaScript框架中,`Ext.get`和`Ext.fly`是两个非常重要的方法,它们都用于操作DOM元素,但它们之间存在着微妙的差异。了解这些差异对于优化代码性能和理解EXTJS的工作机制至关重要。 首先,`Ext....

    Ext.data.Store的基本用法

    ### Ext.data.Store的基本用法详解 #### 一、Ext.data.Store简介 `Ext.data.Store`是ExtJS框架中用于管理数据的核心组件之一。它主要负责数据的存储、加载、更新等操作,并且提供了多种方法来方便地处理这些数据。...

    Ext.window从右下角弹出/隐藏

    winElm = Ext.get(this.id); Ext.TaskMgr.start({ run: function () { if (self.winYtmp &gt;= self.winYtop) { if (self.hidden == true) self.show(); Ext.TaskMgr.start(self.upTask); } else { Ext....

    Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式

    前面写的get()和query()我都省略参数了,先看看文档中的函数原型: Ext.get( Mixed el ) : Element Parameters: el : Mixed The id of the node, a DOM Node or an existing Element. Returns: Element The Element ...

    Ext.Ajax.request2.x实现同步请求

    method: 'GET', // 或者 'POST' async: false, // 设置为同步 success: function(response, opts) { // 请求成功后的回调函数 }, failure: function(response, opts) { // 请求失败后的回调函数 } }); ``` ...

    Ext.Ajax.request跨域

    标题"Ext.Ajax.request跨域"指出我们将探讨如何使用ExtJS库中的Ajax模块进行跨域请求。Ext.Ajax.request是ExtJS提供的一种发起Ajax请求的方式,它允许开发者向服务器发送异步HTTP请求。然而,由于浏览器的同源策略...

    3------通过实例学习------Ext.js------.pdf

    `Ext.fly`是另一个与`Ext.get`相似但略有不同的方法,它主要用于一次性操作DOM元素,可以减少内存消耗,适用于只需要执行一次操作的情况。 学习Ext.js不仅是学习其API和组件,更重要的是理解其背后的MVC(Model-...

    3------通过实例学习------Ext.js------.docx

    `Ext.get`和`Ext.getBody`是两个常用的DOM访问方法,前者允许通过ID获取元素,后者则可以直接获取`&lt;body&gt;`元素。注意,尽管在HTML中应避免ID重复,但`Ext.get`在遇到相同ID时会返回最后一个匹配的元素。 通过这种...

    Ext.js核心函数详解.docx

    10. `Ext.getDom( Mixed el )`: 根据提供的ID、DOM节点或`Ext.Element`对象,返回对应的DOM元素。 11. `Ext.getDoc()`和`Ext.getBody()`: 分别返回文档对象和Body对象,返回的是`Ext.Element`包装的对象,而不是...

    Ext.ux.tree.treegrid异步加载

    ### Ext.ux.tree.TreeGrid 异步加载知识点详解 #### 一、Ext.ux.tree.TreeGrid简介 在ExtJS框架中,`Ext.ux.tree.TreeGrid`组件是一种结合了树形结构与表格显示特性的控件,适用于展示具有层级关系的数据。通过...

    Ext中以get开头的方法使用

    ### Ext中以get开头的方法使用 #### 一、引言 在前端开发领域,Ext JS 是一款非常流行的JavaScript框架,它提供了丰富的用户界面组件库,帮助开发者快速构建高性能的企业级Web应用程序。Ext JS中提供了多种实用的...

    Ext.Ajax.request 小问题收集

    在EXTJS框架中,`Ext.Ajax.request`是进行异步AJAX通信的核心方法,它提供了与服务器端交互的能力,支持GET、POST等多种HTTP请求方式。这篇文章将深入探讨`Ext.Ajax.request`的使用,以及在实际应用中可能遇到的小...

    使用Ext.UpdateManager实现页面任意部分自动刷新处理

    Ext.get("loggedInAgents").dom.innerHTML = "&lt;b&gt;&lt;em&gt;" + loggedInAgents + "&lt;/em&gt;&lt;/b&gt;"; }); ``` 5. **启动自动刷新**: 最后,调用startAutoRefresh方法来设置自动刷新的时间间隔以及从服务器获取数据的URL:...

    [Ext 3.x + Ext 2.x] 下拉树 Ext.ux.ComboBoxTree

    `getNodes.jsp`则可能是用于获取树形结构节点数据的接口。在实际应用中,当用户展开树节点时,这个页面会被调用,动态加载子节点数据,提高用户体验,避免一次性加载大量数据导致页面卡顿。 在使用`ComboBoxTree`时...

    Ext中文版手册最新版

    创建`Ext.Element`实例非常简单,只需调用`Ext.get`方法,并传入目标元素的ID即可。例如: ```javascript var el = Ext.get('myElementId'); ``` 通过`console.dir(el)`,可以在控制台查看`Ext.Element`实例的详细...

Global site tag (gtag.js) - Google Analytics