Javascript - ExtJs - 常用方法和属性

常用方法和属性（Common methods and attributes）

获取

get(x)

x是元素的ID || dom元素对象 || ExtElement对象

将参数所指转化为ExtElement对象并返回它（非Dom元素对象，而是对Dom元素的封装），此方法等同于new Ext.Element(x) 。

Ext.select(x)

x是选择器

返回一个CompositeElement对象，表示ExtElment对象的集合。但返回的这个对象实际上并非数组，不能通过数组索引访问它包含的数据。但可以通过each方法对集合里的每个对象进行迭代。

Ext.query(x)

x是选择器

返回html dom元素对象数组。此方法是Ext.DomQuery.select()的简写形式。

Ext.DomQuery.filter(CompositeElement,selector,mach)

CompositeElement是ExtElement对象集合，selector是选择器，mach是布尔值，意为是否取反。

从集合中筛选出符合selector的对象，然后mach再筛选一次。返回CompositeElement集合。

Ext.DomQuery.is(domElement,selector)  

domElement是html Dom元素对象 || html Dom元素对象集合，selector是筛选器。

测试domElement是否匹配筛选器。

ExtElmentArray.each(fn)

fn是函数

迭代CompositeElement集合对象，该集合包含的是ExtElement对象。fn用于处理迭代，函数接收一个参数e，e表示被迭代的每个ExtElment对象。

Array.forEach(fn)

fn是函数

迭代数组的元素，fn用于处理迭代，函数接收一个参数e，e表示被迭代的每个数组的元素。如果你要迭代ExtElment对象就应该使用each方法，如果迭代数组就使用forEach方法。

Ext.each(x,fn)

x是数组对象 || CompositeElement集合对象

fn是函数用于处理迭代，函数接收三个参数item、index、allItems，item是当前迭代的某个数组的元素或CompositeElement集合中的ExtElement对象，index是索引，allItems是x。 

Ext.getDoc() 

获取html文档对象的ExtElement对象表示。

Ext.getBody()

获取Body元素的ExtElement对象表示。 

Ext.getDom(x)

x是元素的ID || html Dom元素对象 || ExtElement对象

获取对象的Dom对象表示。

Ext.getCmp()

获取Ext组件，得到组件后可调用以set为前缀的函数方法用以设置组件的各种属性。

Ext.isEmpty(x) 

x是对象 || 字符

测试对象是否为空，如果是测试字符，则需要提供第二个参数指定是否可以为空。

ExtElment.hide()  

隐藏ExtElment对象。

ExtElm.highlight();

使ExtElment背景高亮显黄渐隐的动画。

ExtElement.on(eventType,fn)

eventType是事件触发方式，fn是事件处理函数。

                
                    <
                    div 
                    id
                    ="TestBox"
                     style
                    ="width:100px;height:100px;background:black;color:white;margin:200px auto;text-align:center;"
                    >click</div><script type="text/javascript">
Ext.onReady(function () {
    Ext.get("TestBox").on("click", function () {
        Ext.MessageBox.alert("","event click！");
    });
});
</script>
            

View Code

属性

ExtElment.dom

获取ExtElement对象的Dom表示，相当于转化为Dom元素。

操纵

Ext.DomHelper.append(fatherElm,x)

fatherElm是html Dom对象 || ExtElement对象，x是htmlCode

将x添加到fatherElm里的末尾。

Ext.DomHelper.applyStyles(x,styleObject)

x是html Dom对象 || ExtElement对象

设置x的css。

                Ext.DomHelper.applyStyles(Ext.get("box"), { "font-size": "50px" })
            

View Code

Ext.DomHelper.insertAfter(x,y)

x是ExtElement对象，y是htmlCode || html Dom对象 || ExtElement对象

将y插入到x之后。

Ext.DomHelper.insertBefore(x,y)

x是ExtElement对象，y是htmlCode || html Dom对象 || ExtElement对象

将y插入到x之前。

Ext.DomHelper.insertHtml(where,x,y)

x是html Dom对象，where是指示条件 

根据where的指示，将y插入到x的由where指示的某个位置。where可能的值有：beforeBegin（插入到x的开始标签之前）afterBegin（插入到x的开始标签之后）afterEnd（插入到x的结束标签之后）beforeEnd（插入到x的结束标签之前）

Ext.DomHelper.markup(x)

x是ExtElement对象 || html Dom对象

获取该对象的html块。

Ext.DomHelper.overwrite(x,y)

x是ExtElement对象 || html Dom对象

用y替换x包含的所有html。

Ext.DomHelper.createTemplate(x)

x是htmlCode

创建一个html模板。此方法的好处在于简化需要重复创建相同结构的html以便于重复调用用于生成html或用于其他操作。

                
                    <
                    script 
                    type
                    ="text/javascript"
                    >
                    var
                     htmlTemplate 
                    =
                     Ext.DomHelper.createTemplate(
                    "
                    <div id=‘{id}‘>{value}</div>
                    "
                    );
                    //
                    创建模板同时定义占位变量id和value
                    htmlTemplate.append(Ext.get(
                    "
                    box
                    "
                    ), { id: 
                    "
                    childBox1
                    "
                    ,value:
                    "
                    hello
                    "
                     });
                    //
                    在参数1里添加一个id为childBox1文本为hello的div
                    htmlTemplate.append(Ext.get(
                    "
                    box
                    "
                    ), { id: 
                    "
                    childBox2
                    "
                    , value: 
                    "
                    world
                    "
                     });
                    //
                    在参数1里添加一个id为childBox2文本为world的div
                    </
                    script
                    >
                
            

View Code

 Javascript - 学习总目录

原文：http://www.cnblogs.com/myrocknroll/p/7069340.html