[转载]Extjs中的dom,Ext.Element和Ext.Component对象的关系

原文地址:http://www.cnblogs.com/lwzz/archive/2011/01/30/1948106.html

 

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

依赖关系如下:

Component=>Element=>dom

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

时间: 2024-10-03 20:21:15

[转载]Extjs中的dom,Ext.Element和Ext.Component对象的关系的相关文章

[转]ExtJs基础--Html DOM、Ext Element及Component三者之间的区别

要学习及应用好Ext框架,必须需要理解Html DOM.Ext Element及Component三者之间的区别. 每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的DOM对象,动态改变页面的内容,正是通过使用脚本语言来操作DOM对象实现.(通常使用getElementById/Ext.getDOM获得DOM对象) 仅仅有DOM是不够的,比如要把页面中的某一个节点移到其它位置,要给某一个节点添加阴影效果,要隐藏或显示某一个节点等,我们都需要通过几句 javascrip

extjs中组件监听器里面的回调函数说明

近期在看项目源代码的时候发现了例如以下代码,当中_searchSupplierStore是JsonStore对象 _searchSupplierStore.on('beforeload',function(thiz,options){ thiz.baseParams["cusCode"]="%"+Ext.getCmp('id_cusCodetext').getValue()+"%"; thiz.baseParams["cusType&q

Ext.get和Ext.fly的区别

在Extjs的官方文档中,Ext.get()和Ext.fly()的方法的声明如下: get( String/HTMLElement/Ext.Element el ) : Ext.dom.Element fly( String/HTMLElement dom, [String named] ) : Ext.dom.AbstractElement.Fly 这两个方法的区别: 1.Ext.get()使用理论缓存的机制,如果你需要频繁的操作一个dom节点的话,就使用这个方法 而Ext.fly()使用的是

ExtJS学习--------Ext.Element中的常用事件和其他重要的方法学习(实例)

常用事件: 其他重要方法: 具体实例:(实例结果可以将对应的代码取消注释进行测试) Ext.onReady(function(){ Ext.create('Ext.panel.Panel',{ title:'我的面板' , width:'100%' , height:400 , renderTo:Ext.getBody(), html:'<div id=d1><span id=sp>我是sp的内容</span><div id=d2>我是d2的内容</d

ExtJS学习--------Ext.Element中的查询方法学习(实例)

具体实例:(实验结果可复制代码后进行演示) Ext.onReady(function(){ Ext.create('Ext.panel.Panel',{//创建一个面板 title:'我的面板' , width:'100%' , height:400 , renderTo:Ext.getBody(), html:'<div id=d1><span id=sp>我是sp的内容</span><div id=d2>我是d2的内容</div></d

ExtJS得知--------Ext.Element学习的查询方法(示例)

详细实例:(实验结果可复制代码后进行演示) Ext.onReady(function(){ Ext.create('Ext.panel.Panel',{//创建一个面板 title:'我的面板' , width:'100%' , height:400 , renderTo:Ext.getBody(), html:'<div id=d1><span id=sp>我是sp的内容</span><div id=d2>我是d2的内容</div></d

ExtJS学习-------Ext对Dom的操作:Ext.get Ext.fly Ext.getDom

具体实例: (1)创建JSP文件,引入CSS和js文件,添加三个Div <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getSer

ExtJs中decode与encode(转载)

出自:http://blog.163.com/xiao_mege/blog/static/72942753201102693545195/ 在述说这个例子之前,我假想你已经知道什么是Json数据了,那么在这里在温习一下吧: JSON(JavaScript Object Notation) 是一种数据交换格式,采用完全独立于语言的文本格式:JSON建构于两种结构:“名称/值”对的集合和值的有序列表 下面详细说明下:“名 称/值”对的集合(A collection of name/value pai

extjs中Ext.ns(&#39;xxx&#39;)中的几个问题

当使用 com.bitc.xmis.ExcelImportWin =  Ext.extend(Ext.Window, {}) 新建一个表单或者窗口时,后面应该加上 com.bitc.xmis.ExcelImportWin.superclass.initComponent.call(this); Ext.extend()函数提供了直接访问父类构造函数的途径,通过 SubClass.superclass.constructor.call(this);就可以直接调用父类的构造函数,这个函数的第一个参数