配置開發ExtJS環境


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/

image

點擊"Download for Ext JS 4.1.1a GPL"就可以下載到了。

如果要其它版本的ExtJS,可以在Related Downloads列表中找到相應的版本:

image

 

添加ExtJS引用

ExtJS是純Javascript開發的,所以可以在任何Web項目中使用。作為演示,我這里就將其放在asp.net項目中。

首先將下載好的ExtJS壓縮包解壓,得到如下的目錄:

image

初學者看到這么多文件夾和文件會不會有點眼暈~~

其實要做ExtJS的開發,不用把所有的文件都引入項目,只需要部分文件就可以了。這是我添加到項目中的文件:

image

locale目錄存放的是ExtJS的語言包,我們在項目中需要中文的語言包:ext-lang-zh_CN.js

resources中存放的是皮膚和圖片,都是些資源文件,我這里全部都添加到了項目中。你也可以根據自己的需要選擇性的添加某一個皮膚樣式的資源。

ext-all-debug.js 是ExtJS的可調試版本,方便開發人員進行調試。

ext-all.js 是發布版本。

在asp.net中,我們可以將這些引用放在一個模板頁中,這樣各個子頁面就不需要分別引用了。我的ext.master的代碼如下:

image

這是一個默認的master,只是添加了一些Ext的引用。

開始編碼:Hello World

為了驗證是否已經成功的引用ExtJS,我們來編寫一個Helloworld程序進行驗證。程序的目的是:在頁面上創建一個ExtJS的Button,當點擊Button時彈出Ext的提示窗口,在窗口內顯示Helloworld。

首先要新建一個Helloworld.aspx頁面,這個頁面使用了我們上面的ext.master模板。

添加一個ExtJS的Button:

image

接下來為Button添加Handler,添加Handler的方法是直接在配置項中加入handler,修改后的代碼如下:

image

運行這個頁面,當頁面加載完成以后,我們將看到如下內容:

image

點擊確定按鈕:

image

OK,如果你看到這個彈出窗口,說明你的Ext已經正常工作了……


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM