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") 虽然没有了动画，但元素会完全隐藏，不影响页面布局。文档里其实有说明：

隐藏此元素 - 根据显示模式决定使用"display"还是"visibility"。详情请参考 setVisible 方法。

说到底，仔细阅读官方文档才是程序员的终极武器——尤其是那些藏在角落里的参数说明，往往能帮你节省大量调试时间。