Ext入門2

 

響應事件

      到這範例爲止,我們所寫的代碼都是放在onReady中,即當頁面加載後總會立即執行,功能較單一——這樣的話,你便知道,如何響應某個動作或事件來執行你希望做的事情,做法是,先分配一個function,再定義一個event handler事件處理器來響應。我們由這個簡單的範例開始,

Ext. 
Ext.., 
;
;
;

      代碼依然會加載好頁面後執行,不過重要的區別是,包含alert()的function是已定義好的,但它不會立即地被執行,是分配到按鈕的單擊事件中。用淺顯的文字解釋,就是:獲取ID爲'myDottom'元素的引用,監聽任何發生這個元素上被單擊的情況,並分配一個function,以準備任何單擊元素的情況。

      一般來說,Element.select也能做同樣的事情,即作用在獲取一組元素上。下一例中,演示了頁面中的某一段落被單擊後,便有彈出窗口:

Ext. 
Ext..,  
;
;
;

      這兩個例子中,事件處理的function均是簡單幾句,沒有函數的名稱,這種類型函數稱爲“匿名函數(anonymous function)”,即是沒有名的的函數。你也可以分配一個有名字的event handler,這對於代碼的重用或多個事件很有用。下一例等效於上一例:

Ext. 
 paragraphClicked =  
"You clicked a paragraph";
Ext.., paragraphClicked;
;

      到目前爲止,我們已經知道如何執行某個動作。但當事件觸發時,我們如何得知這個event handler執行時是作用在哪一個特定的元素上呢?要明確這一點非常簡單,Element.on方法傳入到even handler的function中(我們這裏先討論第一個參數,不過你應該瀏覽API文檔以瞭解even handler更多的細節)。在我們之前的例子中,function是忽略這些參數的,到這裏可有少許的改變,——我們在功能上提供了更深層次的控制。必須先說明的是,這實際上是Ext的事件對象(event object),一個跨瀏覽器和擁有更多控制的事件的對象。例如,可以用下列的語句,得到這個事件響應所在的DOM節點:

Ext. 
 paragraphClicked = e 
Ext.e..;
Ext.., paragraphClicked;
;

      注意得到的e.target是DOM節點,所以我們首先將其轉換成爲EXT的Elemnet元素,然後執行欲完成的事件,這個例子中,我們看見段落是高亮顯示的。

使用Widgets

(Widget原意爲“小器件”,現指頁面中UI控件)

      除了我們已經討論過的核心JavaScript庫,當前的Ext亦包括了一系列的最前端的JavaScirptUI組件庫。文本以一些常用的widget爲例子,作簡單的介紹。

MessageBox

      比起略爲沉悶的“HelloWolrd”消息窗口,我們做少許變化,前面我們寫的代碼是,單擊某個段落便會高亮顯示,現在是單擊段落,在消息窗口中顯示段落內容出來。
在上面的paragraphClicked的function中,將這行代碼:

Ext.e..;

替換爲:

 paragraph = Ext.e.;
paragraph.;
Ext.. title: ,
msg: paragraph..,
width:,
buttons: Ext..,
animEl: paragraph
;

      這裏有些新的概念需要討論一下。在第一行中我們創建了一個局部變量(Local Variable)來保存某個元素的引用,即被單擊的那個DOM節點(本例中,DOM節點指的是段落paragrah,事因我們已經定義該事件與標籤發生關聯的了)。爲什麼要這樣做呢?嗯...觀察上面的代碼,我們需要引用同一元素來高亮顯示,在MessageBox中也是引用同一元素作爲參數使用。
一般來說,多次重複使用同一值(Value)或對象,是一個不好的方式,所以,作爲一個具備良好OO思維的開發者,應該是將其分配到一個局部變量中,反覆使用這變量!

      現在,爲了我們接下來闡述新概念的演示,請觀察MessageBox的調用。乍一看,這像一連串的參數傳入到方法中,但仔細看,這是一個非常特別的語法。實際上,傳入到MessageBox.show的只有一個參數:一個Object literal,包含一組屬性和屬性值。在Javascript中,Object Literal是動態的,你可在任何時候用{和}創建一個典型的對象(object)。其中的字符由一系列的name/value組成的屬性,屬性的格式是[property name]:[property value]。在整個Ext中,你將會經常遇到這種語法,因此你應該馬上消化並吸收這個知識點!
      使用Object Literal的原因是什麼呢?主要的原因是“可伸縮性(flexibility)”的考慮",隨時可新增、刪除屬性,亦可不管順序地插入。而方法不需要改變。這也是多個參數的情況下,爲最終開發者帶來不少的方便(本例中的MessageBox.show())。例如,我們說這兒的foo.action方法,有四個參數,而只有一個是你必須傳入的。本例中,你想像中的代碼可能會是這樣的foo.action(null, null, null, 'hello').,若果那方法用Object Literal來寫,卻是這樣, foo.action({ param4: 'hello' }),這更易用和易讀。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章