ExtJS可以用來開發RIA也即富客戶端的AJAX應用,是一個用javascript寫的,主要用於創建前端用戶界面,與后台技術無關的前端RIA框架。
ExtJS的官方網站:http://www.sencha.com/products/extjs/
我們可以從官方網站上面下載到最新版的基於GPLv3開源的ExtJS,目前最新版是4.1.1a。如果要在商業項目中使用ExtJS,需要購買它的商業版授權,貌似不便宜的說!
下載ExtJS
訪問官方網站,然后打開下載頁面:http://www.sencha.com/products/extjs/download/
點擊"Download for Ext JS 4.1.1a GPL"就可以下載到了。
如果要其它版本的ExtJS,可以在Related Downloads列表中找到相應的版本:
添加ExtJS引用
ExtJS是純Javascript開發的,所以可以在任何Web項目中使用。作為演示,我這里就將其放在asp.net項目中。
首先將下載好的ExtJS壓縮包解壓,得到如下的目錄:
初學者看到這么多文件夾和文件會不會有點眼暈~~
其實要做ExtJS的開發,不用把所有的文件都引入項目,只需要部分文件就可以了。這是我添加到項目中的文件:
locale目錄存放的是ExtJS的語言包,我們在項目中需要中文的語言包:ext-lang-zh_CN.js
resources中存放的是皮膚和圖片,都是些資源文件,我這里全部都添加到了項目中。你也可以根據自己的需要選擇性的添加某一個皮膚樣式的資源。
ext-all-debug.js 是ExtJS的可調試版本,方便開發人員進行調試。
ext-all.js 是發布版本。
在asp.net中,我們可以將這些引用放在一個模板頁中,這樣各個子頁面就不需要分別引用了。我的ext.master的代碼如下:
這是一個默認的master,只是添加了一些Ext的引用。
開始編碼:Hello World
為了驗證是否已經成功的引用ExtJS,我們來編寫一個Helloworld程序進行驗證。程序的目的是:在頁面上創建一個ExtJS的Button,當點擊Button時彈出Ext的提示窗口,在窗口內顯示Helloworld。
首先要新建一個Helloworld.aspx頁面,這個頁面使用了我們上面的ext.master模板。
添加一個ExtJS的Button:
接下來為Button添加Handler,添加Handler的方法是直接在配置項中加入handler,修改后的代碼如下:
運行這個頁面,當頁面加載完成以后,我們將看到如下內容:
點擊確定按鈕:
OK,如果你看到這個彈出窗口,說明你的Ext已經正常工作了……