我在項目中已經頻繁使用了jquery，這次主要是學習使用extjs，但現有的教程基本都是針對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檔案夾，當然，多數情況下，我們還需要ext-lang-zh_CN.js進行中文的本地化，該檔案在src/locale目錄下。因為是學習階段，所以我們使用了debug版本，在實際的項目中，發布的時候要使用壓縮後的版本以減小檔案體積。接下來，我們就秉承編程界的一貫傳統，開始我們的第一個Hello world程式。
建立一個文字檔，檔案名稱改為Hello.htm，用文字編輯器開啟，寫下如下代碼：
Hello.htm
複製代碼 代碼如下:<html>daben.js的內容如下： 複製代碼 代碼如下:/**//*
*作者：大笨
*日期：2009-10-10
*版本：1.0
*/
Ext.onReady(function(){
Ext.MessageBox.alert("資訊","Hello world");
});
使用ie或者ff開啟Hello.htm，可以看到一個彈出的對話方塊，和js的alert對話方塊一樣，但是漂亮了許多。
我們看看代碼，在html頁面中首先引用extjs的相關庫檔案，注意引用順序，接下來是引用我們自己的js檔案。我們簡單看下，Ext.onReady是在文檔載入完之後觸發的，它有一個參數是一個函數類型，該函數在事件出發的時候被調用。在這裡我們用了匿名的函數，當然也可以把函數在外部定義好，然後把函數的名字作為參數傳遞進來。Ext.MessageBox.alert是一個彈出訊息的對話方塊函數，第一個參數是標題，第二個參數是對話方塊的內容。Ext.Message類下還有類比js的prompt對話方塊和comfirm對話方塊的方法，我們改動下daben.js看看confirm方法的效果： 複製代碼 代碼如下:Ext.onReady(function(){
//Ext.MessageBox.alert("資訊","Hello world");
Ext.MessageBox.confirm("comfirm","類比js的comfirm對話方塊",function(btn){
alert("點擊了"+btn+"按鈕");
});
});
光看對話方塊並不是很有趣，實際的web程式中，需要向伺服器提交資料並根據伺服器的響應來更新頁面中的內容，我們來看看extjs是如何?的。下邊的例子中，我們將在頁面上放置一個編輯框和一個按鈕，當點擊按鈕之後，伺服器將編輯框中輸入的內容轉化為大寫並顯示在頁面的一個div中。開啟vs2008，建立一個web應用程式ExtjsDemo，刪掉自動添加的default.aspx檔案。添加我們的hello.htm和daben.js檔案以及我們要用到的extjs庫，添加完成後：
可以看到在js目錄下邊，加了一個vvswd-ext_2.0.2.js的檔案，從這裡可以下載，這個檔案可以實現vs2008對於extjs庫的智能提示，方便編程（不過我沒找到針對3.0版的，如果哪位朋友找到了麻煩發一份給我）。我們先來看下extjs中實現和伺服器端通訊的一個函數Ext.Ajax.request，該函數接受一個json對象作為參數，該對象有幾個常用的屬性:
url:字串類型，指明請求的地址
params:請求時傳遞給伺服器段的參數，可以是對象，字串
method:請求的方法，字串類型，“GET"或者"POST"，注意必須是大寫的
success:函數類型，請求成功後會執行的函數，該函數有一個參數，是一個包含伺服器端響應資料的XMLHttpRequest 對象
failure:函數類型，請求失敗後會執行的函數，該函數有一個參數，是一個包含伺服器端響應資料的XMLHttpRequest 對象
callback:函數類型，無論請求的結果如何都會執行
好，我們就具體來看看extjs是如何?和伺服器端的互動吧。先把我們的hello.htm頁面做如下改動：複製代碼 代碼如下:<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Extjs hello world dialog</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/ext-base-debug.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/daben.js"></script>
</head>
<body>
<input type="text" id="txt" /><input type="button" id="btn" value="提交" />
<div id="div"></div>
</body>
</html>
然後是更改我們的daben.js檔案了，改動之後的代碼如下： 複製代碼 代碼如下:///<reference path="vswd-ext_2.0.2.js" />
/**//*
*作者：大笨
*日期：2009-10-10
*版本：1.0
*/
Ext.onReady(function() {
//Ext.MessageBox.alert("資訊","Hello world");
/**//*Ext.MessageBox.confirm("comfirm","類比js的comfirm對話方塊",function(btn){
alert("點擊了"+btn+"按鈕");
});*/
Ext.get("btn").on("click", function() {
var data = Ext.fly("txt").getValue();
if (data == "") {
Ext.Msg.alert("警告", "請輸入字串");
}
else {
Ext.Ajax.request({
url: "hello.aspx",
params: { data: data },
method: "POST",
success: function(response) {
Ext.fly("div").update(response.responseText);
},
failure: function(response) {
Ext.Msg.alert("錯誤", "請求失敗，錯誤碼為：" + response.status);
}
});
}
});
});
我們來簡單分析下這個檔案：第一行是為了使用vs的智能提示，注意把路徑寫對，而且必須要加在第一行。Ext.onReady已經介紹過了，Ext.fly是Ext.Element.fly的簡寫，該方法可以根據id獲得Element對象，Element類是Ext中一個非常重要的類，它對Dom進行了封裝，增加了一些操作以方便使用，並且相容主流瀏覽器。getValue是Element類的方法，獲得元素的值，比較鬱悶的是沒有相應的setValue方法，所以在後邊使用了update方法來更新元素的值。在向伺服器端傳值之前進行用戶端的驗證是一個良好的編程習慣，這裡只是簡單進行了字串不為空白的驗證，然後就使用了前邊說到的Ext.Ajax.request方法了，使用這個方法向頁面hello.aspx以post方式發送了資料，我們這裡是以json對象的形式發送的，也可以寫成字串形式，對於成功的響應，把響應的文本顯示在div中，對於失敗的響應，彈出一個對話方塊並且給出了錯誤碼。
接下來要進行伺服器端的編程了。伺服器端可以通過兩種方式接受用戶端傳遞過來的資料並且作出響應：使用aspx頁面和web服務。我們先介紹如何使用aspx頁來進行處理。在項目中增加一個頁面Hello.aspx，把頁面中除了第一行的頁面處理指示部分<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Hello.aspx.cs" Inherits="ExtjsDemo.hello" %>全部刪去。按下F7切換到字碼頁，開始編寫背景代碼。我們首先通過Request.Params["data"]來擷取前台傳遞過來的資料，同樣，在對資料進行處理之前我們先進行資料的有效性驗證，這裡只是簡單判斷了是否為空白或者Null 字元串，然後我們就將處理後的結果用Response.Write方法發送給用戶端。後台代碼如下： 複製代碼 代碼如下:using System;
/**//*
*作者：大笨
*日期：2009-10-10
*版本：1.0
*/
namespace ExtjsDemo
{
public partial class Hello : System.Web.UI.Page
{
頁面載入#region 頁面載入
/**//// <summary>
/// 頁面載入
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Page_Load(object sender, EventArgs e)
{
string data = Request.Params["data"];
if(!string.IsNullOrEmpty(data))
{
Response.Write(data.ToUpper());
}
}
#endregion
}
}
運行後在編輯框輸入字串，可以看到在下邊的div裡邊以大寫的形式顯示了出來，通過FF的Firebug我們可以看到資料的互動。
除了使用aspx頁面來接受並處理用戶端傳遞過來的資料，我們還可以使用web服務的方式來進行。在項目中添加一個web服務，代碼如下： 複製代碼 代碼如下:using System;
using System.Web.Services;
/**//*
*作者：大笨
*日期：2009-10-10
*版本：1.0
*/
namespace ExtjsDemo
{
/**//// <summary>
/// HelloService 的摘要說明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 若要允許使用 ASP.NET AJAX 從指令碼中調用此 Web 服務，請取消對下行的注釋。
// [System.Web.Script.Services.ScriptService]
public class HelloService : System.Web.Services.WebService
{
將傳入的字串改為大寫#region 將傳入的字串改為大寫
/**//// <summary>
/// 將傳入的字串改為大寫
/// </summary>
/// <param name="data">需要轉為大寫的字串</param>
/// <returns>大寫字串</returns>
[WebMethod]
public string ToUpper(string data)
{
if(!string.IsNullOrEmpty(data))
return data.ToUpper();
throw new Exception("字串不可為空！");
}
#endregion
}
}
當然，預設情況下，web服務是以xml格式來傳遞資料的，我們可以通過Firebug看到。xml很好很強大，不過有時我們只需要更小巧的json就足夠了，那麼如何讓web服務傳遞的是json格式呢？我們只需要把要求標頭中的Content-Type設定為application/json並且把參數使用Ext.util.JSON.encode進行編碼或者使用jsonData來代替params.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
