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 相关文章推荐
jquery一句话全选/取消全选
Mar 01 Javascript
JavaScript中的原型链prototype介绍
Dec 30 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 Javascript
js实现导航吸顶效果
Feb 24 Javascript
JS排序之冒泡排序详解
Apr 08 Javascript
详解vue 兼容IE报错解决方案
Dec 29 Javascript
微信小程序实现卡片层叠滑动效果
Jun 21 Javascript
vue 路由守卫(导航守卫)及其具体使用
Feb 25 Javascript
原生js实现日历效果
Mar 02 Javascript
js面向对象方式实现拖拽效果
Mar 03 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
php Rename 更改文件、文件夹名称
2011/05/24 PHP
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
php实现可运算的验证码
2015/11/10 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
JS 控制CSS样式表
2009/08/20 Javascript
封装的原生javascript弹出层代码
2010/09/24 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
JavaScript实现图片轮播的方法
2015/07/31 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
基于JavaScript实现自动更新倒计时效果
2016/12/19 Javascript
jquery+ajax实现省市区三级联动效果简单示例
2017/01/04 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
Django数据库操作之save与update的使用
2020/04/01 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
css3一款3D字体带阴影效果的实现步骤
2013/03/20 HTML / CSS
大专生自荐信
2013/10/04 职场文书
大学生自我评价怎样写好
2013/10/23 职场文书
房屋出租协议书
2014/04/10 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书
Python合并多张图片成PDF
2021/06/09 Python