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 相关文章推荐
javascript中的关于类型转换的性能优化
Dec 14 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
Dec 15 Javascript
JS实现图片横向滚动效果示例代码
Sep 04 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
vue使用video.js进行视频播放功能
Jul 18 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 Javascript
JQuery表单元素取值赋值方法总结
May 12 jQuery
地址栏传递中文参数乱码在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使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
Angular2 多级注入器详解及实例
2016/10/30 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
详解JavaScript中return的用法
2017/05/08 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
python实现得到一个给定类的虚函数
2014/09/28 Python
详解python中字典的循环遍历的两种方式
2017/02/07 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
使用C++扩展Python的功能详解
2018/01/12 Python
Python3.4实现远程控制电脑开关机
2018/02/22 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
Python的Lambda函数用法详解
2019/09/03 Python
Python中常用的高阶函数实例详解
2020/02/21 Python
把Anaconda中的环境导入到Pycharm里面的方法步骤
2020/10/30 Python
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
adidas美国官网:adidas US
2016/09/21 全球购物
香港莎莎官网Sasa.com:亚洲著名国际化妆品商城
2019/11/10 全球购物
大学生就业自荐信
2013/10/26 职场文书
暑期教师培训方案
2014/06/07 职场文书
学前教育专业求职信
2014/09/02 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
个人剖析材料范文
2014/09/30 职场文书
颐和园导游词
2015/01/30 职场文书
2015年护士工作总结范文
2015/03/31 职场文书
2015年初三班主任工作总结
2015/05/21 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python
python获取字符串中的email
2022/03/31 Python
python热力图实现的完整实例
2022/06/25 Python