文档章节

ExtJS Element Component DOM 的获取

learn_more
 learn_more
发布于 2014/11/26 17:41
字数 669
阅读 784
收藏 1

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


© 著作权归作者所有

learn_more
粉丝 93
博文 240
码字总数 210196
作品 0
深圳
程序员
私信 提问
ExtJS中get、getDom、getCmp、getBody、getDoc的使用

Ext中包含了几个以get开头的方法,这些方法可以用来得到文档中DOM、得到当前文档中的组件、得到Ext元素等,在使用中要注意区别使用。 1、get方法 get方法用来得到一个Ext元素,也就是类型为E...

Junn
2012/11/22
0
0
ExtJS HelloWord

最近学ajax,接触到了Extjs这个强大的框架。我想通过我的学习笔记,最后可以让大家上手在项目中使用Ext。首先我会写一些基本的用于入门Ext的文章,打好基础是很重要的。在了解基础后,可能会...

郏高阳
2012/05/13
0
0
ExtJs自学教程(1):一切从API开始

该系列文章不侧重全方位的去介绍ExtJs的使用,只是侧重于解决ExtJs问题的思考方法。写的人不用长篇大论,学的人则能够自立更生。l 学习的人只要有一些CSS的javascript的基础知识并且对于英文...

77970290
2013/05/07
0
0
Ext中的get、getDom、getCmp、getBody、getDoc的区别

Ext中的get、getDom、getCmp、getBody、getDoc的区别 Ext中包含了几个以get开头的方法,这些方法可以用来得到文档中DOM、得到当前文档中的组件、得到Ext元素等,在使用中要注意区别使用。 1、...

heidsoft
2011/06/14
0
0
Dijit、ExtJS、jQuery UI 异同浅析

简介: 当今,各类 JavaScript 框架在前端开发中已经相当普及。Dojo、Ext jQuery 等主流 JavaScript 框架不仅提供了一系列核心 API 来屏蔽浏览器差异,简化 DOM 操作、增强 JavaScript 原生 ...

索隆
2012/02/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Taro ScrollView 组件的 scrollTop 属性是个坑

官方issue:ScrollView设置scrollTop没效果 同样的,设置 scrollTop=0 并不能实现置顶,官方回复早就修复了,我的 Taro 版本已经是最新的,然而并未修复。 万能的评论区,给出了失效的原因。...

dkvirus
55分钟前
3
0
Qt那些事0.0.21

这次还是关于PRO文件中QMAKE_POST_LINK的故事。 平时都是使用VS2015作为编译器,恰巧想用MinGW编一版程序,结果偏偏出现了错误。话说测试的这个项目可是在Linux下(fodera 20)可以正确编译通...

Ev4n
今天
1
0
OSChina 周六乱弹 —— 抖音外放 亲妈下葬。

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 :一直没想明白黎明是怎么混进「四大天王」的,直到最近网易云音乐心动模式开启之后 #今日歌曲推荐# 《那有一天不想你》- 黎明 手机...

小小编辑
今天
534
8
Linux使用源码包安装软件

前言: 最近整理一些以前的学习笔记。 过去都是存储在本地,此次传到网络留待备用。 源码包 Linux软件多数免费、开源,是开发人员编写的,具有很强可读性的一组相关代码文本。 源码包 --> 编...

迷失De挣扎
今天
7
0
IPv4如何转换为IPv6?

ipv6已经逐渐在应用,现在已经有很多的运营商支持ipv6,前天我们也发布了如何让电脑使用ipv6地址?有很多朋友在问?ipv6有什么作用,它的表示方式是什么,今天我们来一起来详细了解下ipv6相关计...

xiangyunyan
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部