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 相关文章推荐
JScript中的undefined和&quot;undefined&quot;的区别
Mar 08 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
Jul 31 Javascript
JavaScript中的对象和原型(一)
Aug 12 Javascript
javascript设计模式Constructor(构造器)模式
Aug 19 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
微信小程序 图片上传实例详解
May 05 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 Javascript
vue加载完成后的回调函数方法
Sep 07 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
javascript 构建模块化开发过程解析
Sep 11 Javascript
小程序中的箭头函数的具体使用
Jun 19 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
地址栏传递中文参数乱码在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
ThinkPHP框架设计及扩展详解
2014/11/25 PHP
Yii分页用法实例详解
2014/12/04 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
PHP页面转UTF-8中文编码乱码的解决办法
2015/10/20 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
javascript跨域的4种方法和原理详解
2014/04/08 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
让JavaScript中setTimeout支持链式操作的方法
2015/06/19 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
jQuery双向列表选择器DIV模拟版
2016/11/01 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
深入浅析Node.js单线程模型
2017/07/10 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
python使用自定义钉钉机器人的示例代码
2020/06/24 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
中科方德软件测试面试题
2016/04/21 面试题
药学专业毕业生求职信
2013/10/20 职场文书
采购文员岗位职责
2013/11/20 职场文书
高三体育教学反思
2014/01/29 职场文书
爱国卫生月实施方案
2014/02/21 职场文书
税务职业生涯规划书范文
2014/09/16 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
2015社区个人工作总结范文
2015/05/13 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
单位收入证明范本
2015/06/18 职场文书
Redis主从配置和底层实现原理解析(实战记录)
2021/06/30 Redis
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python