ExtJS DOM元素操作经验分享

记得最早刚接触网页操作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.

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

赞 (0)

相关推荐

  • ExtJS DOM元素操作经验分享

    记得最早刚接触网页操作DOM元素的时候是做毕业设计的时候,用JQuery操作的.毕业工作后是从事C++方面的编程,两年后,又重新解决了网页编程,不过这次不是用JQuery了,用的是ExtJS.就我经验来看,程序员是一个需要不断学习的行业(这也是为什么周围的同事很多都有白头发的缘故吧). 好了,今天这篇文章的主题是分享下我使用 ExtJS 操作 DOM 元素的一些经验. 设置元素点击处理函数的方法 复制代码 代码如下: var elem = Ext.get('start'); elem.on('c

  • jquery获取并修改触发事件的DOM元素示例【基于target 属性】

    jquery获取并修改触发事件的DOM元素示例【基于target 属性】

    本文实例讲述了jquery获取并修改触发事件的DOM元素.分享给大家供大家参考,具体如下: 需求 当点击关注后,改变按钮样式并显示取消关注,如图 实现 利用jQuery的 target获取到触发该事件的dom,然后修改它 target 属性 代码: HTML <div class="people-desc"> <div class="people-name">{$vo['nickname']}</div> <div clas

  • vue3使用自定义hooks获取dom元素的问题说明

    目录 使用自定义hooks获取dom元素问题 分享下楼主自己的观点 vue获取/操作组件的dom元素 下面是我的代码内容(非全部内容) 最后总结 使用自定义hooks获取dom元素问题 在自定义hooks的onMounted事件里面 获取ref元素,组件调用hooks的时候必须要传递响应式对象. 分享下楼主自己的观点 代码如下 <script> // demo.vue import { defineComponent, ref } from 'vue' import useBars from

  • AngularJS实现DOM元素的显示与隐藏功能

    本文实例讲述了AngularJS实现DOM元素的显示与隐藏功能.分享给大家供大家参考,具体如下: DOM元素的显示与隐藏 ,是前端开发中常常会用到的功能,AngularJS中是使用 ng-hide/ng-show 两个属性来实现的其实我们只要使用其中的一个属性即可实现所有功能他们的取值为 boolean. [HTML代码] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m

  • vue获取DOM元素并设置属性的两种实现方法

    这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相应的元素加ref="name" 然后再this.$refs.name获取到该元素 注意:在获取相应元素之前,必须在mount钩子进行挂载,否则获取到的值为空, 如果是给子组件加id并修改自定义属性,则直接会加载改子组件对应的外层div上,并不会改变该子组件原本的自定义属性的值 如果给子组件

  • jQuery使用正则表达式替换dom元素标签用法示例

    本文实例讲述了jQuery使用正则表达式替换dom元素标签用法.分享给大家供大家参考,具体如下: 这里主要通过如下正则表达式来替换dom元素中的标签: /<[\/]?(div)([^<>]*)>/g 具体示例代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title>

  • 封装获取dom元素的简单实例

    示例如下: <script> //函数: 反复执行的代码块 //全局只有一个对象,防止全局变量污染 var itcast = { getElen : { tag : function(tag){ return document.getElementsByTagName(tag); }, id : function(id){ return document.getElementById(id); } }, css : { addStyle : function(){}, removeStyle

  • Python解析xml中dom元素的方法

    本文实例讲述了Python解析xml中dom元素的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: from xml.dom import minidom try:     xmlfile = open("path.xml", "a+")     #xmldoc = minidom.parse( sys.argv[1])     xmldoc = minidom.parse(xmlfile) except :     #updatelogger.

  • JS动态创建DOM元素的方法

    本文实例讲述了JS动态创建DOM元素的方法.分享给大家供大家参考.具体如下: 近日,因工作需要,需要通过点击某个元素后, 动态创建一个DOM元素并显示,因此写了一些相关的JS函数,在此记录,以作备忘: /* 动态创建DOM元素的相关函数支持 */ /* 获取以某个元素的DOM对象 @obj 该元素的ID字符串 */ function getElement(obj) { return typeof obj=='string'?document.getElementById(obj):obj; }

  • JS选取DOM元素的简单方法

    摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选) 今天试了下各种选取元素的方法的速度,用原生的方法比jQuery要快差不多8倍,IE8是最慢的,IE9的速度差不多是IE8的3倍,Chrome的表现最好,其次是Firefox) 选取文档元素的方法: 1.通过ID选取元素(getElementById) 1)使用方法:document.getElemen

随机推荐