ExtJS DOM元素操作經(jīng)驗分享

更新時間：2013年08月28日 15:36:15 作者：

這篇文章的主題是分享下我使用 ExtJS 操作 DOM 元素的一些經(jīng)驗，作為一個程序員是需要不斷學習的，喜歡的朋友可以學習下

記得最早剛接觸網(wǎng)頁操作DOM元素的時候是做畢業(yè)設計的時候，用JQuery操作的。畢業(yè)工作后是從事C++方面的編程，兩年后，又重新解決了網(wǎng)頁編程，不過這次不是用JQuery了，用的是ExtJS。就我經(jīng)驗來看，程序員是一個需要不斷學習的行業(yè)(這也是為什么周圍的同事很多都有白頭發(fā)的緣故吧)。

好了，今天這篇文章的主題是分享下我使用 ExtJS 操作 DOM 元素的一些經(jīng)驗。
設置元素點擊處理函數(shù)的方法

復制代碼代碼如下:

 
var elem = Ext.get('start'); 

elem.on('click', function(e, t) { 
alert(t.id); 
}); 

查詢多個元素操作

復制代碼代碼如下:

 
var body = Ext.query('body')[0]; 
body.className = "myStyle"; 

在實際項目中，由于需要更改一類元素的信息提示樣式，如果根據(jù) css 來查找的話，當需要消失操作時，就不能繼續(xù)根據(jù) css 來查找所有的元素了。這時，同事教會了我一種新的方法，如下：

復制代碼代碼如下:

 
<span style='display:none;' group='message_group' class='error'></span> 
<span style='display:none;' group='message_group' class='error'></span> 

// 這樣多個同樣屬于 group 下的元素，可以通過此種方式獲?。?
var elemMessageArray = Ext.select("span[group='message_group']"); 

var newCssObj = {}; 

if (isInfo) { 
newCssObj["class"] = "info"; 
} else { 
newCssObj["class"] = "error"; 
} 

// 然后對每個元素重新設置css樣式就行了 
elemMessageArray.each( function(el) { 
el.set(newCssObj); 
el.update(text); 
el.show("display"); 
}); 

元素的顯示和隱藏

之前我一般用的方式

復制代碼代碼如下:

 
Uncompleted = Ext.get('uncompleted'); 
elemUncompleted.setDisplayed(true); 

這種方式能夠提供動畫效果，但是這樣的話，如果需要元素消失時：元素雖然消失了，但是同樣還是會占用了元素的空間位置，不便布局。后來，同事發(fā)現(xiàn)可以采用這種方式，雖然沒有了動畫效果，但是不會占用元素的位置：

復制代碼代碼如下:

 
el.show("display"); 
el.hide("display"); 

剛才發(fā)現(xiàn)文檔中的說明：

Hide this element - Uses display mode to determine whether to use "display" or "visibility". See setVisible.

仔細閱讀文檔是程序員必須要學會做的！