我在項目中已經頻繁使用了jquery，這次主要是學習使用extjs，但現(xiàn)有的教程基本都是針對2.0的，而且后臺用到的語言也很少是.net平臺下的C#，所以我打算針對3.0版，后臺使用C#，記錄下自己的學習過程，希望能和志同道合的朋友一起探討，共同進步。
extjs的官方網站是http://www.extjs.com，目前最高版本是3.0.2，但是只有3.0.0的才沒有任何下載限制，可以點擊這里下載3.0版的。下載來的壓縮包里邊包含壓縮后的extjs庫，調試時用到的庫，具有可讀性的源代碼，文檔和例子。在開始之前，不妨先看下examples文件夾下的例子，對extjs有一個感性的認識，如果你覺得例子里邊的效果讓你心動，那么就一起開始extjs的學習之旅吧。
首先明確下我們需要引用的文件，包括adpter/ext/ext-base-debug.js,ext-all-debug.js和整個resource文件夾，當然，多數(shù)情況下，我們還需要ext-lang-zh_CN.js進行中文的本地化，該文件在src/locale目錄下。因為是學習階段，所以我們使用了debug版本，在實際的項目中，發(fā)布的時候要使用壓縮后的版本以減小文件體積。接下來，我們就秉承編程界的一貫傳統(tǒng)，開始我們的第一個Hello world程序。
新建一個文本文件，文件名改為Hello.htm，用文本編輯器打開，寫下如下代碼：

Hello.htm

daben.js的內容如下：

使用ie或者ff打開Hello.htm，可以看到一個彈出的對話框，和js的alert對話框一樣，但是漂亮了許多。
我們看看代碼，在html頁面中首先引用extjs的相關庫文件，注意引用順序，接下來是引用我們自己的js文件。我們簡單看下，Ext.onReady是在文檔加載完之后觸發(fā)的，它有一個參數(shù)是一個函數(shù)類型，該函數(shù)在事件出發(fā)的時候被調用。在這里我們用了匿名的函數(shù)，當然也可以把函數(shù)在外部定義好，然后把函數(shù)的名字作為參數(shù)傳遞進來。Ext.MessageBox.alert是一個彈出消息的對話框函數(shù)，第一個參數(shù)是標題，第二個參數(shù)是對話框的內容。Ext.Message類下還有模擬js的prompt對話框和comfirm對話框的方法，我們改動下daben.js看看confirm方法的效果：


光看對話框并不是很有趣，實際的web程序中，需要向服務器提交數(shù)據(jù)并根據(jù)服務器的響應來更新頁面中的內容，我們來看看extjs是如何實現(xiàn)的。下邊的例子中，我們將在頁面上放置一個編輯框和一個按鈕，當點擊按鈕之后，服務器將編輯框中輸入的內容轉化為大寫并顯示在頁面的一個div中。打開vs2008，新建一個web應用程序ExtjsDemo，刪掉自動添加的default.aspx文件。添加我們的hello.htm和daben.js文件以及我們要用到的extjs庫，添加完成后如圖所示：

可以看到在js目錄下邊，加了一個vvswd-ext_2.0.2.js的文件，從這里可以下載，這個文件可以實現(xiàn)vs2008對于extjs庫的智能提示，方便編程（不過我沒找到針對3.0版的，如果哪位朋友找到了麻煩發(fā)一份給我）。我們先來看下extjs中實現(xiàn)和服務器端通信的一個函數(shù)Ext.Ajax.request，該函數(shù)接受一個json對象作為參數(shù)，該對象有幾個常用的屬性:
    url:字符串類型，指明請求的地址
    params:請求時傳遞給服務器段的參數(shù)，可以是對象，字符串
    method:請求的方法，字符串類型，“GET"或者"POST"，注意必須是大寫的
    success:函數(shù)類型，請求成功后會執(zhí)行的函數(shù)，該函數(shù)有一個參數(shù)，是一個包含服務器端響應數(shù)據(jù)的XMLHttpRequest 對象
    failure:函數(shù)類型，請求失敗后會執(zhí)行的函數(shù)，該函數(shù)有一個參數(shù)，是一個包含服務器端響應數(shù)據(jù)的XMLHttpRequest 對象
    callback:函數(shù)類型，無論請求的結果如何都會執(zhí)行
    好，我們就具體來看看extjs是如何實現(xiàn)和服務器端的交互吧。先把我們的hello.htm頁面做如下改動：

然后是更改我們的daben.js文件了，改動之后的代碼如下：

我們來簡單分析下這個文件：第一行是為了使用vs的智能提示，注意把路徑寫對，而且必須要加在第一行。Ext.onReady已經介紹過了，Ext.fly是Ext.Element.fly的簡寫，該方法可以根據(jù)id獲得Element對象，Element類是Ext中一個非常重要的類，它對Dom進行了封裝，增加了一些操作以方便使用，并且兼容主流瀏覽器。getValue是Element類的方法，獲得元素的值，比較郁悶的是沒有相應的setValue方法，所以在后邊使用了update方法來更新元素的值。在向服務器端傳值之前進行客戶端的驗證是一個良好的編程習慣，這里只是簡單進行了字符串不為空的驗證，然后就使用了前邊說到的Ext.Ajax.request方法了，使用這個方法向頁面hello.aspx以post方式發(fā)送了數(shù)據(jù)，我們這里是以json對象的形式發(fā)送的，也可以寫成字符串形式，對于成功的響應，把響應的文本顯示在div中，對于失敗的響應，彈出一個對話框并且給出了錯誤碼。
接下來要進行服務器端的編程了。服務器端可以通過兩種方式接受客戶端傳遞過來的數(shù)據(jù)并且作出響應：使用aspx頁面和web服務。我們先介紹如何使用aspx頁來進行處理。在項目中增加一個頁面Hello.aspx，把頁面中除了第一行的頁面處理指令部分<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Hello.aspx.cs" Inherits="ExtjsDemo.hello" %>全部刪去。按下F7切換到代碼頁，開始編寫后臺的代碼。我們首先通過Request.Params["data"]來獲取前臺傳遞過來的數(shù)據(jù)，同樣，在對數(shù)據(jù)進行處理之前我們先進行數(shù)據(jù)的有效性驗證，這里只是簡單判斷了是否為空或者空字符串，然后我們就將處理后的結果用Response.Write方法發(fā)送給客戶端。后臺代碼如下：

運行后在編輯框輸入字符串，可以看到在下邊的div里邊以大寫的形式顯示了出來，通過FF的Firebug我們可以看到數(shù)據(jù)的交互。
除了使用aspx頁面來接受并處理客戶端傳遞過來的數(shù)據(jù)，我們還可以使用web服務的方式來進行。在項目中添加一個web服務，代碼如下：

當然，默認情況下，web服務是以xml格式來傳遞數(shù)據(jù)的，我們可以通過Firebug看到。xml很好很強大，不過有時我們只需要更小巧的json就足夠了，那么如何讓web服務傳遞的是json格式呢？我們只需要把請求頭中的Content-Type設置為application/json并且把參數(shù)使用Ext.util.JSON.encode進行編碼或者使用jsonData來代替params.