|
|
我在項目中已經頻繁使用了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>
<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>
<div id="hello"></div>
</body>
</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"]來獲取前臺傳遞過來的數據，同樣，在對數據進行處理之前我們先進行數據的有效性驗證，這里只是簡單判斷了是否為空或者空字符串，然后我們就將處理后的結果用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.
JavaScript技術：extjs 學習筆記（一） 一些基礎知識，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
