ExtJS Element Component DOM 的获取

 
learn_more

发布时间: 2014/11/26 17:41 
阅读: 400 
收藏: 1 
点赞: 1 
评论: 0

摘要
ExtJS3.0 获取Component 、 HTML DOM 、 Element 常用的方法，以及三者之间的相互转换。

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中注册。但是，我们可以通过ID进行间接获取，如下方法，不过这样不能保证我们一定获取到组件，所以使用时还要做一个是否为空的判断

 HTML DOM 转 Component ：Ext.getCmp(dom.id) 

 Element 转 Component：Ext.getCmp(element.id)

//----------------------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;
};