extjs学习笔记(二) Ext.Element类

其它 | 作者:慧都控件网 | 2009-10-13 10:04:48| 阅读 0 有用 (0) 评论 (0) 收藏


概述:上个系列中,我们用到了Ext.fly来获得一个Element对象,其实Ext.fly是Ext.Element.fly的简写形式。类似的方法还有一个Ext.get,是Ext.Element.get的简写。

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

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" >
 3 <head>
 4     <title>Element Demo</title>
 5     <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
 6 <script type="text/javascript" src="extjs/ext-base-debug.js"></script>
 7 <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
 8 <script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
 9 <script type="text/javascript" src="js/element.js"></script>
10 </head>
11 <body>
12 <input type="button" value="请点击我" id="btn" />
13 <div id="div1"></div>
14 <div id="div2"></div>
15 </body>
16 </html>

    当然还要添加element.js文件,我们先用Ext.get方法来获取element对象并进行一些操作,代码如下:

 1///<reference path="vswd-ext_2.0.2.js" />
 2/*
 3*作者:大笨
 4*日期:2009-10-12
 5*版本:1.0
 6*博客地址:http://yage.cnblogs.com
 7*/

 8
 9Ext.onReady(function() {
10    Ext.get("btn").on("click"function() {
11        var el1 = Ext.get("div1");
12        var el2 = Ext.get("div2");
13        el1.addClass("red");  //增加CSS类
14        el2.addClass("green");
15        el1.setWidth();  //设置宽度
16        el1.highlight();  //高亮显示
17        el1.center();  //居中
18        el1.setOpacity(0.5);  //设置透明度
19        el2.fadeIn({ endOpacity: 1//可以是0和1之间的任意值
20            easing: 'easeOut',
21            duration: 1
22        }
);
23        //el1.addClass("red").setWidth(100).setOpacity(0.5).center();
24    }
);
25}
);

    运行之后我们点击button按钮可以看到效果。代码都很直观,不需要过多的解释。现在我们把Element的get方法换成fly,运行之后我们会发现,所有的操作都在div2上进行,因为div1的Element引用并未被保存下来,第二次使用fly方法的时候改写了第一次获得的Element对象,所以我们看到操作都在div2上进行了。很多用过jquery的人喜欢用方法链(method chain)的方式写代码,由于Element对象的大多数方法返回的还是Element对象,所以这里也可以采用方法链,就像 我在23行中写的那样。但是要注意highlight,fadeIn,fadeOut这些方法事实上并不是Element对象的方法,它们其实是 Ext.Fx类中的方法,只是用了js的apply方法给加到Element对象上去了(apply方法的使用可以参考这里),Fx 泪中的方法使用了内部的效果队列,效果是按照特定的顺序的,而Element对象的方法则是立即执行的。所以在方法链中同时使用Element和Fx的方 法时需要注意,有可能会产生不希望看的结果。
    我们的代码中用到了setWith方法,在Element类还有一些以set开头的方法,用来进行一些设置,这些方大多 数有一个可选的参数用来呈现动画的效果,这个参数可以是布尔值,可以用来开启默认的设置,也可以是一个json对象,用来对动画进行详细的定制,我们把上 边的代码改一下,来看看带动画的效果: 

 1///<reference path="vswd-ext_2.0.2.js" />
 2/*
 3*作者:大笨
 4*日期:2009-10-12
 5*版本:1.0
 6*博客地址:http://yage.cnblogs.com
 7*/

 8Ext.onReady(function() {
 9    Ext.get("btn").on("click"function() {     
10        Ext.fly("div1").addClass("red").setWidth(100{
11            duration: 3,
12            easing: 'elasticIn',
13            callback: function() {Ext.Msg.alert("信息","div1的宽度被设置为100") },
14            scope: this
15        }
);
16    }
);
17}
);

    简单解释下上边的代码: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(){})这样的用法了。通过这个方法还可以一次注册多个事件,例如:

 1el.on({
 2    'click' : {
 3        fn: this.onClick,
 4        scope: this,
 5        delay: 100
 6    }
,
 7    'mouseover' : {
 8        fn: this.onMouseOver,
 9        scope: this
10    }
,
11    'mouseout' : {
12        fn: this.onMouseOut,
13        scope: this
14    }

15}
);
16

    delay指出在事件触发多长时间以后执行事件处理函数,单位是毫秒。还有一种简洁的写法:

1el.on({
2    'click' : this.onClick,
3    'mouseover' : this.onMouseOver,
4    'mouseout' : this.onMouseOut,
5    scope: this
6}
);
0
有用(0) 没用(0)
本站文章除注明转载外,均为本站原创或翻译
欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明:文章转载自:慧都控件网 [http://www.evget.com]
本文地址:http://www.evget.com/article/2009/10/13/12936.html
用户评论: 您的宝贵经验,能为更多人带来帮助,登录后才能评论。
评论加载中...



    百度