ExtJs UI框架学习六

ExtJS中get、getDom、getCmp、getBody、getDoc的使用

Ext中包含了几个以get开头的方法，这些方法可以用来得到文档中DOM、得到当前文档中的组件、得到Ext元素等，在使用中要注意区别使用。 1、get方法 get方法用来得到一个Ext元素，也就是类型为Ext.Element的对象， Ext.Element类是Ext对DOM的封装，代表DOM的元素，可以为每一个DOM创建一个对应的Element对象，可以通过Element对象上的方法来实现对DOM指定的操作，比如用hide方法可以隐藏元素、initDD方法可以让指定的DOM具有拖放特性等。get方法其实是 Ext.Element.get的简写形式。 get方法中只有一个参数，这个参数是混合参数，可以是DOM节点的id、也可以是一个Element、或者是一个DOM节点对象等。代码：

aaa

Ext.onReady(function(){ var e=new Ext.Element("EXTJS"); alert(Ext.get("EXTJS")); alert(Ext.get(document.getElementById("EXTJS"))); alert(Ext.get(e)); }); 三个方法都可以得到一个与DOM节点 EXTJS对应的Ext元素。 2、getCmp方法－获得Ext组件。 getCmp方法用来获得一个Ext组件，也就是一个已经在页面中初始化了的Component或其子类的对象，getCmp方法其实是Ext.ComponentMgr.get方法的简写形式。getCmp方法中只有一个参数，也就是组件的id。代码：

aaa

Ext.onReady(function(){ var h=new Ext.Panel({ id:"h2", title:"", renderTo:"EXTJS", width:300, height:200 }); Ext.getCmp("h2").setTitle("新的标题"); });在代码中，我们使用Ext.getCmp("h2").来得到id为h2的组件，并调用其setTitle方法来设置该面板的标题。 3、getDom方法－获得DOM节点 getDom方法能够得到文档中的DOM节点，该方法中包含一个参数，该参数可以是DOM节点的id、DOM节点对象或DOM节点对应的Ext元素(Element)等。代码：

tttt

Ext.onReady(function(){ var e=new Ext.Element("EXTJS"); Ext.getDom("EXTJS"); Ext.getDom(e); Ext.getDom(e.dom); });三个语句返回都是同一个DOM节点对象。 4、getBody方法－得到文档的body节点元素(Element)。该方法直接得到文档中与document.body这个DOM节点对应的ExtJS元素（Element），实质就是把document.body对象封装成ExtJS元素对象返回，该方法不带任何参数。比如下面的代码把面板h直接渲染到文档的body元素中。 Ext.onReady(function(){ var h=new Ext.Panel({title:"测试",width:300,height:200}); h.render(Ext.getBody()); }); 5、getDoc方法－获得与document对应的Ext元素(Element) getDoc方法实质上就是得到当前html文档对象，也就是把document对象封装成ExtJS的Element对象返回，该方法不带任何参数，即： getDoc = function(){ return Ext.get(document); }

转载于:https://blog.51cto.com/cq885/484573

ExtJs UI框架学习六相关推荐

ExtJs UI框架学习三
JavaScript 面向对象及设计模式系列--灵活的JavaScript,Timo.Lee 当前,Javascript已经成为世界上最受欢迎和被广泛应用的的编程语言--因为他被捆绑到各种浏览器中.作 ...
PyTorch框架学习六——图像预处理transforms（二）
PyTorch框架学习六--图像预处理transforms(二) (续)二.transforms的具体方法 4.图像变换 (1)尺寸变换:transforms.Resize() (2)标准化:tran ...
【移动端vue ui框架学习】vue项目如何使用基于vue的UI框架mint ui
看了下饿了么团队开发的PC端vue ui框架Element ui之后,顺便看了看同团队开发的移动端的vue ui框架mint ui,那么在vue项目中应该如何使用mint ui呢?以下做简单的记录. ...
【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架Element
看了下iView之后,顺便看了看同样基于vuejs的ui框架Element,那么在vue项目中应该如何使用Element呢?以下做简单的记录. 官网定义:Element,一套为开发者.设计师和产品经理 ...
【PC端vue ui框架学习】vue项目如何使用基于vue的UI框架iview
今晚看了一下基于vuejs的ui框架iview,感觉UI挺好看的,那么在vue项目中应该如何使用iview呢?以下做简单的记录. 首先安装iview: $ npm install iview --sa ...
semantic ui框架学习笔记三
网格系统基本网格 <div class="ui grid"><div class="column"></div><d ...
semantic ui框架学习笔记二
评论组件文档里的评论组件介绍的比较清晰.这里我就挑一个我喜欢的格式展示出来: <div class="ui comments"><h3 class=" ...
不断学习UI框架的写法
在web开发的过程中,我们会需要用到很多大大小小的插件,比如文本框,下拉树,下拉框等等各种各样的都需要.或许在开发的网页中会用到同一种插件来满足各种各样复杂的业务逻辑,比如简单的一个下拉树,有的地方需 ...
react ui框架_Web开发 React 学习（二十）连载基础篇大结局
系列文章: 测开技能--Web开发 React 学习(一) 测开技能--Web开发 React 学习(二)环境搭建测开技能--Web开发 React 学习(三)元素的渲染测开技能--Web开发 R ...

ExtJs UI框架学习六

ExtJS中get、getDom、getCmp、getBody、getDoc的使用

ExtJs UI框架学习六相关推荐

最新文章

热门文章