`

Ext.Component 和 Ext.Element 的区别

    博客分类:
  • ext
阅读更多
    Html DOM、Ext Element及Component三者之间的区别(Ext入门基础)

    每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的DOM对象,动态改变页面的内容,正是通过使用脚本语言来操作DOM对象实现。(通常使用getElementById/Ext.getDOM获得DOM对象)

    仅仅有DOM是不够的,比如要把页面中的某一个节点移到其它位置,要给某一个节点添加阴影效果,要隐藏或显示某一个节点等,我们都需要通过几句 javascript才能完成。因此,Ext在DOM的基础上,创建了Ext Element,可以使用Element来包装任何DOM,Element对象中添加了一系列快捷、简便的实用方法。(通常使用Ext.getEl()获得Element对象)

    对于终端用户来说,仅仅有Element是不够的,比如用户要显示一个表格、要显示一棵树、要显示一个弹出窗口等。因此,除了Element以外,Ext 还建立了一系列的客户端界面组件Component,我们在编程时,只要使用这些组件Componet即可实现相关数据展示及交互等,而 Component是较高层次的抽象,每一个组件在渲染render的时候,都会依次通过Element、DOM来生成最终的页面效果。(通常使用Ext.getCmp()获得Component对象)

================================================================

和Jquery一样,Ext.Element对象是对dom对象的封装,目的是为了跨平台以及增加一些有用的方法。但是Ext.Element是不包含外观的,封装的dom原来是怎么样就是怎么样。开发中最好有现成的组件可以使用,否则Extjs和Jquery差别真的不大了。因此Ext在Element的基础上进一步封装,产生了Component类,这些类含有外观,也就是多加入了一些html之类的进去,更方便开发者使用。

依赖关系如下:
Component=>Element=>dom
因此在Component中可以通过el属性来访问该Component所依赖的Element,同样的,Element也可以通过dom属性来访问Element对象所依赖的dom。


















-
引用地址:
http://www.cnblogs.com/shanmu/archive/2011/08/19/2145895.html
http://www.haogongju.net/art/1048391
分享到:
评论

相关推荐

    Ext.js核心函数详解.docx

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

    Ext Js权威指南(.zip.001

    6.5.2 ext.dom.compositeelement与ext.dom.compositeelementlite的区别 / 279 6.5.3 操作元素集合 / 279 6.6 综合实例:可折叠的面板accordion / 280 6.7 本章小结 / 283 第7章 数据交互 / 284 7.1 数据交互...

    封装一个Ext消息提示框,显示几秒后自动消失

    Ext 框架提供了许多有用的方法和组件,例如,Ext.Element、Ext.Component 等,我们可以使用这些方法和组件来简化我们的开发工作。 5. 实际应用 本资源的实际应用场景非常广泛。例如,在 Web 应用程序中,我们可以...

    Ext.ux.callout.Callout:CSS样式的浮动标注容器,带有可选箭头,可与Ext JS 4.0+一起使用

    相对于目标Ext.Element或Ext.Component定位自身,以及当目标移动或浏览器调整大小时,它将保持相对位置 响应鼠标超出标注范围时自动隐藏自身 可配置的延迟后自动关闭 显示时淡入,隐藏时淡出 因为一个Ext.ux....

    Extjs常用函数和事件.pdf

    5. `Ext.getCmp(string id)`:通过组件ID获取组件实例,主要用于访问已经存在的Ext.Component。 6. `Ext.getDom(Mixed el)`:将Ext.Element或DOM元素ID转换为原生DOM元素对象。 7. `Ext.isEmpty(Mixed value, ...

    Ext3.0英文API.CHM

    - **Ext.Element**:用于DOM操作和样式管理,是所有UI组件的基础。 - **Ext.util**:包含各种实用工具函数,如Array、Function、Object等。 - **Ext.data**:数据管理模块,包括数据存储、模型定义、数据交换等。...

    Ext中以get开头的方法使用

    **getCmp方法** 用于获取一个已经初始化的Ext组件,如`Component`或其子类的对象。此方法实际上是`Ext.ComponentMgr.get`方法的简写形式。 **语法**: ```javascript Ext.getCmp(id) ``` **参数**: - `id`: 组件的...

    ExtJS项目 一个博客系统

    在ExtJS中,可以使用`Ext.Component`创建自定义组件来展示这些信息,比如`Ext.panel.Panel`作为容器,`Ext.label`显示标题,`Ext.form.field.TextArea`用于编辑和显示文章内容,`Ext.grid.Panel`或`Ext.tree.Panel`...

    ext-3.0框架源码

    2. **组件体系**:EXT 3.0的组件都是基于`Ext.Component`抽象类派生的,每个组件都有自己的配置项和方法。例如,`Ext.grid.Panel`继承自`Ext.container.Container`,并添加了表格特有的属性和行为。 3. **数据管理*...

    老师整理的extjs学习笔记

    ExtJS 中的所有组件都继承自 `Ext.Component` 类,而 `Ext.Component` 又继承自 `Ext.util.Observable` 类。这意味着所有的组件都具有事件管理的能力。 **3.2 ExtJS 常用组件的继承关系及其管理** ExtJS 提供了...

    ExtjS实现聊天功能

    使用`Ext.util.CSS`和`Ext.dom.Element`可以方便地动态修改样式。 9. **性能优化**:由于聊天应用可能涉及到大量的数据展示和交互,所以性能优化是必不可少的,例如合理使用数据分页、延迟渲染等技术。 10. **测试...

    EXT中文教程121212

    EXT的源码阅读可以从主要的基类开始,如Ext.Element和Ext.Component,理解它们的生命周期和方法。此外,EXT的事件管理、布局管理和数据绑定机制也是重要的学习点。 发布EXT源码时的一些细节: 如果你打算发布含有...

    ext事件模型

    通过本文对`ext事件模型`的介绍,我们了解了`Ext.lib.Event`和`Ext.util.Observable`这两个核心组件的功能与用法。掌握了这些知识,开发者就能够更加高效地处理页面中的各种事件,构建出更加强大和复杂的前端应用...

    ExtJS 3.2的中文参考手册

    - **组件模型 (Component Model)**: 描述了组件的结构和行为,是ExtJS的核心部分。 - **容器模型 (Container Model)**: 容器组件可以包含其他组件,并通过布局管理器来管理子组件的位置和尺寸。 - **布局 (Layouts)*...

    extjs学习笔记

    - `animateTarget` (String/Ext.Element/Ext.Component):动画的目标元素。 - `callback` (Function):隐藏后的回调函数。 - `scope` (Object):回调函数的执行作用域。 #### 三、Ext 类定义与实例化 - **Ext....

Global site tag (gtag.js) - Google Analytics