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 相关文章推荐
IE8 原生JSON支持
Apr 13 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
Apr 02 Javascript
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
Async Validator 异步验证使用说明
Jul 03 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
Jul 10 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
Oct 08 Javascript
vue 解决computed修改data数据的问题
Nov 06 Javascript
vue+element实现图片上传及裁剪功能
Jun 29 Javascript
详解Vue的mixin策略
Nov 19 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
PHP垃圾回收机制简单说明
2010/07/22 PHP
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
淘宝ip地址查询类分享(利用淘宝ip库)
2014/01/07 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
php类常量用法实例分析
2015/07/09 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
php验证手机号码
2015/11/11 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
PHP下载文件的函数实例代码
2016/05/18 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
javascript一些不错的函数脚本代码
2008/09/10 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
2013/01/09 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
2016/01/27 Javascript
解决easyui日期时间框ie的兼容的问题
2018/03/01 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
Django实现自定义404,500页面教程
2017/03/26 Python
python实现反转部分单向链表
2018/09/27 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
python使用minimax算法实现五子棋
2019/07/29 Python
详解python中docx库的安装过程
2019/11/08 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
postman和python mock测试过程图解
2020/02/22 Python
python打包多类型文件的操作方法
2020/09/21 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
本科毕业论文指导教师评语
2014/12/30 职场文书
仓库管理制度范本
2015/08/04 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