ExtJS DOM元素操作经验分享_extjs-js教程-PHP中文网

ExtJS DOM元素操作经验分享_extjs

php中文网

发布： 2016-05-16 17:24:10

原创

1190人浏览过

记得最早刚接触网页操作DOM元素的时候是做毕业设计的时候，用JQuery操作的。毕业工作后是从事C++方面的编程，两年后，又重新解决了网页编程，不过这次不是用JQuery了，用的是ExtJS。就我经验来看，程序员是一个需要不断学习的行业(这也是为什么周围的同事很多都有白头发的缘故吧)。

好了，今天这篇文章的主题是分享下我使用 ExtJS 操作 DOM 元素的一些经验。
设置元素点击处理函数的方法

DeepBrain

AI视频生成工具，ChatGPT +生成式视频AI =你可以制作伟大的视频!

查看详情

复制代码代码如下:

 
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[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); 

这种方式能够提供动画效果，但是这样的话，如果需要元素消失时：元素虽然消失了，但是同样还是会占用了元素的空间位置，不便布局。后来，同事发现可以采用这种方式，虽然没有了动画效果，但是不会占用元素的位置：

复制代码代码如下:

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

刚才发现文档中的说明：

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

仔细阅读文档是程序员必须要学会做的！

大家都在看：

Ext JS 数据管理：实现 AJAX 代理请求与自定义数据读取器 Ext JS AJAX请求：通过代理与自定义读取器高效管理数据 Ext JS AJAX请求、代理与自定义数据读取器：高级数据管理指南 Ext JS中通过AJAX代理与自定义读取器实现数据加载的教程 Ext JS 框架升级指南：解决常见错误