常用方法和属性（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和valuehtmlTemplate.append(Ext.get("box"), { id: "childBox1",value:"hello" });//在参数1里添加一个id为childBox1文本为hello的divhtmlTemplate.append(Ext.get("box"), { id: "childBox2", value: "world" });//在参数1里添加一个id为childBox2文本为world的div</script>

View Code

 Javascript - 学习总目录

Javascript - ExtJs - 常用方法和属性