上個系列中,我們用到了Ext.fly來獲得一個Element對象,其實Ext.fly是Ext.Element.fly的簡寫形式。類似的方法還有一個Ext.get,是Ext.Element.get的簡寫。這兩個方法都可以用使用Dom元素或者Dom元素的id作爲參數來獲得一個Element對象。區別在於fly返回的是Element輕量級的,佔用較少的內存,但是不保存對象的引用,每次使用都會改變先前的對象,而get則會緩存每次返回的Element對象,但是佔用較多的內存。我們通過一個例子來說明二者的區別,同時看看Element給我們提供的強大功能。在我們項目中添加一個html頁面,內容如下:
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對象並進行一些操作,代碼如下:
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對象,用來對動畫進行詳細的定製,我們把上 邊的代碼改一下,來看看帶動畫的效果:
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(){})這樣的用法了。通過這個方法還可以一次註冊多個事件,例如:
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指出在事件觸發多長時間以後執行事件處理函數,單位是毫秒。還有一種簡潔的寫法:
2 'click' : this.onClick,
3 'mouseover' : this.onMouseOver,
4 'mouseout' : this.onMouseOut,
5 scope: this
6});