•Ext.Element提供了181个方法，嗯，还没完，只是在4.1版本中是这样,最新的4.2版本貌似又增加了新方法，可谓是相当丰富给力。那么根据操作类型基本可以分为查询系、DOM操作系、样式操作系、对齐、尺寸、定位、拖放、滚动、键盘、动画系等方法供开发人员使用。由于API是英文版本，我特意花了一个下午时间把他们整理了出来，共同学们参考使用！！

-------------------------------------------------------------------------------------------------

•查询系方法：

•contains：判断元素是否包含另一个元素

•child：从元素的直接子元素中选择与选择符匹配的元素

•down：选择与选择符匹配的元素的子元素

•first：选择元素第一个子元素

•findParent：查找与简单选择符匹配的元素的父元素

•findParentNode、up：查找与简单选择符匹配的元素的父元素

•is：判断元素是否匹配选择符

•last：选择元素的最后一个子元素

•next：选择元素同层的下一个元素

•prew：选择元素同层的上一个元素

•parent：返回元素的父元素

•Ext.query：根据选择符获取元素

•Ext.select：根据选择符获取元素集合

-------------------------------------------------------------------------------------------------------------------------------

•DOM操作系方法：

•appendTo：将当前元素追加到指定元素中

•appendChild：在当前元素中追加元素

•createChild：在元素中插入由DomHelper对象创建的元素

•inertAfter：将元素插入到指定元素之后

•inertBefore：将元素插入到指定元素之前

•inertSibling：在当前元素前或后插入（或创建）元素（同层）。

•insertHtml：在当前元素内插入HTML代码

•remove：移除当前元素

•replace：使用当前元素替换指定元素

•replaceWith：使用创建的元素替换当前的元素

•wrap：创建一个元素，并将当前元素包裹起来。

----------------------------------------------------------------------------------------------------------------------------

•样式操作系方法（一）：

•addCls：增加CSS样式到元素，重复的样式会自动过滤

•applyStyles：设置元素的style属性

•setStyle：为元素设置样式

•getStyle：返回元素的当前样式和计算样式

•getStyleSize：返回元素的样式尺寸

•setOpacity：设置不透明度

•clearOpacity：；清理不透明度设置

•getColor：返回CSS颜色属性的值，返回值为6位数组的16进制颜色值

•boxWrap：使用box.Markup定义的HTML代码包装元素

------------------------------------------------------------------------------------------------------------------------------------------------

•样式操作系方法（二）：

•addClsOnClick添加样式当点击该元素的时候

•addClsOnOver添加样式当鼠标移动到元素上的时候

•getMargin：返回值具有top、left、right、bottom属性的对象，属性值为响应的元素margin值。

•removeCls：删除元素的样式

•replaceCls：替换元素的样式

•set：设置元素属性

•radioCls：为当前元素添加样式，并删除其兄弟节点的元素

•unituzeBox：将表示margin大小的对象转换为字符串

-------------------------------------------------------------------------------------------------------------------------------------------------

•对齐操作系方法：

•alignTo：将当前元素对齐到另外一个元素。定位位置的选择是基于所对齐的元素的位置（9个定位点tl、t、tr、l、c、r、bl、b、br）。

•anchorTo：当窗口调整大小时，将当前元素锚到指定元素并重新调整

•removeAnchor：移除当前元素的任何锚定位

------------------------------------------------------------------------------------------------------------------------------------------------

•尺寸大小操作系方法（一）：

•setHeight：设置元素宽度

•setWidth：设置元素高度

•setSize：设置元素大小

•cilp：存储元素当前的overflow设置并裁剪溢出。

•unlip：在clip被调用前将裁剪值（溢出）还原为原始值

•getDocumentWidth：返回文档宽度

•getDocumentHeight：返回文档高度

•getFrameWidth：返回合计了padding和border的宽度

•getHeight：返回offsetHeight值

•getWidth：返回offsetWidth值

•getPadding：返回padding的宽度

•getSize：返回元素的大小

----------------------------------------------------------------------------------------------------------------------------------------------------

•尺寸大小操作系方法（二）：

•getTextWidth：返回文本宽度

•getViewportHeight：返回窗口的可视高度

