快捷導(dǎo)航

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

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

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

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

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

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

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

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

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

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

看一下頁面效果：

進一步，我們可以在頁面上顯示一個窗口，代碼如下：

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

復(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 () { 
//彈出警告對話框. 
//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> 