ExtJS中的get函数:get,getCmp,getDom,getBody,getDoc

根据我在工作中学到的用到的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页面中添加代码，

<div id="myDiv"></div>

 

然后调用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像素，如此简单的实现了动画效果。

还可以控制动画效果，代码如下所示：

myDiv.setWidth(100,{
duration:2,
callback:function() {alert('渐变完成')},
scope:this
});

 

duration表示间隔，数字越大移动越慢，callback是完成动画后执行的回调函数，scope是callback的作用域。这些项都会影响动画的最终效果。

getCmp:

 

getDom:

getBody:

getDoc: