ExtJS DOM元素操作經驗分享_extjs

記得最早剛接觸網頁操作DOM元素的時候是做畢業設計的時候，用JQuery操作的。畢業工作後是從事C 方面的編程，兩年後，又重新解決了網頁編程，不過這次不是用JQuery了，用的是ExtJS。就我經驗來看，程式設計師是一個需要不斷學習的行業(這也是為什麼周圍的同事很多都有白頭髮的緣故吧)。

好了，今天這篇文章的主題是分享下我使用 ExtJS 操作 DOM 元素的一些經驗。
設定元素點選處理函數的方法

複製程式碼 程式碼如下:

程式碼如下:


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

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

查詢多個元素操作

複製程式碼

程式碼如下:

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

在實際專案中，由於需要更改一類元素的資訊提示樣式，如果根據css 來查找的話，當需要消失操作時，就不能繼續根據css 來查找所有的元素了。這時，同事教會了我新的方法，如下：

複製程式碼

程式碼如下:





// 這樣多個同樣屬於group 下的元素，可以透過此方式取得：
var elemMessageArray = Ext.select("span[='message_group'] ");

var newCssObj = {};

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

// 然後對每個元素重新設定css樣式就行了
elemMessageArray.each( function(el) {

el. set(newCssObj);
el.update(text);
el.show("display");
});

元素的顯示與隱藏 之前我一般用的方式

複製程式碼


程式碼如下:

程式碼如下: .get('uncompleted'); elemUncompleted.setDisplayed(true);

這種方式能夠提供動畫效果，但是這樣的話，如果需要元素消失時：元素雖然消失了，但同樣還是會佔用了元素的空間位置，不便佈局。後來，同事發現可以採用這種方式，雖然沒有了動畫效果，但是不會佔用元素的位置：

複製程式碼


程式碼如下:

el.show("display"); el.hide("display"); 剛才發現文件中的說明： Hide this element - Uses display mode to determine whether to use "display" or "visibility". See setVisible. 仔細閱讀文件是程式設計師必須學會做的！