•getViewportWidth：返回窗口的可视宽度

•getViewSize：返回元素可以用来放置内容的区域大小

•getBorderWidth：返回边界宽度

•getComputedWidth：返回计算出来的CSS宽度

•getComputedHeight：返回计算出来的CSS高度

•isBorderBox：主要用于检测盒子模型，与IE6、7有关

----------------------------------------------------------------------------------------------------------------------------------------------------

•定位系方法（一）：

•clearPositioning：当文档加载完成后，清理定位回到默认值

•fromPoint：返回在建瓯的自拍呢的顶层元素

•getBottom：返回右下角的Y坐标

•getBox：返回一个包含元素位置的对象，对象包括元素左上角的坐标值、右下角的坐标值、宽度和高度。

•getCenterXY：返回元素的当前坐标

•getLeft：返回一个包含元素位置的对象

•getPositioning：返回一个包含CSS位置属性的对象

•getRegin：返回元素所在区域

•getRight：返回元素的右边X坐标

•getTop：返回元素顶部Y坐标

•getViewRegion：返回元素的内容区域

•getX：返回元素当前的X坐标

•getY：返回元素当前的Y坐标

-------------------------------------------------------------------------------------------------------------------------------------------------

•定位系方法（二）：

•getXY：返回元素当前的XY坐标

•move：移动元素

•moveTo：将元素移动到指定的XY坐标上

•position：初始化元素的位置

•setBottom：设置元素的bottom样式

•setBounds：设置元素的位置和大小

•setBox：设置元素的位置大小

•setLeft：设置元素坐标的X坐标

•setRight：设置元素right的样式值

•setLeftTop：设置元素左上角坐标

•setLocation：设置元素位置

•setTop：设置元素的顶部Y坐标

•setX、setY、setXY：设置元素的X、Y、XY坐标位置

•translatePoints：转换元素的页面坐标为CSS的left和top值

-------------------------------------------------------------------------------------------------------------------------------------------

•滚动系方法：

•getScroll：返回元素当前滚动条的位置

•isScrollable：如果元素允许滚动，则返回true

•scroll：滚动到指定位置

•scrollIntoView：将元素滚动到指定容器的可视区域

•scrollTo：将元素滚动到指定的位置

•常用事件方法：

•addKepMap：为元素创建一个KeyMap对象

•addKeyListener：为KeyMap绑定事件

------------------------------------------------------------------------------------------------------------------------------------------------------

•常用事件

•on：绑定事件

•un：移除事件

•click：单机事件

•blur：失去焦点事件

•focus：获得焦点事件

-----------------------------------------------------------------------------------------------------------------------------------------

•其他方法（一）：

•center：使元素居中

•clean：清理空白的文本节点

•createShim：为元素创建一个iframe垫片保证选择或其他对象跨域时可见

•getLoader：返回ElementLoader对象

•highlight 高亮显示特效

•show 、hide显示隐藏元素

•ghost  元素移动特效

•fadeIn、fadeOout淡入淡出

•slideIn、slideOut向上向下滑动

----------------------------------------------------------------------------------------------------------------------------------------------------------

•其他方法（二）：

•getValue：如果元素有value属性，返回其值

•normalize：将CSS属性中的连接符号去掉，例如将“font-size”转为fontSize这样。

•load：直接调用ElementLoader的load方法为元素加载内容

•mask：遮罩当前元素，屏蔽用户操作。

•unmask：移除遮罩

•repaint：强迫浏览器重新绘画元素

•serializeForm：序列化为URL编码的字符串

•update：更新元素的innerHTML属性

•unselectable：禁用文本选择

 

 

接下来就要举好多栗子了。。。。。。。。。。。。。

