作者:赫連紫軒(Puras)

參考:http://extjs.com/learn/Tutorial:Introduction_to_Ext

簡介:記錄一下ExtJS的一些簡單使用的方法.備忘...

開始...

在ExtJS里最常用的,應該就是Ext.onReady這個方法了,而且它也可能是你學習ExtJS所接觸的第一個方法,這個方法在當前的DOM加載完畢后自動調用,保證頁面內的所有元素都能被Script所引用.可以嘗試在這個方法中添加一條語句,看看頁面打開后是什么反映:

Ext.onReady(function() {

    alert('hello world!');

});

上面的代碼將在頁面加載完畢后彈出一對話框,打印出'hello world!'字樣.

獲取元素

還有一個常用的方法,就是獲取頁面上的元素了,ExtJS提供了一個get方法,可以根據ID取到頁面上的元素:

var myDiv = Ext.get('myDiv');

會取到頁面上ID為'myDiv'的元素.如果使用Element.dom的方法,則可以直接操作底層的DOM節點,Ext.get返回的則是一個Element對象.

在不能使用這種方式來獲取多個DOM的節點,或是要獲取一些ID不一致,但又有相同特征的時候,可以通過選擇器來進行獲取,比如要獲取頁面上所有的<p>標簽,則可以使用:

var ps = Ext.select('p');

這樣你就可以對所要獲取的元素進行操作了,select()方法返回的是Ext.CompositeElement對象,可以通過其中的each()方法對其所包含的節點進行遍歷:

ps.each(function(el) {

    el.highlight();

});

當然,如果你要是對獲取的所有元素進行相同的操作,可以直接應用于CompositeElement對象上,如:

ps.highlight();

或是:

Ext.select('p').highlight();

當然,select參數還可以更復雜一些,其中可以包括W3C Css3Dom選取器,基本的XPath,HTML屬性等,詳細情況,可以查看DomQuery API的文檔,來了解細節.

事件響應

獲取到了元素,則可能會對一些元素的事件進行一些處理,比如獲取一個按鈕,我們為它添加一個單擊事件的響應:

Ext.onReady(function() {

    Ext.get('myButton').on('click', function() {

        alert('You clicked the button!');

    });

});

當然,你可以把事件的響應加到通過select()方法獲取到的元素上:

Ext.select('p').on('click', function() {

    alert('You clicked a paragraph!');

});

Widgets

ExtJS還提供了豐富的UI庫來供大家使用.

消息窗口

將前面的alert()方法替換一種ExtJS提供的方案:

Ext.onReady(function() {

    Ext.get('myButton').on('click', function() {

        alert('You clicked the button!');

    });

});

而且它還可以如桌面開發一樣,來設置消息窗口是否模式的,也就是說在彈出窗口的時候,其他的操作是否可做.這點我很喜歡...^_^

還有非常好用的Grid,Tree,Menu等等,這些稍后會有更加詳細的介紹.

Ajax部分也提供了不錯的支持,稍后都會有詳細的介紹....

馬上就下班了,今天就暫時寫到這里吧.