extjs学习笔记（二） Ext.Element类

最新推荐文章于 2023-06-17 22:56:23 发布

niuyongjie

最新推荐文章于 2023-06-17 22:56:23 发布

阅读量1.3k

点赞数

分类专栏： EXTJS 文章标签： extjs stylesheet div function callback jquery

EXTJS 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了ExtJS中Element对象的使用方法，包括如何通过Ext.get和Ext.fly获取Element对象，以及这两种方法的区别。此外，还讲解了如何利用Element对象进行DOM操作，如添加CSS类、设置宽度和透明度等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载自：http://www.cnblogs.com/yage/archive/2009/10/13/1581125.html

上个系列中，我们用到了Ext.fly来获得一个Element对象，其实Ext.fly是Ext.Element.fly的简写形式。类似的方法还有一个Ext.get，是Ext.Element.get的简写。这两个方法都可以使用Dom元素或者Dom元素的id作为参数来获得一个Element对象。区别在于fly返回的是Element轻量级的，占用较少的内存，但是不保存对象的引用，每次使用都会改变先前的对象，而get则会缓存每次返回的Element对象，但是占用较多的内存。我们通过一个例子来说明二者的区别，同时看看Element给我们提供的强大功能。在我们项目中添加一个html页面，内容如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Element 演示</title>
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="css/element.css" />

</head>
<body>
    <input type="button" value="请点击我" id="btn" />
    <div id="div1">div1</div>
    <div id="div2">div2</div>
</body>
</html>

在这个文件中又使用了一个CSS文件，名字叫element.css,内容如下：

body { font-family:helvetica,tahoma,verdana,sans-serif; padding:20px; padding-top:32px; font-size:13px; background-color:#fff !important; } p { margin-bottom:15px; } .red { background-color:Red; } .green { background-color:Green; } .x-grid3-row-body p { margin:5px 5px 10px 5px !important; }

当然还要添加element.js文件，我们先用Ext.get方法来获取element对象并进行一些操作，代码如下：
///<reference path="../js/vswd-ext_2.0.2.js" /> /* *作者：大笨 *日期：2009-10-12 *版本：1.0 *博客地址：http://yage.cnblogs.com */ Ext.onReady(function() { Ext.get("btn").on("click", function() { var el1 = Ext.get("div1"); var el2 = Ext.get("div2"); el1.addClass("red"); //增加CSS类 el2.addClass("green"); el1.setWidth(); //设置宽度 el1.highlight(); //高亮显示 el1.setOpacity(0.5); //设置透明度 el2.fadeIn({ endOpacity: 1, //可以是0和1之间的任意值 easing: 'easeOut', duration: 1 }); //el1.addClass("red").setWidth(100).setOpacity(0.5); }); });
运行之后，点击button按钮可以看到效果。代码都很直观，不需要过多的解释。现在我们把Element的get方法换成fly，运行之后我们会发现，所有的操作都在div2上进行，因为div1的Element引用并未被保存下来，第二次使用fly方法的时候改写了第一次获得的Element对象，所以我们看到操作都在div2上进行了。很多用过jquery的人喜欢用方法链(method chain)的方式写代码，由于Element对象的大多数方法返回的还是Element对象，所以这里也可以采用方法链，就像我在22行中写的那样。但是要注意highlight，fadeIn，fadeOut这些方法事实上并不是Element对象的方法，它们其实是 Ext.Fx类中的方法，只是用了js的apply方法给加到Element对象上去了（apply方法的使用可以参考这里），Fx 类中的方法使用了内部的效果队列，效果是按照特定的顺序的，而Element对象的方法则是立即执行的。所以在方法链中同时使用Element和Fx的方法时需要注意，有可能会产生不希望看的结果。
我们的代码中用到了setWith方法，在Element类还有一些以set开头的方法，用来进行一些设置，这些方法大多数有一个可选的参数用来呈现动画的效果，这个参数可以是布尔值，可以用来开启默认的设置，也可以是一个json对象，用来对动画进行详细的定制，我们把上边的代码改一下，来看看带动画的效果：

///<reference path="../js/vswd-ext_2.0.2.js" /> Ext.onReady(function() { Ext.get("btn").on("click", function() { Ext.fly("div1").addClass("red").setWidth(100, { duration: 3, easing: 'elasticIn', callback: function() {Ext.Msg.alert("信息","div1的宽度被设置为100") }, scope: this }); }); });

简单解释下上边的代码：duration指明动画的时间，这里是3秒；easing用来设定动画的方式，必须是有效的 Ext.lib.Easing的值，可以从帮助文档中获得全部的有效值；callback，当动画执行完毕的时候调用的函数，scope指明callback函数的作用域。
    除了使用get和fly方法，Element还有一个select方法，这可是一个很强大的方法，可以根据选择器来获取一个Element的数组(其实返回的是一个CompositeElementLite或者CompositeElement对象，这两个类是js中的继承关系，在内部维护了一个Element对象的数组。当我们在返回的对象上使用Element的方法，实际上是对数组中的每一个Element对象调用方法）。这个方法可以简写为Ext.select，有一个选择器作为参数，使用方法和jquery类似，比如说Ext.select("p")会选择所有的p标签，Ext.select(".red")会选择css类为red的所有标签，选择器可以组合来使用，比如"div.foo:nth-child(odd)[@foo=bar].bar:first"。善于使用选择器可以给我们控制元素带来非常大的方便，可以参阅Ext.DomQuery类的文档来获得更多选择器的相关知识。
    Element的query方法使用和select相似的方法来返回Dom节点的集合，不过需要注意的是Ext.query并不是Ext.Element.query的简写，而是Ext.DomQuery.select方法的简写。Dom接点可以通过get方法获得Element对象，而Element对象可以通过dom属性来获得Dom节点，根据不同的需要，我们可以很方便的进行转换。
    最后说一下Element的addListener方法，该方法可以简写为on，用来给Element对象注册事件，我们已经看到过on("click",function(){})这样的用法了。通过这个方法还可以一次注册多个事件，例如：

el.on({ 'click' : { fn: this.onClick, scope: this, delay: 100 }, 'mouseover' : { fn: this.onMouseOver, scope: this }, 'mouseout' : { fn: this.onMouseOut, scope: this } });

delay指出在事件触发多长时间以后执行事件处理函数，单位是毫秒。