Ext.onReady(function () {    Ext.create('Ext.panel.Panel', {        title: '我的面板',        width: '100%',        height: 400,        renderTo: Ext.getBody(),        html: '
                   
                    我是sp的内容
                    
                     我是d2的内容
                    
                   
                   
                    
                    
                   
'    });    //查询系最常用的方法:    //Ext.dom.Element   get  fly   getDom    var d1 = Ext.get('d1');    var sp = Ext.get('sp');    //查询系方法：        //1: contains：判断元素是否包含另一个元素    alert(d1.contains(sp));    alert(d1.contains('sp'));        //2: child：从元素的直接子元素中选择与选择符匹配的元素 (返回的只是一个元素，并不能返回数组) ,2个参数 第二个参数是可选的 如果为true表示取得的是原生的HTMLElement元素        var ch1 = d1.child('span');    //Ext.dom.Element        alert(ch.dom.innerHTML);        var ch2 = d1.child('span',true);    //HTMLElement        alert(ch.innerHTML);        //3: down：选择与选择符匹配的元素的子元素//findParentNode、up：查找与简单选择符匹配的元素的父元素            var ch1 = d1.down('#d2');        alert(ch1.dom.innerHTML);        //4: first：选择元素第一个子元素 //last：选择元素的最后一个子元素        var f1 = d1.first('div');        alert(f1.dom.innerHTML);    //5: findParent：查找与简单选择符匹配的元素的父元素 //parent：返回元素的父元素        var parent =  sp.findParent('div');        alert(parent.innerHTML);        //6: is：判断元素是否匹配选择符        alert(d1.is('div'));        //7: next：选择元素同层的下一个元素 //prew：选择元素同层的上一个元素        var next = sp.next();        alert(next.dom.nodeName);    //8: Ext.query：根据选择符获取元素  (Ext.dom.Element.query)        var arr = Ext.query('span','d1');    //HTMLElement[]        Ext.Array.each(arr , function(item){            alert(item.innerHTML);        });    //9: Ext.select/Ext.dom.Element.select：根据选择符获取元素集合    // 返回的都是元素集合: Ext.dom.CompositeElementLite(HTMLElemennt)/Ext.dom.CompositeElement(Ext.dom.Element)    // 参数说明： 3个参数 ，     //    1：selector 选择器  (不要使用id选择器)    //  2：返回的集合对象（boolean false:Ext.dom.CompositeElementLite true:Ext.dom.CompositeElement）    //  3: 指定的根节点开始查找        var list1 = Ext.select('span',false,'d1');//Ext.dom.CompositeElementLite        Ext.Array.each(list1.elements,function(el){                alert(el.innerHTML);        });        var list2 = Ext.select('span',true,'d1');//Ext.dom.CompositeElement        Ext.Array.each(list2.elements,function(el){                alert(el.dom.innerHTML);        });                //操作dom系的方法：    //1:appendTo：将当前元素追加到指定元素中（这2个元素都必须存在document里）    sp.appendTo(Ext.get('d2'));    sp.appendTo('d2');    //2:appendChild：在当前元素中追加元素    sp.appendChild('d2');    //3:createChild：在元素中插入由DomHelper对象创建的元素        sp.createChild({            tag:'ol' ,        //orderlist  unorderlist            children:[                {tag:'li' ,html:'item1'},                {tag:'li' ,html:'item2'}            ]        });        //4:inertAfter：将元素插入到指定元素之后    //5:inertBefore：将元素插入到指定元素之前     //6:inertSibling：在当前元素前或后插入（或创建）元素（同层）。    //7:insertHtml：在当前元素内插入HTML代码    //8:replace：使用当前元素替换指定元素    //9:replaceWith：使用创建的元素替换当前的元素            //10:remove：移除当前元素    sp.remove();    //11:wrap：创建一个元素，并将当前元素包裹起来。    sp.wrap('
');        //操作样式系的方法：    //1：addCls：增加CSS样式到元素，重复的样式会自动过滤    sp.addCls('red');    //2:applyStyles：设置元素的style属性    sp.applyStyles('backgroundColor:blue');    sp.applyStyles({backgroundColor:'yellow'});    //3:setStyle：为元素设置样式    sp.setStyle('backgroundColor','green');    sp.setStyle('fontSize','40px');    //4:getStyle：返回元素的当前样式和计算样式    alert(sp.getStyle('fontSize'));    alert(Ext.encode(sp.getStyle(['fontSize','backgroundColor'])));    //5:getStyleSize：返回元素的样式尺寸    alert(Ext.encode(sp.getStyleSize()));    //6:setOpacity：设置不透明度        var d2 = Ext.get('d2');        d2.setStyle('backgroundColor','red');        d2.setStyle('width','200px');        d2.setStyle('height','200px');        d2.setOpacity(.3);    // 0~1    //7:addClsOnClick添加样式当点击该元素的时候        var d2 = Ext.get('d2');        d2.addClsOnClick('red');    //8:addClsOnOver添加样式当鼠标移动到元素上的时候        var d2 = Ext.get('d2');        d2.addClsOnOver('red');        //9:getMargin：返回值具有top、left、right、bottom属性的对象，属性值为响应的元素margin值。        var d2 = Ext.get('d2');        alert(d2.getMargin('b')); //r l t b        alert(Ext.encode(d2.getMargin()));    //10:removeCls：删除元素的样式            var d2 = Ext.get('d2');        d2.addCls('red');            //String/String[] className        d2.removeCls('red');        //String/String[] className        //11:尺寸、定位        var d2 = Ext.get('d2');        alert(Ext.encode(d2.getSize()));        alert(d2.getX());        alert(Ext.encode(d2.getXY()));        sp.moveTo(100,100);        //一：为元素添加事件    //1 : addKepMap：为元素创建一个KeyMap对象        var inp = Ext.get('inp');        inp.addKeyMap({        //Ext.util.KeyMap ====>Class            key:Ext.EventObject.A ,            //Ext.EventObject             ctrl:true ,            fn:function(){                alert('按ctrl+A ，执行!!');            } ,             scope:this        });    //2 : addKeyListener：为KeyMap绑定事件    //参数说明： String/Number/Number[]/Object key, Function fn, [Object scope]    //    var inp = Ext.get('inp');        inp.addKeyListener({            key:Ext.EventObject.X ,                ctrl:false         },        function(){            alert('x执行了..');        },        this);    //二：元素绑定常用事件        var inp　= Ext.get('inp');        inp.on('click',function(){            alert('执行了...');        });        inp.un('click');        inp.focus();            //三:其他重要且常用的方法：    var inp = Ext.get('inp');    var sp = Ext.get('sp');    //1: center：使元素居中    inp.center('d1');    //2: clean：清理空白的文本节点    //3: createShim：为元素创建一个iframe垫片保证选择或其他对象跨域时可见    //4: getLoader：返回ElementLoader对象//11: load：直接调用ElementLoader的load方法为元素加载内容        var loader = inp.getLoader(); //ElementLoader        loader.load({            url:'base/004_base06_dom2_loader.jsp' ,             renderer:function(loader ,response){                //把对象转换成字符串表示形式：Ext.encode                 //把一个字符串转换成javascript对象： Ext.decode                var obj = Ext.decode(response.responseText);                Ext.getDom('inp').value = obj.name ;            }        });    //5: highlight 高亮显示特效        sp.highlight();        //6: show 、hide显示隐藏元素      //fadeIn、fadeOout淡入淡出        var d2 = Ext.get('d2');        d2.setStyle('width','100px');        d2.setStyle('height','100px');        d2.setStyle('backgroundColor','red');        d2.show({duration: 2000});        d2.hide({duration: 2000});        //7: ghost  元素移动特效        d2.ghost('b', { duration: 2000 }); // r/b/l/t        //8: slideIn、slideOut向上向下滑动    d2.slideIn('b',{duration: 2000});    d2.slideOut('r',{duration: 2000});        //9: getValue：如果元素有value属性，返回其值    alert(inp.getValue());        //10: normalize：将CSS属性中的连接符号去掉，例如将“font-size”转为fontSize这样。        //11 :mask：遮罩当前元素，屏蔽用户操作。 unmask：移除遮罩        Ext.getBody().mask('请稍等..');        //    window.setTimeout(function(){
                          //        Ext.getBody().unmask();        //    },2000);        Ext.defer(function(){            Ext.getBody().unmask();        },2000);        //12: repaint：强迫浏览器重新绘画元素        //13: serializeForm：序列化为URL编码的字符串    alert(Ext.dom.Element.serializeForm('f1'));        //14: update：更新元素的innerHTML属性        //15: unselectable：禁用文本选择        inp.unselectable();        });

 给各位推荐个文章网,学习之余提高文学修养；