快捷導(dǎo)航

ExtJS 學(xué)習(xí)專題（一）如何應(yīng)用ExtJS（附實(shí)例）

更新時(shí)間：2010年03月11日 22:10:43 作者：

相信大家已經(jīng)領(lǐng)略了ExtJs的魅力，那么要如何應(yīng)用ExtJS呢？

要使用ExtJS，先要得到ExtJS庫(kù)文件，ExtJS庫(kù)文件可以到ExtJS官網(wǎng)下載，地址是www.extjs.com/products/gxt/download.php，把下載得到的ZIP壓縮文件解壓縮到【D:\ExtCode】目錄下，可以得到以下內(nèi)容。

　　adapter：負(fù)責(zé)將里面提供第三方底層庫(kù)（包括Ext自帶的底層庫(kù)）映射為Ext所支持的底層庫(kù)。
　　build：壓縮后的ext全部源碼(里面分類存放)。
　　docs： API幫助文檔。
　　exmaples：提供使用ExtJs技術(shù)做出的小實(shí)例。
　　resources：Ext UI資源文件目錄，如CSS、圖片文件都存放在這里面。
　　source：無(wú)壓縮Ext全部的源碼(里面分類存放) 遵從Lesser GNU （LGPL）開(kāi)源的協(xié)議。
　　Ext-all.js：壓縮后的Ext全部源碼。
　　ext-all-debug.js：無(wú)壓縮的Ext全部的源碼(用于調(diào)試)。
　　ext-core.js：壓縮后的Ext的核心組件，包括sources/core下的所有類。
　　ext-core-debug.js：無(wú)壓縮Ext的核心組件，包括sources/core下的所有類。

　　得到ExtJS庫(kù)文件后，就可以將extjs應(yīng)用到頁(yè)面當(dāng)中了。應(yīng)用extjs需要在頁(yè)面中引入extjs的樣式及extjs庫(kù)文件，樣式文件為resources/css/ext-all.css，extjs的js庫(kù)文件主要包含兩個(gè)，adapter/ext/ext-base.js及ext-all.js，其中ext-base.js表示框架基礎(chǔ)庫(kù)，ext-all.js是 extjs的核心庫(kù)。adapter表示適配器，也就是說(shuō)可以有多種適配器，因此，可以把a(bǔ)dapter/ext/ext-base.js換成 adapter/jquery/ext-jquery-adapter.js，或adapter/prototype/ext-prototype- adapter.js等。

　　因此，要使用ExtJS框架的頁(yè)面中一般包括下面幾句：

　　在ExtJS庫(kù)文件及頁(yè)面內(nèi)容加載完后，ExtJS會(huì)執(zhí)行Ext.onReady中指定的函數(shù)，因此可以用，一般情況下每一個(gè)用戶的ExtJS應(yīng)用都是從Ext.onReady開(kāi)始的，使用ExtJS應(yīng)用程序的代碼大致如下：

　　fn也可以寫成一個(gè)匿名函數(shù)的形式，因此上面的代碼可以改成下面的形式：

　　怎么樣，看了以上內(nèi)容，是不是迫不及待的想動(dòng)手試試了？別急，下面我們寫一個(gè)最簡(jiǎn)單的ExtJS應(yīng)用，在hello.html文件中輸入下面的代碼：

看一下頁(yè)面效果：

進(jìn)一步，我們可以在頁(yè)面上顯示一個(gè)窗口，代碼如下：

在瀏覽hello.html，即可得在屏幕上顯示一個(gè)窗口，如圖所示：

復(fù)制代碼代碼如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ExtJSAppTest.Default" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>ExtJS World</title> 
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css"/> 
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js"></script> 
<script type="text/javascript" src="ExtJS/ext-all.js"></script> 
<script> 
Ext.onReady(function () { 
//彈出警告對(duì)話框. 
//Ext.MessageBox.alert("hello", "Hello ,Hyey.wl Come to ExtJS World!"); 
//彈出Window窗體. 
var win = new Ext.Window({ title: "Hello", width: 300, height: 200, html: '<h1>Hello Easy ExtJS Open Source Window</h1>' }); 
win.show(); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
</div> 
</form> 
</body> 
</html> 