下文摘自資料：
Element：Ext的核心大多數(shù)的JavaScript操作都需要先獲取頁面上的某個元素的引用（reference）,好讓你來做些實質(zhì)性的事情。傳統(tǒng)的JavaScript做法，是通過ID獲取Dom節(jié)點的：
var myDiv = document.getElementById('myDiv');
這毫無問題，不過這樣單單返回一個對象（DOM節(jié)點），用起來并不是太實用和方便。為了要用那節(jié)點干點事情，你還將要手工編寫不少的代碼；另外，對于不同類型瀏覽器之間的差異，要處理起來可真頭大了。
進入Ext.element 對象。元素（element）的的確確是Ext的心臟地帶，--無論是訪問元素（elements）還是完成一些其他動作，都要涉及它。Element的 API是整個Ext庫的基礎(chǔ)，如果你時間不多，只是想了解Ext中的一兩個類的話，Element一定是首選！
由ID獲取一個Ext Element 的相應(yīng)代碼如下（首頁ExtStart.htm 包含一個ID為“myDiv”的 div，然后，在ExtStart.js中加入下列語句）： The corresponding code to get an Ext Element by ID looks like this (the starter page ExtStart.html contains a div with the id "myDiv," so go ahead and add this code to ExtStart.js):
Ext.onReady(function() {
var myDiv = Ext.get('myDiv');
});
再回頭看看Element對象，發(fā)現(xiàn)什么有趣的東東呢？
Element包含了常見的DOM方法和屬性，提供一個快捷的、統(tǒng)一的、跨瀏覽器的接口（若使用Element.dom的話，就可以直接訪問底層DOM的節(jié)點。）；
Element.get()方法提供內(nèi)置緩存（Cache)，多次訪問同一對象效率上有極大優(yōu)勢；
內(nèi)置常用的DOM節(jié)點的動作，并且是跨瀏覽器的定位的位置、大小、動畫、拖放等等（添加/移除 CSS 類, 添加/移除事件處理程序, 定位, 改變大小, 動畫, 拖放）。
這意味著你可用少量的代碼來做各種各樣的事情，這里僅僅是一個簡單的例子（完整的列表在Element API 文檔中）。
繼續(xù)在ExtStart.js中，在剛才我們獲取好myDiv的位置中加入：
myDiv.highlight(); //黃色高亮顯示然后漸退
myDiv.addClass('red'); // 添加自定義CSS類 (在ExtStart.css定義)
myDiv.center(); //在視圖中將元素居中
myDiv.setOpacity(.25); // 使元素半透明
獲取多個DOM的節(jié)點通常情況下，想獲取多個DOM的節(jié)點，難以依靠ID的方式來獲取。有可能因為沒設(shè)置ID,或者你不知道ID,又或者直接用ID方式引用有太多元素了。這種情況下，你就會不用ID來作為獲取元素的依據(jù)，可能會用屬性（attribute）或CSS Classname代替?；谝陨系脑?，Ext引入了一個異常強大的Dom Selector庫，叫做DomQuery。
DomQuery可作為單獨的庫使用，但常用于Ext，你可以在上下文環(huán)境中（Context）獲取多個元素，然后通過Element接口調(diào)用。令人欣喜的是，Element對象本身便有Element.selcect的方法來實現(xiàn)查詢，即內(nèi)部調(diào)用DomQuery選取元素。這個簡單的例子中，ExtStart.htm包含若干段落（<p>標簽），沒有一個是有ID的，而你想輕松地通過一次操作馬上獲取每一段，全體執(zhí)行它們的動作，可以這樣做：
// 每段高亮顯示
Ext.select('p').highlight();
Element.select在這個例子中的方便性顯露無疑。它返回一個復(fù)合元素，能通過元素接口（Element interface）訪問每個元素。這樣做的好處是可不用循環(huán)和不分別訪問每一個元素。
DomQuery的選取參數(shù)可以是一段較長的數(shù)組，其中包括W3C CSS3 Dom選取器、基本XPatch、HTML屬性和更多，請參閱DomQuery API文檔以了解這功能強大的庫個中細節(jié)。
響應(yīng)事件到這范例為止，我們所寫的代碼都是放在onReady中，即當頁面加載后總會立即執(zhí)行，功能較單一——這樣的話，你便知道，如何響應(yīng)某個動作或事件來執(zhí)行你希望做的事情，做法是，先分配一個function，再定義一個event handler事件處理器來響應(yīng)。我們由這個簡單的范例開始，打開ExtStart.js，編輯下列的代碼：
Ext.onReady(function() {
Ext.get('myButton').on('click', function(){
alert("你單擊了按鈕");
});
});
代碼依然會加載好頁面后執(zhí)行，不過重要的區(qū)別是，包含alert()的function是已定義好的，但它不會立即地被執(zhí)行，是分配到按鈕的單擊事件中。用淺顯的文字解釋，就是：獲取ID為'myDottom'元素的引用，監(jiān)聽任何發(fā)生這個元素上被單擊的情況，并分配一個function,以準備任何單擊元素的情況。
一般來說，Element.select也能做同樣的事情，即作用在獲取一組元素上。下一例中，演示了頁面中的某一段落被單擊后，便有彈出窗口：
Ext.onReady(function() {
Ext.select('p').on('click', function() {
alert("你單擊了一段落;");
});
});
這兩個例子中，事件處理的function均是簡單幾句，沒有函數(shù)的名稱，這種類型函數(shù)稱為“匿名函數(shù)（anonymous function）”，即是沒有名的的函數(shù)。你也可以分配一個有名字的event handler,這對于代碼的重用或多個事件很有用。下一例等效于上一例：
Ext.onReady(function() {
var paragraphClicked = function() {
alert("你單擊了一段落;");
}
Ext.select('p').on('click', paragraphClicked);
});
到目前為止，我們已經(jīng)知道如何執(zhí)行某個動作。但當事件觸發(fā)時，我們?nèi)绾蔚弥@個event handler執(zhí)行時是作用在哪一個特定的元素上呢？要明確這一點非常簡單，Element.on方法傳入到even handler的function中（我們這里先討論第一個參數(shù)，不過你應(yīng)該瀏覽API文檔以了解even handler更多的細節(jié)）。在我們之前的例子中，function是忽略這些參數(shù)的，到這里可有少許的改變，——我們在功能上提供了更深層次的控制。必須先說明的是，這實際上是Ext的事件對象（event object）,一個跨瀏覽器和擁有更多控制的事件的對象。例如，可以用下列的語句，得到這個事件響應(yīng)所在的DOM節(jié)點：
Ext.onReady(function() {
var paragraphClicked = function(e) {
Ext.get(e.target).highlight();
}
Ext.select('p').on('click', paragraphClicked);
});
注意得到的e.target是DOM節(jié)點，所以我們首先將其轉(zhuǎn)換成為EXT的Elemnet元素，然后執(zhí)行欲完成的事件，這個例子中，我們看見段落是高亮顯示的。
好了，今天就簡單寫幾個讓大家認識下。夜深了，該睡了，以后學(xué)了繼續(xù)寫。這東西太有用了。
演示下載地址 http://xiazai.jb51.net/200812/yuanma/jb51.net_ExtjsDemo-1.rar

最新評論