extjs 學習筆記（二） Ext.Element類
2024-05-06 14:13:35
供稿：網友
區別在于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 Demo</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/ext-base-debug.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/element.js"></script>
</head>
<body>
<input type="button" value="請點擊我" id="btn" />
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
當然還要添加element.js文件，我們先用Ext.get方法來獲取element對象并進行一些操作，代碼如下：
代碼如下:
///<reference path="vswd-ext_2.0.2.js" />
/**//*
*作者：大笨
*日期：2009-10-12
*版本：1.0
*/
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.center(); //居中
el1.setOpacity(0.5); //設置透明度
el2.fadeIn({ endOpacity: 1, //可以是0和1之間的任意值
easing: 'easeOut',
duration: 1
});
//el1.addClass("red").setWidth(100).setOpacity(0.5).center();
});
});
運行之后我們點擊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的方 法時需要注意，有可能會產生不希望看的結果。
