ExtJS Element Component DOM 的获取

1、获取Element元素:

1)Ext.get == Ext.Element.get 获取元素后放在缓存中下次查找时从缓存中获取,所以需要多次调用这个元素的时候应该使用这个方法。

2)Ext.fly  ==  Ext.Element.fly  获取元素后直接返回,而且该元素不会缓存在系统中。所以只需一次操作时最好调用这个方法。

3)Ext.select 用法与 Ext.query 基本相同,然而二者的差异是返回值。前者返回的是CompositeElementLite对象,该对象保存了选择器所选择的元素,同时以Element形式存储,换句话说,Ext.select 是把 Ext.query 的元素进行了封装。

4)Ext.getDoc() 返回Document 的 Ext.Element 元素 ,类似于 Ext.get(document)

5)Ext.getBody 返回Body 的 Ext.Element 元素 ,类似于 Ext.get(document.body || document.documentElement);

2、获取HTML DOM元素:

1)Ext.query == Ext.DomQuery.select 获取原生DOM元素集合,他并不是Ext封装的Element元素集合,而是HTML的DOM数组

2)Ext.getDom() 返回HTML 原生的 DOM元素

3、获取Component元素:

1)Ext.getCmp == Ext.ComponentMgr.get  返回Component组件

2)component对象可以通过 ownerCt 获取父组件 , 可以通过 items 获取子组件

3)componet.getComponent(index||id) 获取子组件,等价于 component.items.get(index || id);

4)componet.findParentByType() 获取父组件

5)componet.findByType() 获取子孙组件

4、Component、Element、HTMLDOM 之间相互转换

1)componet.getEl() == component.el 组件获取元素

2)element.dom 元素获取HTML DOM

3)Ext.get(dom) HTML DOM 转为 Element

4)Element 或者 HTML DOM 是无法转换 Component 的,因为 Component需要运行渲染时在ComponentMgr中注册。

//----------------------get sourcecode-------------------------------------------

El.get = function(el){

var ex,
        elm,
        id;
    if(!el){ return null; }
    if (typeof el == "string") { // element id
        if (!(elm = DOC.getElementById(el))) {
            return null;
        }
        if (EC[el] && EC[el].el) {
            ex = EC[el].el;
            ex.dom = elm;
        } else {
            ex = El.addToCache(new El(elm));
        }
        return ex;
    } else if (el.tagName) { // dom element
        if(!(id = el.id)){
            id = Ext.id(el);
        }
        if (EC[id] && EC[id].el) {
            ex = EC[id].el;
            ex.dom = el;
        } else {
            ex = El.addToCache(new El(el));
        }
        return ex;
    } else if (el instanceof El) {
        if(el != docEl){
            // refresh dom element in case no longer valid,
            // catch case where it hasn‘t been appended

// If an el instance is passed, don‘t pass to getElementById without some kind of id
            if (Ext.isIE && (el.id == undefined || el.id == ‘‘)) {
                el.dom = el.dom;
            } else {
                el.dom = DOC.getElementById(el.id) || el.dom;
            }
        }
        return el;
    } else if(el.isComposite) {
        return el;
    } else if(Ext.isArray(el)) {
        return El.select(el);
    } else if(el == DOC) {
        // create a bogus element object representing the document object
        if(!docEl){
            var f = function(){};
            f.prototype = El.prototype;
            docEl = new f();
            docEl.dom = DOC;
        }
        return docEl;
    }
    return null;
};

//--------------------------  fly sourcecode --------------------------------

El.fly = function(el, named){
    var ret = null;
    named = named || ‘_global‘;

if (el = Ext.getDom(el)) {
        (El._flyweights[named] = El._flyweights[named] || new El.Flyweight()).dom = el;
        ret = El._flyweights[named];
    }
    return ret;
};

时间: 2024-08-25 13:00:55

ExtJS Element Component DOM 的获取的相关文章

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

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

DOM: 如何获取元素下的第一个子元素

Element.firstChild ?,是的,这是第一种方法,当然,通常来说支持 W3C 规范的浏览器,如 Firefox 等取到的应该是 TEXT_NODE.很早之前,或者说现在最流行的方法可能是: // 让我们假设要将它抽象出来,变成一个 util 对象的方法 var util = {}; util.first = function(element) { if(!element) return; var first= element.firstChild; // 处理 w3c 浏览器中第一

[转载]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之类的进

jacascript DOM节点获取

前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! getElementById() obj.getElementById(id) 该方法接收一个参数(该元素的id),若找到则返回该元素对象,若不存在则返回null: 任何HTML元素可以有一个 id 属性,在文档中该值必须唯一: 若浏览器中出现多个 id 名的情况,CSS样式对所有该 id 名的元素都生效,但 javascript 脚本仅对第一个出现该 id 名的元素生效: getElementsByT

Angular 从DOM中获取scope

节选官方文档: 原文:https://docs.angularjs.org/guide/scope Retrieving Scopes from the DOM. Scopes are attached to the DOM as $scope data property, and can be retrieved for debugging purposes. (It is unlikely that one would need to retrieve scopes in this way

Js操作DOM及获取浏览器高度以及宽度

在JavaScript中,经常会需要获取document文档元素,是HTML文档对象模型的缩写,HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法. 通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性.可以对其中的内容进行修改和删除,同时也可以创建新的元素.HTML DOM 独立于平台和编程语言.它可被任何编程语言诸如 Java.JavaScript 和 VBScript 使用. childNodes 反回当前元素所有子元素

ExtJs之DHTML,DOM,EXTJS的事件绑定区别

<!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="ExtJs/

Js怎么获取DOM及获取浏览器的宽高?

在JavaScript中,经常会需要获取document文档元素,是HTML文档对象模型的缩写,HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法. 通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性.可以对其中的内容进行修改和删除,同时也可以创建新的元素.HTML DOM 独立于平台和编程语言.它可被任何编程语言诸如 Java.JavaScript 和 VBScript 使用. DOM独立于具体的编程语言,通常通过Java

ExtJS学习----------Ext.Dom.Query类学习(实例)

具体实例: Ext.onReady(function(){ //Ext.DomQuery Ext.create('Ext.Panel',{ title:'Ext.DomQuery示例', width:500 , height:400 , renderTo:Ext.getBody(), html:'<ul><li>item1</li><li>item2</li></ul><div id=d1><span id=sp&g