ExtJS DOM元素操作实战经验分享

作者：技术拾光时间：2026-06-10 08:21:01浏览：237

ExtJS DOM元素操作实战经验回忆起最初接触网页DOM操作，还是在做毕业设计时，用JQuery一把梭搞定。后来转做C++两年，再回到网页编程领域，工具已换成ExtJS。程序员这一行，确实需要不断跟进新技术——看看周围同事的头发，就知道这话不假。今天就来聊聊ExtJS操作DOM元素的一些实战经验。

ExtJS DOM元素操作实战经验

回忆起最初接触网页DOM操作，还是在做毕业设计时，用JQuery一把梭搞定。后来转做C++两年，再回到网页编程领域，工具已换成ExtJS。程序员这一行，确实需要不断跟进新技术——看看周围同事的头发，就知道这话不假。今天就来聊聊ExtJS操作DOM元素的一些实战经验。

一、绑定点击事件

先看最简单的：给元素绑定点击事件。

复制代码代码如下:

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

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

二、批量操作元素

如果需要批量操作多个元素，可以用Ext.query。例如，直接获取页面中第一个body节点并修改其样式类。

复制代码代码如下:

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

三、通过自定义属性统一操作

实际项目中常常需要统一变更某一类元素的信息提示样式。如果纯靠CSS类来筛选，在需要隐藏或切换时就会遇到麻烦——因为元素可能已经移除了某个class，无法再次通过它来定位。后来从前辈那里学到一个技巧：自定义属性。举个例子：

复制代码代码如下:

// 这样多个同样属于 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");
});

四、显示与隐藏的正确用法

注意这里用了 show("display") 来控制显示，而不是直接 setDisplayed。为什么？这里就引出了显示与隐藏的一个常见误区。

之前常用的方式是这样：

复制代码代码如下:

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

这种方式确实能提供动画效果，但问题在于：元素虽然消失了，仍然会占据页面空间——这往往不是我们想要的布局效果。后来发现，用 show("display") 和 hide("display") 虽然没了动画，但元素会彻底隐藏，不影响布局。文档里其实有说明：

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

说到底，认真阅读文档才是程序员的终极武器——尤其是那种藏在角落里的参数说明，往往能帮你省下大把调试时间。