ExtJS中的get函数:get,getCmp,getDom,getBody,getDoc_extjsgetparentcmp()-优快云博客

本文链接：https://blog.youkuaiyun.com/wangdingbang2013/article/details/6281551

本文详细介绍了Ext.js中如何使用get函数获取DOM元素，并通过Element对象进行高效操作，包括动画效果、样式更改及位置调整等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据我在工作中学到的用到的EXT关于get的知识，写下这些东西，希望对您有用。

get:

用来获取一个Ext元素，也就是类型为Ext.Element的对象。Ext.Element类是Ext对DOM的封装，每个Ext.Element都对应着HTML中的一个DOM元素，我们可以为每一个DOM创建一个对应的Element对象。并通过Element对象中的函数来实现对DOM的指定操作。例如，可以使用hide函数隐藏元素，使用initDD函数为指定的DOM添加拖放特性等。get函数其实就是Ext.Element.get的简写形式。

get函数中只有一个参数，但是这个参数可以表示多种含义。它可以是DOM节点的id，也可以是一个Element，或者一个DOM节点对象。我们来看看下面的示例代码：

Ext.onReady( function(){ var e=new Ext.Element("hello"); alert(Ext.get("hello")); alert(Ext.get(document.getElementById("hello"))); alert(Ext.get(e)); });

对应的HTML页面中包含一个id为hello的div，代码如下所示：

<div id="hello">hello world</div>

从上面的示例中可以看出，Ext.get("hello")、Ext.get(document.getElementById("hello"))、Ext.get(e)这三个节点都可以获取一个DOM节点hello对应的EXT元素。get函数可以自动判断参数的类型，最终返回我们需要的结果。

Element与document.getElementByIdmyDiv")获取的对象是不一样的，虽然可以使用以前的方式获得指定id的元素，但是会失去Ext提供的各种常用的操作，如动画，定位，CSS，事件和拖放等。如果你想使用EXT的get函数获得指定id在HTML中对应的实际DOM对象，只需要使用Ext.get(id).dom。

下边我们来看一个稍微复杂的示例：

（1）先获得一个Element。

var myDiv=Ext.get("myDiv");

这里传入的参数是一个id，我们需要先在HTML页面中添加代码，

然后调用Ext.get("myDiv")获取这个div对应的Element对象。现在这个对象已经存放在Ext的缓存中了，当我们需要它时，可以直接从缓存中提取这个对象，不需要重复执行封装操作，这在很大的程度上提高了程序的运行效率。

（2）用获得的Element对象定义一个简单的动画效果，如下面的代码所示：

myDiv.hightlight();//突出显示，然后渐退 myDiv.addClass('red');//指定样式表 myDiv.center();//居中显示 myDiv.setOpacity(.25);//半透明效果

（3）实现渐变效果，代码如下：

myDiv.setWidth(100);

虽然使用setWidth函数可以直接设置myDiv的宽度，但是无法实现渐变的动画效果。

myDiv.setWidth(100,true);

这里只需要为setWidth函数增加第二个参数，就相当于打开了动画的开关，现在我们可以看到myDiv的宽度从初始大小变成了100像素，如此简单的实现了动画效果。