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 - 學習總目錄
Javascript - ExtJs - 常用方法和屬性