ExtJS DOM元素操作经验分享


Posted in Javascript onAugust 28, 2013

记得最早刚接触网页操作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 来查找所有的元素了。这时,同事教会了我一种新的方法,如下:
<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);

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

刚才发现文档中的说明:

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

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

Javascript 相关文章推荐
不要小看注释掉的JS 引起的安全问题
Dec 27 Javascript
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
javascript单页面手势滑屏切换原理详解
Mar 21 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
Sep 20 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
Dec 27 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 Javascript
使用JavaScript获取Django模板指定键值数据
May 27 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 #Javascript
在JavaScript中实现类的方式探讨
Aug 28 #Javascript
实用的Jquery选项卡TAB示例代码
Aug 28 #Javascript
jQuery实现图片信息的浮动显示实例代码
Aug 28 #Javascript
JQuery筛选器全系列介绍
Aug 27 #Javascript
HTML Color Picker(js拾色器效果)
Aug 27 #Javascript
Js中的onblur和onfocus事件应用介绍
Aug 27 #Javascript
You might like
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
JS中==与===操作符的比较
2009/03/21 Javascript
asp.net 30分钟掌握无刷新 Repeater
2011/09/16 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
2013/12/30 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
微信小程序生成二维码的示例代码
2019/03/29 Javascript
JS实现判断移动端PC端功能
2020/02/21 Javascript
js实现百度登录窗口拖拽效果
2020/03/19 Javascript
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
python解决pandas处理缺失值为空字符串的问题
2018/04/08 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
解决Python获取字典dict中不存在的值时出错问题
2018/10/17 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
python3 xpath和requests应用详解
2020/03/06 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
Python pip使用超时问题解决方案
2020/08/03 Python
详解python tkinter 图片插入问题
2020/09/03 Python
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
2016/04/26 HTML / CSS
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
优秀团支部事迹材料
2014/02/08 职场文书
预备党员转正考核材料
2014/06/03 职场文书
公共场所禁烟标语
2014/06/25 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
Python 实现Mac 屏幕截图详解
2021/10/05 Python
MySQL 语句执行顺序举例解析
2022/06/05 MySQL
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers