`
kidiaoer
  • 浏览: 822604 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

ExtJs中get、getDom、getCmp、getBody、getDoc的用法和区别

阅读更多
ExtJs中get、getDom、getCmp、getBody、getDoc的用法和区别

Ext, get 
Ext中常用的获取元素(get)的方法及区别 
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节点对象等。 
看下面的示例代码: 
CODE: 
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">aaa</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。 
看下面的代码: 
CODE: 
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)等。 
比如下面的代码: 

CODE: 
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元素中。 
CODE: 
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对象返回,该方法不带任何参数。
分享到:
评论

相关推荐

    extjs 常用函数.rar

    在实际开发中,`getCMP()` 和 `getDom()` 经常与其他ExtJS方法一起使用,比如事件监听、布局调整、数据绑定等。 例如,你可能需要在按钮被点击时修改一个面板的内容,可以这样写: ```javascript Ext.getCmp('...

    extjs中文文档大全

    手册将详细解析Ext Core中的组件、DOM操作和事件处理,帮助开发者理解其精简但强大的特性。 在学习这些文档时,建议首先从"EXT 中文手册"入手,了解EXT库的基本概念和组件,然后通过"ExtJS实用开发指南"掌握如何将...

    ExtJs3.3中文API.CHM_extjs3.3中文文档_

    这个“ExtJS3.3中文API.CHM”文档是为中文用户特别准备的,帮助他们更好地理解和使用ExtJS 3.3的各种功能。 CHM文件,全称是Microsoft Compiled HTML Help,是微软推出的一种帮助文件格式,它将HTML文件打包成单一...

    Extjs中文文档

    Extjs中文文档,包含Extjs的基本语法和各个类的详细说明以及用法。

    extjs中文帮助文档和英文api

    这份“extjs中文帮助文档和英文api”提供了全面的ExtJS API信息,帮助开发者理解并有效地使用这个框架。 中文帮助文档(extjs帮助文档.chm)对ExtJS的各种组件、类、方法、属性进行了详尽的解释,使得不懂英文或者...

    Extjs 中文API文档

    Extjs 中文API文档,有对Extjs相关API的中文说明

    ExtJs官方网站中文的入门指南 javascript

    通过本文档的学习,您已经掌握了ExtJs的基本使用方法,包括环境搭建、核心概念理解、基本控件使用以及Ajax通信等方面的知识。希望这些内容能够帮助您顺利入门ExtJs,为后续更深入的学习打下坚实基础。

    ExtJs 实例+ExtJs中文教程(学习extjs必备)

    文件"ExtJS 实用简明教程.pdf"很可能是这个中文教程的一部分,或者是一个独立的简明指南,它可能包含了一些关键概念的快速入门、重要组件的使用方法,以及一些实用技巧。PDF格式使得你可以离线阅读,方便随时查阅。 ...

    中文的Extjs的api手册

    通过阅读这个中文API手册,开发者可以了解每个类的功能、使用方法,以及如何将它们组合在一起创建应用程序。对于初学者来说,这是一个很好的起点;对于有经验的开发者,它则是一个重要的参考资源。

    extjs核心api详解

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

    ExtJS中文手册.pdf

    - **获取节点**:ExtJS提供了获取DOM节点的方法,例如`Ext.get()`函数,可以获取单个或多个节点。 - **选择器语法**:支持CSS选择器语法,使得获取DOM元素变得更加灵活和高效。 #### 5. 响应事件 - **事件绑定**:...

    extjs 学习心得笔记

    `Ext.getCmp()`是ExtJS中用于获取组件实例的一个非常重要的方法。当我们在ExtJS中创建组件并赋予其一个唯一的ID时,可以通过`Ext.getCmp("组件ID")`来获取这个组件的实例。例如,如果我们的代码中有这样一个组件: ...

    extjs 6 gettng started

    本书旨在帮助读者理解和开始使用 ExtJS 6。 - **统一框架**:ExtJS 6 聚焦于为所有平台提供一个统一的框架,旨在消除开发桌面应用和移动应用之间的界限。 - **用户体验**:ExtJS 在单页应用(SPA)领域处于领先地位...

    Extjs+Gride使用方法

    通过以上步骤,你已经掌握了基本的ExtJS Gride使用方法。当然,ExtJS提供了大量的API和配置选项,可以根据项目需求进一步定制和优化Grid的功能,例如行编辑、列重排、自定义分页样式等。在实际开发中,不断学习和...

    extjs3中引入地图

    在EXTJS3中引入地图,主要是为了让Web应用具备地理定位和地图展示的功能。EXTJS是一个强大的JavaScript库,用于构建富客户端应用,而将地图功能整合入EXTJS则可以提供更丰富的用户交互体验。本资源提供的实例是关于...

    EXTJS3.0中文API (离线)

    在使用EXTJS 3.0中文API.CHM时,开发者可以通过搜索功能查找所需的方法或类,理解其用法和参数,加快开发进程。"下载说明.htm"可能是关于如何获取和安装这个API文档的指南,而"readme.txt"通常包含了额外的信息,如...

    ExtJS中文API

    - `get`, `getBody`, `getDoc`, `getDom`: 这些方法用于获取DOM元素,可以是通过ID、DOM节点或者Element对象。`getBody`返回文档的body元素,`getDoc`返回整个文档,`getDom`则将Element对象转换为DOM节点。 - `...

    轻松搞定Extjs 带目录

    在Extjs中推荐使用`Ext.onReady`事件来确保页面的DOM完全加载后再执行脚本,这样可以保证脚本执行的正确性。 #### 6. 元素操作与模板 - **DomHelper类**: 提供了一种简洁的方法来创建和操作DOM元素。 - **...

Global site tag (gtag.js) - Google Analytics