|
|
我在項(xiàng)目中已經(jīng)頻繁使用了jquery，這次主要是學(xué)習(xí)使用extjs，但現(xiàn)有的教程基本都是針對(duì)2.0的，而且后臺(tái)用到的語(yǔ)言也很少是.NET平臺(tái)下的C#，所以我打算針對(duì)3.0版，后臺(tái)使用C#，記錄下自己的學(xué)習(xí)過(guò)程，希望能和志同道合的朋友一起探討，共同進(jìn)步。
extjs的官方網(wǎng)站是http://www.extjs.com，目前最高版本是3.0.2，但是只有3.0.0的才沒(méi)有任何下載限制，可以點(diǎn)擊這里下載3.0版的。下載來(lái)的壓縮包里邊包含壓縮后的extjs庫(kù)，調(diào)試時(shí)用到的庫(kù)，具有可讀性的源代碼，文檔和例子。在開始之前，不妨先看下examples文件夾下的例子，對(duì)extjs有一個(gè)感性的認(rèn)識(shí)，如果你覺(jué)得例子里邊的效果讓你心動(dòng)，那么就一起開始extjs的學(xué)習(xí)之旅吧。
首先明確下我們需要引用的文件，包括adpter/ext/ext-base-debug.js,ext-all-debug.js和整個(gè)resource文件夾，當(dāng)然，多數(shù)情況下，我們還需要ext-lang-zh_CN.js進(jìn)行中文的本地化，該文件在src/locale目錄下。因?yàn)槭菍W(xué)習(xí)階段，所以我們使用了debug版本，在實(shí)際的項(xiàng)目中，發(fā)布的時(shí)候要使用壓縮后的版本以減小文件體積。接下來(lái)，我們就秉承編程界的一貫傳統(tǒng)，開始我們的第一個(gè)Hello world程序。
新建一個(gè)文本文件，文件名改為Hello.htm，用文本編輯器打開，寫下如下代碼：
Hello.htm
復(fù)制代碼 代碼如下:
<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的內(nèi)容如下：
復(fù)制代碼 代碼如下:
/**//*
*作者：大笨
*日期：2009-10-10
*版本：1.0
*/
Ext.onReady(function(){
Ext.MessageBox.alert("信息","Hello world");
});
使用ie或者ff打開Hello.htm，可以看到一個(gè)彈出的對(duì)話框，和js的alert對(duì)話框一樣，但是漂亮了許多。
我們看看代碼，在html頁(yè)面中首先引用extjs的相關(guān)庫(kù)文件，注意引用順序，接下來(lái)是引用我們自己的js文件。我們簡(jiǎn)單看下，Ext.onReady是在文檔加載完之后觸發(fā)的，它有一個(gè)參數(shù)是一個(gè)函數(shù)類型，該函數(shù)在事件出發(fā)的時(shí)候被調(diào)用。在這里我們用了匿名的函數(shù)，當(dāng)然也可以把函數(shù)在外部定義好，然后把函數(shù)的名字作為參數(shù)傳遞進(jìn)來(lái)。Ext.MessageBox.alert是一個(gè)彈出消息的對(duì)話框函數(shù)，第一個(gè)參數(shù)是標(biāo)題，第二個(gè)參數(shù)是對(duì)話框的內(nèi)容。Ext.Message類下還有模擬js的prompt對(duì)話框和comfirm對(duì)話框的方法，我們改動(dòng)下daben.js看看confirm方法的效果：
復(fù)制代碼 代碼如下:
Ext.onReady(function(){
//Ext.MessageBox.alert("信息","Hello world");
Ext.MessageBox.confirm("comfirm","模擬js的comfirm對(duì)話框",function(btn){
alert("點(diǎn)擊了"+btn+"按鈕");
});
});
光看對(duì)話框并不是很有趣，實(shí)際的web程序中，需要向服務(wù)器提交數(shù)據(jù)并根據(jù)服務(wù)器的響應(yīng)來(lái)更新頁(yè)面中的內(nèi)容，我們來(lái)看看extjs是如何實(shí)現(xiàn)的。下邊的例子中，我們將在頁(yè)面上放置一個(gè)編輯框和一個(gè)按鈕，當(dāng)點(diǎn)擊按鈕之后，服務(wù)器將編輯框中輸入的內(nèi)容轉(zhuǎn)化為大寫并顯示在頁(yè)面的一個(gè)div中。打開vs2008，新建一個(gè)web應(yīng)用程序ExtjsDemo，刪掉自動(dòng)添加的default.ASPx文件。添加我們的hello.htm和daben.js文件以及我們要用到的extjs庫(kù)，添加完成后如圖所示： 
可以看到在js目錄下邊，加了一個(gè)vvswd-ext_2.0.2.js的文件，從這里可以下載，這個(gè)文件可以實(shí)現(xiàn)vs2008對(duì)于extjs庫(kù)的智能提示，方便編程（不過(guò)我沒(méi)找到針對(duì)3.0版的，如果哪位朋友找到了麻煩發(fā)一份給我）。我們先來(lái)看下extjs中實(shí)現(xiàn)和服務(wù)器端通信的一個(gè)函數(shù)Ext.Ajax.request，該函數(shù)接受一個(gè)json對(duì)象作為參數(shù)，該對(duì)象有幾個(gè)常用的屬性:
url:字符串類型，指明請(qǐng)求的地址
params:請(qǐng)求時(shí)傳遞給服務(wù)器段的參數(shù)，可以是對(duì)象，字符串
method:請(qǐng)求的方法，字符串類型，“GET"或者"POST"，注意必須是大寫的
success:函數(shù)類型，請(qǐng)求成功后會(huì)執(zhí)行的函數(shù)，該函數(shù)有一個(gè)參數(shù)，是一個(gè)包含服務(wù)器端響應(yīng)數(shù)據(jù)的XMLHttpRequest 對(duì)象
failure:函數(shù)類型，請(qǐng)求失敗后會(huì)執(zhí)行的函數(shù)，該函數(shù)有一個(gè)參數(shù)，是一個(gè)包含服務(wù)器端響應(yīng)數(shù)據(jù)的XMLHttpRequest 對(duì)象
callback:函數(shù)類型，無(wú)論請(qǐng)求的結(jié)果如何都會(huì)執(zhí)行
好，我們就具體來(lái)看看extjs是如何實(shí)現(xiàn)和服務(wù)器端的交互吧。先把我們的hello.htm頁(yè)面做如下改動(dòng)：
復(fù)制代碼 代碼如下:
<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文件了，改動(dòng)之后的代碼如下：
復(fù)制代碼 代碼如下:
///<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對(duì)話框",function(btn){
alert("點(diǎn)擊了"+btn+"按鈕");
});*/
Ext.get("btn").on("click", function() {
var data = Ext.fly("txt").getValue();
if (data == "") {
Ext.Msg.alert("警告", "請(qǐng)輸入字符串");
}
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("錯(cuò)誤", "請(qǐng)求失敗，錯(cuò)誤代碼為：" + response.status);
}
});
}
});
});
我們來(lái)簡(jiǎn)單分析下這個(gè)文件：第一行是為了使用vs的智能提示，注意把路徑寫對(duì)，而且必須要加在第一行。Ext.onReady已經(jīng)介紹過(guò)了，Ext.fly是Ext.Element.fly的簡(jiǎn)寫，該方法可以根據(jù)id獲得Element對(duì)象，Element類是Ext中一個(gè)非常重要的類，它對(duì)Dom進(jìn)行了封裝，增加了一些操作以方便使用，并且兼容主流瀏覽器。getValue是Element類的方法，獲得元素的值，比較郁悶的是沒(méi)有相應(yīng)的setValue方法，所以在后邊使用了update方法來(lái)更新元素的值。在向服務(wù)器端傳值之前進(jìn)行客戶端的驗(yàn)證是一個(gè)良好的編程習(xí)慣，這里只是簡(jiǎn)單進(jìn)行了字符串不為空的驗(yàn)證，然后就使用了前邊說(shuō)到的Ext.Ajax.request方法了，使用這個(gè)方法向頁(yè)面hello.ASPx以post方式發(fā)送了數(shù)據(jù)，我們這里是以json對(duì)象的形式發(fā)送的，也可以寫成字符串形式，對(duì)于成功的響應(yīng)，把響應(yīng)的文本顯示在div中，對(duì)于失敗的響應(yīng)，彈出一個(gè)對(duì)話框并且給出了錯(cuò)誤碼。
接下來(lái)要進(jìn)行服務(wù)器端的編程了。服務(wù)器端可以通過(guò)兩種方式接受客戶端傳遞過(guò)來(lái)的數(shù)據(jù)并且作出響應(yīng)：使用ASPx頁(yè)面和web服務(wù)。我們先介紹如何使用ASPx頁(yè)來(lái)進(jìn)行處理。在項(xiàng)目中增加一個(gè)頁(yè)面Hello.ASPx，把頁(yè)面中除了第一行的頁(yè)面處理指令部分<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Hello.ASPx.cs" Inherits="ExtjsDemo.hello" %>全部刪去。按下F7切換到代碼頁(yè)，開始編寫后臺(tái)的代碼。我們首先通過(guò)Request.Params["data"]來(lái)獲取前臺(tái)傳遞過(guò)來(lái)的數(shù)據(jù)，同樣，在對(duì)數(shù)據(jù)進(jìn)行處理之前我們先進(jìn)行數(shù)據(jù)的有效性驗(yàn)證，這里只是簡(jiǎn)單判斷了是否為空或者空字符串，然后我們就將處理后的結(jié)果用Response.Write方法發(fā)送給客戶端。后臺(tái)代碼如下：
復(fù)制代碼 代碼如下:
using System;
/**//*
*作者：大笨
*日期：2009-10-10
*版本：1.0
*/
namespace ExtjsDemo
{
public partial class Hello : System.Web.UI.Page
{
頁(yè)面加載#region 頁(yè)面加載
/**//// <summary>
/// 頁(yè)面加載
/// </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
}
}
運(yùn)行后在編輯框輸入字符串，可以看到在下邊的div里邊以大寫的形式顯示了出來(lái)，通過(guò)FF的Firebug我們可以看到數(shù)據(jù)的交互。
除了使用ASPx頁(yè)面來(lái)接受并處理客戶端傳遞過(guò)來(lái)的數(shù)據(jù)，我們還可以使用web服務(wù)的方式來(lái)進(jìn)行。在項(xiàng)目中添加一個(gè)web服務(wù)，代碼如下：
復(fù)制代碼 代碼如下:
using System;
using System.Web.Services;
/**//*
*作者：大笨
*日期：2009-10-10
*版本：1.0
*/
namespace ExtjsDemo
{
/**//// <summary>
/// HelloService 的摘要說(shuō)明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 若要允許使用 ASP.NET AJAX 從腳本中調(diào)用此 Web 服務(wù)，請(qǐng)取消對(duì)下行的注釋。
// [System.Web.Script.Services.ScriptService]
public class HelloService : System.Web.Services.WebService
{
將傳入的字符串改為大寫#region 將傳入的字符串改為大寫
/**//// <summary>
/// 將傳入的字符串改為大寫
/// </summary>
/// <param name="data">需要轉(zhuǎn)為大寫的字符串</param>
/// <returns>大寫字符串</returns>
[WebMethod]
public string ToUpper(string data)
{
if(!string.IsNullOrEmpty(data))
return data.ToUpper();
throw new Exception("字符串不能為空！");
}
#endregion
}
}
當(dāng)然，默認(rèn)情況下，web服務(wù)是以xml格式來(lái)傳遞數(shù)據(jù)的，我們可以通過(guò)Firebug看到。xml很好很強(qiáng)大，不過(guò)有時(shí)我們只需要更小巧的json就足夠了，那么如何讓web服務(wù)傳遞的是json格式呢？我們只需要把請(qǐng)求頭中的Content-Type設(shè)置為application/json并且把參數(shù)使用Ext.util.JSON.encode進(jìn)行編碼或者使用jsonData來(lái)代替params.
JavaScript技術(shù)：extjs 學(xué)習(xí)筆記（一） 一些基礎(chǔ)知識(shí)，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
