Heim > Web-Frontend > js-Tutorial > Hauptteil

ExtJS DOM元素操作经验分享_extjs

WBOY
Freigeben: 2016-05-16 17:24:10
Original
982 Leute haben es durchsucht

记得最早刚接触网页操作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 来查找所有的元素了。这时,同事教会了我一种新的方法,如下:
复制代码 代码如下:




// 这样多个同样属于 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.

仔细阅读文档是程序员必须要学会做的!
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!