Alert
                             標準的“確認”對話框。

　　Html頁面中的內容：

　　執行程序，點擊上面的“alert框”按鈕，將會在頁面上顯示如下圖所示的對話框。

Ext.MessageBox.alert("請注意","這是ExtJS的提示框",showResult);//調用回調函數顯示你點擊了是什么按鈕



function showResult(btn){

Ext.example.msg('按鈕被點擊', '您點擊了 “{0}” 按鈕。', btn);

};



在瀏覽器上方會出現如下的消息

Confirm
標準的“是 / 否”對話框。

我們可以根據需要顯示自下定義的對話框。普通對話框一般包括四個參數，

比如confirm的方法簽名為

confirm ( String title, String msg,[Function fn], [Object scope] )

，參數title表示對話框的標題，參數msg表示對話框中的提示信息，這兩個參數是必須的；可選的參數fn表示當關閉對話框后執行的回調函數，參數

scope表示回調函數的執行作用域。回調函數可以包含兩個參數，即button與text,button表示點擊的按鈕，text表示對話框中有活動輸

入選項時輸入的文本內容。我們可以在回調函數中通過button參數來判斷用戶作了什么什么選擇，可以通過text來讀取在對話框中輸入的內容。







這樣當用戶點擊對話框中的yes按鈕時，就會執行相應的操作，而選擇no則忽略操作。



Ext.onReady(function(){	

Ext.get("btnAlert").on("click",function(){

Ext.MessageBox.confirm("請確認","是否真的要刪除指定的內容",function(button,text){

if(button=="yes"){

//執行刪除操作

alert("成功刪除");

}

});

});		

});

                                          prompt
                                 標準的“提示輸入”對話框。

看看prompt框，我們看下面的代碼：

　　Html頁面：

　　點擊上面的“對話框”按鈕可以顯示如下圖所示的內容，如果點擊OK按鈕則會輸入你輸入的文本內容，選擇cancel按鈕則會提示放棄了錄入，如下圖所示：

　　在實際應用中，可以直接使用MessageBox的show方法來顯示自定義的對話框，如下面的代碼：

　　點擊“對話框”按鈕可顯示一個自定義的保存數據對話框，對話框中包含yes、no、cancel三個按鈕，可以在回調函數save中根據點擊的按鈕執行相應的操作，如圖xx所示。

無論你是Ext庫的新手，抑或是想了解Ext的人，本篇文章的內容都適合你。本文將簡單地介紹Ext的幾個基本概念，和如何快速地做出一個動態的頁面并運行起來，假設讀者已具備了一些JavaScript經驗和簡單了解HTML的文檔對象模型（document object model ，DOM）。

下載Ext

如果你未曾下載過，那應從官方網站那里下載最新版本的Ext http://extjs.com/downloads 。

因應各種的下載需求，有幾種不同的可選項。通常地，最穩定的版本，是較多人的選擇。下載解包后，那個example文件夾便是一個探索Ext的好地方！

開始！

我們將講講怎么使用Ext，來完成一些JavaScript常見的任務。如果你想自己試試，就應該先下IntroToExt2.zip ，用來構建已下面的Ext代碼。

Zip包里有三個文件：ExtStart.html, ExtStart.js和ExtStart.css。解包這三個文件到Ext的安裝目錄中（例如，Ext是在“C:\code\Ext\v2.0”中，那應該在"v2.0"里面新建目錄“tutorial”。雙擊ExtStart.htm，接著你的瀏覽器打開啟動頁面，應該會有一條消息告訴你配置已完畢。如果出現了Javascript錯誤，請按照頁面上的指引操作。

現在在你常用的IDE中或文本編輯器中，打開ExtStart.js看看。

Ext.onReady(function() {
alert("Congratulations!  You have Ext configured correctly!");

});

Ext.onReady可能是你接觸的第一個也可能是在每個頁面都要使用的方法。這個方法會在DOM加載全部完畢后，保證頁面內的所有元素能被Script引用（reference）之后調用。你可刪除alert()那行，加入一些實際用途的代碼試試。

Element：Ext的核心

大多數的JavaScript操作都需要先獲取頁面上的某個元素的引用（reference）,好讓你來做些實質性的事情。傳統的JavaScript做法，是通過ID獲取Dom節點的：

var myDiv = document.getElementById('myDiv');

這毫無問題，不過這樣單單返回一個對象（DOM節點），用起來并不是太實用和方便。為了要用那節點干點事情，你還將要手工編寫不少的代碼；另外，對于不同類型瀏覽器之間的差異，要處理起來可真頭大了。

進入Ext.element 對象。元素（element）的的確確是Ext的心臟地帶，--無論是訪問元素（elements）還是完成一些其他動作，都要涉及它。Element的API是整個Ext庫的基礎，如果你時間不多，只是想了解Ext中的一兩個類的話，Element一定是首選！

由ID獲取一個Ext Element如下（首頁ExtStart.htm包含一個div，ID名字為“myDiv”，然后，在ExtStart.js中加入下列語句）： The corresponding code to get an Ext Element by ID looks like this (the starter page ExtStart.html contains a div with the id "myDiv," so go ahead and add this code to ExtStart.js):

Ext.onReady(function() {
var myDiv = Ext.get('myDiv');

});

再回頭看看Element對象，發現什么有趣的東東呢？

• Element包含了常見的DOM方法和屬性，提供一個快捷的、統一的、跨瀏覽器的接口（若使用Element.dom的話，就可以直接訪問底層DOM的節點。）；
• Element.get()方法提供內置緩存（Cache)，多次訪問同一對象效率上有極大優勢；
• 內置常用的DOM節點的動作，并且是跨瀏覽器的定位的位置、大小、動畫、拖放等等（add/remove CSS classes, add/remove event handlers, positioning, sizing, animation, drag/drop）。

這意味著你可用少量的代碼來做各種各樣的事情，這里僅僅是一個簡單的例子（完整的列表在Element API 文檔中）。

繼續在ExtStart.js中，在剛才我們獲取好myDiv的位置中加入：

myDiv.highlight();      //黃色高亮顯示然后漸退
myDiv.addClass('red');  // 添加自定義CSS類 (在ExtStart.css定義)
myDiv.center();         //在視圖中將元素居中
myDiv.setOpacity(.25);  // 使元素半透明

獲取多個DOM的節點

通常情況下，想獲取多個DOM的節點，難以依靠ID的方式來獲取。有可能因為沒設置ID,或者你不知道ID,又或者直接用ID方式引用有太多元素了。這種情況下，你就會不用ID來作為獲取元素的依據，可能會用屬性（attribute）或CSS Classname代替。基于以上的原因，Ext引入了一個異常強大的Dom Selector庫，叫做DomQuery。

DomQuery可作為單獨的庫使用，但常用于Ext，你可以在上下文環境中（Context）獲取多個元素，然后通過Element接口調用。令人欣喜的是，Element對象本身便有Element.selcect的方法來實現查詢，即內部調用DomQuery選取元素。這個簡單的例子中，ExtStart.htm包含若干段落（

標簽），沒有一個是有ID的，而你想輕松地通過一次操作馬上獲取每一段，全體執行它們的動作，可以這樣做：

// 每段高亮顯示
Ext.select('p').highlight();

Element.select在這個例子中的方便性顯露無疑。它返回一個復合元素，能通過元素接口（Element interface）訪問每個元素。這樣做的好處是可不用循環和不分別訪問每一個元素。

DomQuery的選取參數可以是一段較長的數組，其中包括W3C CSS3 Dom選取器、基本XPatch、HTML屬性和更多，請參閱DomQuery API文檔以了解這功能強大的庫個中細節。

響應事件

到這范例為止，我們所寫的代碼都是放在onReady中，即當頁面加載后總會立即執行，功能較單一——這樣的話，你便知道，如何響應某個動作或事件來執行你希望做的事情，做法是，先分配一個function，再定義一個event handler事件處理器來響應。我們由這個簡單的范例開始，打開ExtStart.js，編輯下列的代碼：

Ext.onReady(function() {
Ext.get('myButton').on('click', function(){
alert("你單擊了按鈕");

});

});

代碼依然會加載好頁面后執行，不過重要的區別是，包含alert()的function是已定義好的，但它不會立即地被執行，是分配到按鈕的單擊事件中。用淺顯的文字解釋，就是：獲取ID為'myDottom'元素的引用，監聽任何發生這個元素上被單擊的情況，并分配一個function,以準備任何單擊元素的情況。

一般來說，Element.select也能做同樣的事情，即作用在獲取一組元素上。下一例中，演示了頁面中的某一段落被單擊后，便有彈出窗口：

Ext.onReady(function() {
Ext.select('p').on('click', function() {
alert("你單擊一段落;");

});

});

這兩個例子中，事件處理的function均是簡單幾句，沒有函數的名稱，這種類型函數稱為“匿名函數（anonymous function）”，即是沒有名的的函數。你也可以分配一個有名字的event handler,這對于代碼的重用或多個事件很有用。下一例等效于上一例：

Ext.onReady(function() {
var paragraphClicked = function() {
alert("You clicked a paragraph");

}
Ext.select('p').on('click', paragraphClicked);

});

到目前為止，我們已經知道如何執行某個動作。但當事件觸發時，我們如何得知這個event handler執行時是作用在哪一個特定的元素上呢？要明確這一點非常簡單，Element.on方法傳入到even handler的function中（我們這里先討論第一個參數，不過你應該瀏覽API文檔以了解even handler更多的細節）。在我們之前的例子中，function是忽略這些參數的，到這里可有少許的改變，——我們在功能上提供了更深層次的控制。必須先說明的是，這實際上是Ext的事件對象（event object）,一個跨瀏覽器和擁有更多控制的事件的對象。例如，可以用下列的語句，得到這個事件響應所在的DOM節點：

Ext.onReady(function() {
var paragraphClicked = function(e) {
Ext.get(e.target).highlight();

}
Ext.select('p').on('click', paragraphClicked);

});

注意得到的e.target是DOM節點，所以我們首先將其轉換成為EXT的Elemnet元素，然后執行欲完成的事件，這個例子中，我們看見段落是高亮顯示的。

使用Widgets

 (Widget原意為“小器件”，現指頁面中UI控件)

除了我們已經討論過的核心JavaScript庫，當前的Ext亦包括了一系列的最前端的JavaScirptUI組件庫。文本以一些常用的widget為例子，作簡單的介紹。

MessageBox

比起略為沉悶的“HelloWolrd”消息窗口，我們做少許變化，前面我們寫的代碼是，單擊某個段落便會高亮顯示，現在是單擊段落，在消息窗口中顯示段落內容出來。
在上面的paragraphClicked的function中，將這行代碼：

Ext.get(e.target).highlight();

替換為：

var paragraph = Ext.get(e.target);

paragraph.highlight();

Ext.MessageBox.show({
title: 'Paragraph Clicked',

msg: paragraph.dom.innerHTML,

width:400,

buttons: Ext.MessageBox.OK,

animEl: paragraph

});

這里有些新的概念需要討論一下。在第一行中我們創建了一個局部變量（Local Variable）來保存某個元素的引用，即被單擊的那個DOM節點（本例中，DOM節點指的是段落paragrah,事因我們已經定義該事件與

標簽發生關聯的了）。為什么要這樣做呢？嗯...觀察上面的代碼，我們需要引用同一元素來高亮顯示，在MessageBox中也是引用同一元素作為參數使用。
一般來說，多次重復使用同一值（Value）或對象，是一個不好的方式，所以，作為一個具備良好OO思維的開發者，應該是將其分配到一個局部變量中，反復使用這變量！

現在，為了我們接下來闡述新概念的演示，請觀察MessageBox的調用。乍一看，這像一連串的參數傳入到方法中，但仔細看，這是一個非常特別的語法。實際上，傳入到MessageBox.show的只有一個參數：一個Object literal,包含一組屬性和屬性值。在Javascript中，Object Literal是動態的，你可在任何時候用{和}創建一個典型的對象(object)。其中的字符由一系列的name/value組成的屬性，屬性的格式是[property name]:[property value]。在整個Ext中，你將會經常遇到這種語法，因此你應該馬上消化并吸收這個知識點！
使用Object Literal的原因是什么呢？主要的原因是“可伸縮性（flexibility）”的考慮"，隨時可新增、刪除屬性，亦可不管順序地插入。而方法不需要改變。這也是多個參數的情況下，為最終開發者帶來不少的方便（本例中的MessageBox.show())。例如，我們說這兒的foo.action方法，有四個參數，而只有一個是你必須傳入的。本例中，你想像中的代碼可能會是這樣的foo.action(null, null, null, 'hello').,若果那方法用Object Literal來寫，卻是這樣， foo.action({ param4: 'hello' })，這更易用和易讀。

Grid

Grid是Ext中人們最想先睹為快的和最為流行Widgets之一。好，讓我們看看怎么輕松地創建一個Grid并運行。用下列代碼替換ExtStart.js中全部語句：

Ext.onReady(function() {
var myData = [
['Apple',29.89,0.24,0.81,'9/1 12:00am'],

['Ext',83.81,0.28,0.34,'9/12 12:00am'],

['Google',71.72,0.02,0.03,'10/1 12:00am'],

['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],

['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
];



var myReader = new Ext.data.ArrayReader({}, [
{name: 'company'},

{name: 'price', type: 'float'},

{name: 'change', type: 'float'},

{name: 'pctChange', type: 'float'},

{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]);



var grid = new Ext.grid.GridPanel({
store: new Ext.data.Store({
data: myData,
reader: myReader
}),

columns: [
{header: "Company", width: 120, sortable: true, dataIndex: 'company'},

{header: "Price", width: 90, sortable: true, dataIndex: 'price'},

{header: "Change", width: 90, sortable: true, dataIndex: 'change'},

{header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange'},

{header: "Last Updated", width: 120, sortable: true, 

renderer: Ext.util.Format.dateRenderer('m/d/Y'), 

dataIndex: 'lastChange'}
],

viewConfig: {
forceFit: true
},

renderTo: 'content',

title: 'My First Grid',

width: 500,

frame: true
});



grid.getSelectionModel().selectFirstRow();

});

這看上去很復雜，但實際上加起來，只有四行代碼（不包含測試數據的代碼）。

• 第一行創建數組并作為數據源。實際案例中，你很可能從數據庫、或者WebService那里得到動態的數據。
• 接著，我們創建并加載data store， data store將會告訴Ext的底層庫接手處理和格式化這些數據。不同的數據類型須在類Reader中指明。
• 接著，我們創建一個Grid的組件，傳入各種的配置值，有：
  • 新的data store, 配置好測試數據和reader
  • 列模型column model定義了 列columns的配置
  • 其他的選擇指定了Grid所需的功能
• 最后，通過SelectionModel告訴Grid高亮顯示第一行。

不是太困難吧？如果一切順利，完成之后你會看到像這樣的：

當然，你現在還未掌握這段代碼的某些細節，但先不要緊，這個例子的目的是告訴你，只要學習了少量的幾行代碼，創建一個富界面的多功能的UI組件是可能的。更多的grid細節讀者可作為一種練習去學習。這兒有許多學習Grid的資源，Ext Grid教程、Grid交互演示交和Grid API文檔。

還有更多的..

這只是冰山一角。還有一打的UI Widgets可以供調用，如 layouts, tabs, menus, toolbars, dialogs, tree view等等。請探索 范例演示。

編輯 使用Ajax

在弄好一些頁面后，你已經懂得在頁面和腳本之間的交互（interact）原理。接下來，你應該掌握的是，怎樣與遠程服務器（remote server）交換數據，常見的是從數據庫加載數據（load）或是保存數據（save）到數據庫中。通過JavaScript異步無刷新交換數據的這種方式，就是所謂的Ajax。Ext內建卓越的Ajax支持，例如，一個普遍的用戶操作就是，異步發送一些東西到服務器，然后，UI元素根據回應（Response）作出更新。這是一個包含text input的表單，一個div用于顯示消息（注意，你可以在ExtStart.html中加入下列代碼，但這必須要訪問服務器）：

<div id="msg"></div>
<div>
    Name: <input type="text" id="name" />
    <input type="button" id="okButton" value="OK" />
</div>
<div id="msg"></div>

接著，我們加入這些處理交換數據的JavaScript代碼到文件ExtStart.js中(用下面的代碼覆蓋)：

Ext.onReady(function(){
Ext.get('okButton').on('click', function(){
var msg = Ext.get('msg');
msg.load({
url: 'ajax-example.php', // <-- 按實際改動
params: 'name=' + Ext.get('name').dom.value,
text: 'Updating...'
});
msg.show();
});
});

注意： 這個例子需要web server才可運行。 瀏覽器的URL地址不應是以file://開頭，而是http://開頭，否則的話Ajax的數據交互將不會工作。Localhost就可以工作得很好，但必須是通過http的。

這種模式看起來已經比較熟悉了吧！先獲取按鈕元素，加入一個匿名函數監聽單擊。在事件處理器中（event handler），我們使用一個負責處理Ajax請求、接受響應（Response）和更新另一個元素的Ext內建類，稱作UpdateManagerUpdater。UpdateManager可以直接使用，或者和我們現在的做法一樣，通過Element的load方法來引用（本例中該元素是id為“msg“的div）。當使用Element.load方法，請求（request)會在加工處理后發送，等待服務器的響應（Response），來自動替換元素的innerHTML。簡單傳入服務器url地址，加上字符串參數，便可以處理這個請求（本例中，參數值來自“name”元素的value),而text值是請求發送時提示的文本，完畢后顯示那個msg的div（因為開始時默認隱藏）。當然，和大多數Ext組件一樣，Ext.Ajax 有許多的參數可選，不同的Ajax請求有不同的方案。而這里僅演示最簡單的那種。

最后一個關于Ajax隱晦的地方就是，服務器實際處理請求和返回（Resposne）是具體過程。這個過程會是一個服務端頁面，一個Servlet，一個Http調度過程，一個WebService,甚至是Perl或CGI腳本，即不指定一個服務器都可以處理的http請求。讓人無法預料的是，服務器返回什么是服務器的事情，無法給一個標準的例子來覆蓋闡述所有的可能性。。

下面的例子是一些常見的語言以方便開始測試(這段代碼輸出剛才我們傳入'name'的那個值到客戶端，即發送什么，返回什么，然后在我們剛才寫的'msg' div中加入該文本）。PHP的已經包含在下載文件中，文件名為'ajax-example.php'，可換成你自己服務端的代碼：

Plain PHP

<?php if(isset($_POST['name'])) {
echo 'From Server: '.$_POST['name'];
}
?>

CakePHP

<?php if(isset($this->data['name'])) {
$this->flash('From Server: '.$this->data['name']);
}
?>

Django

from django.http import HttpResponse
 
def ajax_request(request):
return HttpResponse('From Server: %s' % request.POST.get('name', 'nada'))

Perl

#!/usr/bin/perl
use strict;
use warnings;
use CGI;
 
my $Query = new CGI;
 
print $Query->header();
print "Hello from : ".$Query->param('name');
 
exit;

ASP.Net

protected void Page_Load(object sender, EventArgs e)
{
if (Request.Form["name"] != null)
{
Response.Write("From Server: " + Request.Form["name"]);
Response.End();
}
}

ColdFusion

<cfif StructKeyExists(form, "name")>
<cfoutput>From Server: #form.name#</cfoutput>
</cfif>

JSP

From Server: ${param.name}

使用Ajax的真正挑戰，是需要進行適當的手工編碼，并相應格式化為服務端可用接受的數據結構。有幾種格式供人們選擇（最常用為JSON/XML)。 Ext沒有跟任何服務器語言有獨家聯系，因此其它特定語言的庫亦可用于Ext處理Ajax服務。只要頁面接受到結果是EXT能處理的數據格式，Ext絕不會干涉服務器其他的事情！推薦參閱我們提供的各個平臺資源以了解服務端框架的更多資訊和輔助。

2008年5月15日 
效果如圖 ：
  
                       

以下是代碼：

login.js  代碼如下：

LoginPanel = function() {
 
    var win, f;
    var buildForm = function() {
        // 構建一個表單面板容器
        f = new Ext.form.FormPanel( {
            // 給面板的body元素指定自定義的CSS樣式信息
            bodyStyle : 'padding-top:6px',
            // 容器中元素的默認類型
            defaultType : 'textfield',
            // 標簽的默認對齊方式
            labelAlign : 'right',
            // 指定標簽的默認長度
            labelWidth : 55,
            // 標簽與字段錄入框之間的空白
            labelPad : 0,
            // 窗口是否顯示背景色
            frame : true,
            // 容器中組件默認統一配置選項
            defaults : {
            // 驗證字段是否能為空
            allowBlank : false,
            // 字段寬度
            width : 158
            },
            // 指定容器中的元素
            items : [ {
                // 給元素添加CSS樣式
                    cls : 'user',
                    // 元素的名稱
                    name : 'name',
                    // 指定字段的標簽
                    fieldLabel : '帳號',
                    // 為空時提示信息
                    blankText : '帳號不能為空'
                   
                }, {
                    cls : 'key',
                    name : 'pws',
                    fieldLabel : '密碼',
                    blankText : '密碼不能為空',
                    inputType : 'password'
                },{
                 name: 'validateCode',
                    fieldLabel: '驗證碼',
                    maxLength: 4,
                    width: 100,
                    style: 'font-size:14px;font-weight:bold;letter-spacing: 1px; background:url(validateCode.jsp); background-repeat: no-repeat; background-position: 40px 1px;center right no-repeat;',  //validateCode.jsp 是產生驗證碼的圖片的JSP頁面
                    allowBlank:false,
                    blankText:'驗證碼不能為空!'
                }]
        });
    };
    var buildWin = function() {
        // 構建一個窗口面板容器
        win = new Ext.Window( {
            // 把該面板綁定于wins這個DIV對象上
            el : 'wins',
            // 窗口面板標題
            title : '登陸系統',
            // 窗口面板寬度
            width : 265,
            // 高度
            height : 165,
            // 該面板布局類型
            layout : 'column',
            // 面板是否可以關閉及打開
            collapsible : true,
            //窗體拖拽 默認是TRUE
            draggable: false,
            defaults : {
                // 容器內元素是否顯示邊框
                border : false
            },
            items : {
                // 指定內部元素所占寬度1表示100% .5表示50%
                columnWidth : 1,
                // 把表單面板容器增加入其中,使之成為窗口面板容器的子容器
                items : f
            },
            // 面板中按鈕的排列方式
            buttonAlign : 'left',
            // 面板底部的一個或多個按鈕對象
            buttons : [ {
                // 按鈕上需顯示的文本
                    text : '登陸',
                    // 單擊按鈕時響應的動作
                    handler : login
                }, {
                    text : '重置',
                    handler : reset
                }, {
                    text : '注冊',
                    handler : link
                }]
        });
    };
    // 單擊按鈕時執行登陸操作
    var login = function(){
     if(f.form.isValid()){//驗證合法后使用加載進度條
          // 執行當前表單面板的submit
          f.form.submit( {
               // 動作發生期間顯示的文本信息
                waitMsg : '正在登陸驗證,請稍后...',
                // submit發生時指向的地址
                url : 'test.jsp',
                //發送參數
                // params:'{name='+f.name+'pws='+f.pws+'}',
                // 表單提交方式
                method : 'POST',
                // 數據驗證通過時發生的動作
                success : function(form, action) {
                       if(action.result.msg=='ok'){
                            window.location.href = 'MyJsp.jsp';
                         }
                },
                // 反之
                failure : function(form, action) {
                    reset();
                    if (action.failureType == Ext.form.Action.SERVER_INVALID)
                        Ext.MessageBox.alert('登陸失敗', action.result.errors.crying);
                }
            });
    }};
    // 清空當前表單面板內的數據
    var reset = function() {
        f.form.reset();
    };
    // 注冊按鈕指向的地址
    var link = function() {
        window.open('reg.jsp', '_blank')
    };
   
    return {
        init : function() {
         //使用表單提示
            Ext.QuickTips.init();
            Ext.form.Field.prototype.msgTarget = 'side';
            buildForm();
            buildWin();
            // 最后把窗口面板顯示出來
            win.show();
        }
    }
}();
// 當當前頁面DOM加載完畢后,在LoginPanel作用域內執行LoginPanel.init.
Ext.onReady(LoginPanel.init, LoginPanel);

 --------------------------------------------------------------------------

login.jsp如下：

<%@ page language="java"  pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
  <style type="text/css">
  #loading-mask{
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        z-index:20000;
        background-color:white;
    }
    #loading{
        position:absolute;
        left:45%;
        top:40%;
        padding:2px;
        z-index:20001;
        height:auto;
    }
    #loading .loading-indicator{
        background:white;
        color:#444;
        font:bold 20px tahoma,arial,helvetica;
        padding:10px;
        margin:0;
        height:auto;
    }
    #loading-msg {
        font: normal 18px arial,tahoma,sans-serif;
    }
  </style>
  </head>
  <body>
<!-- 加載效果 -->
<div id='loading-mask'></div>
<div id="loading">
    <div class="loading-indicator">
      <img src="ext/resources/images/default/shared/large-loading.gif" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/>
       <br/><span id="loading-msg">Loading ...</span>
    </div>
</div>
  <!-- 加載類庫 -->
  <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="ext/ext-all.js"></script>
  <script type="text/javascript" src="login2.js"></script>
  <!-- 退去加載效果 -->
  <script type="text/javascript">
     Ext.get('loading').setOpacity(0.0,{duration:1.0,callback:function(){this.hide();}});
     Ext.get('loading-mask').setOpacity(0.0,{duration:1.0,callback:function(){this.hide();}});
  </script>
   <!-- 登陸界面 --> 
 <div id='wins'></div>
 <!--  -->
 </body>
</html>

---------------------------------------------------------------------------

后臺測試 頁面 test.jsp 如下：

<%@ page language="java" pageEncoding="UTF-8" %>
    <%
    String name=request.getParameter("name");
    String pws=request.getParameter("pws");
     String validateCode=request.getParameter("validateCode");//驗證碼
    System.out.println(name+"  "+ pws+"  "+validateCode+"  "+session.getAttribute("rand"));
    if("crying".equals(name)&&"123".equals(pws)&&session.getAttribute("rand").equals(validateCode)){
     out.println( "{success: true,msg:\'ok\'}");
    }else if(!session.getAttribute("rand").equals(validateCode)){
    out.println("{ success: false, errors: { crying: \'驗證碼不正確！\'}}");
    }else{
     out.println("{ success: false, errors: { crying: \'用戶帳號或密碼不正確！\'}}");
    }
  %>

----------------------------------------------
產生驗證碼圖片 validateCode.jsp 如下：

 <%@ page language="java" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*"
     contentType="image/jpeg" pageEncoding="UTF-8"%>

<%  //設置頁面不緩存
   response.setHeader("Pragma","No-cache");
   response.setHeader("Cahce-Control","no-cache");
   response.setDateHeader("Expires",0);
   //在內存中創建圖片
   int width=60,height=20;
   BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
   //獲取圖形上下文
   Graphics g= image.getGraphics();
   //生成隨機類
   Random random= new Random();
   //設置背景顏色
   g.setColor(new Color(160,200,100));
   g.fillRect(0,0,width,height);
   //設置字體
   g.setFont(new Font("Times New Roman",Font.PLAIN,18));
   //隨機產生50條干擾線，使圖形中的驗證碼不易被其他的程序探測到
    g.setColor(new Color(160,200,200));
   for(int i=0;i<50;i++)
   {
     int x=random.nextInt(width);
     int y=random.nextInt(height);
     int x1=random.nextInt(width);
     int y1=random.nextInt(height);
     g.drawLine(x,y,x+x1,y+y1);
   }
   //隨機產生驗證碼（4為數字）
   String sRand="";
   for(int i=0;i<4;i++)
   {
     String rand=String.valueOf(random.nextInt(10));
     sRand+=rand;
     //將驗證碼顯示到圖象
     g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)));
     g.drawString(rand,13*i+6,16);
   }
   session.setAttribute("rand",sRand);  //////將產生的驗證碼存儲到sesson中
   g.dispose();
   ImageIO.write(image,"JPEG",response.getOutputStream());
   out.clear(); //***********
   out=pageContext.pushBody();//**********
 %>

     var Tree = Ext.tree;
        var root=new Tree.TreeNode({
               id:'0',
               text:'Root',
               draggable:false //不允許拖拽
                                      //icon:'im2.gif',//自定義節點圖標

        });
        var node1=new Tree.TreeNode({id:'1',text:'node1'});
        var node2=new Tree.TreeNode({id:'2',text:'node2'});
        //搞個有超鏈接的葉子   // hrefTarget:'_blank'   新窗口打開鏈接
     var node11=new Tree.TreeNode({id:'11',href:'test.jsp',text:'右鍵單擊我',leaf:true});  
     node1.appendChild(node11);//添加一個葉子
      var node21=new Tree.TreeNode({id:'21',text:'請左擊我',leaf:true});
      var node22=new Tree.TreeNode({id:'22',text:'node22',leaf:true});
        var node4=new Tree.AsyncTreeNode({
               id:'4',
               text:'node4',
               leaf:false,
               loader:new Tree.TreeLoader({dataUrl:'tree.txt'})});
        node2.appendChild([node21,node22]);
        root.appendChild([node1,node2,node4]);
        var treePanel=new Tree.TreePanel({
                 el:'tree',
                 useArrows:true,
                 autoScroll:true,
                 animate:true,
                 enableDD:true,
                //是否顯示跟節點 rootVisible:false,
                 containerScroll: true});
        treePanel.setRootNode(root);
        treePanel.render();
        root.expand();

   //-----------------其他對我來說牛逼的效果-----------------------------//

   //增加點擊事件

         node21.on('click',function(node){
          alert('我是："'+node.text+'"，我的id是："'+node.id+'"');//這里增加你所需要的點擊事件
     });

//定義右鍵菜單
     var rightClick = new Ext.menu.Menu({
        id :'rightClickCont',
        items : [{
            id:'rMenu1',
            text : '菜單1',
            //增加菜單點擊事件
            handler:function (){
                      alert('TMD點我干嘛！');
                    }
        }, {
            id:'rMenu2',
            text : '菜單2',
            //增加鏈接
             href:'xx.jsp'
        }, {
            id:'rMenu3',
            text : '菜單3'
        }]
     });

     //增加右鍵點擊事件
     node11.on('contextmenu',function(node,event){//聲明菜單類型
          event.preventDefault();
          rightClick.showAt(event.getXY());//取得鼠標點擊坐標，展示菜單
     });       

});

   
 下面是 tree.txt的內容
[
    {text:'01',children:[
        {text:'01-01葉子',href:'test.jsp',leaf:true},
        {text:'01-02',children:[
            {text:'01-02-01葉子',leaf:true},
            {text:'01-02-02葉子',leaf:true}
        ]},
        {text:'01-03葉子',leaf:true}
    ]},
    {text:'02葉子',leaf:true}
]

1.下載并安裝Aptana Studio;
2.打開你的Aptana程序目錄（我這兒是C:\Aptana），復制jar格式的文件到plugins目錄；
3.重啟Aptana；
4.進入Window -> Preferences -> Aptana -> Editors -> JavaScript -> Code Assist選擇Ext 2.0（或要反選Ext.1.1）。

Aptana Studio with Ext 2.0 code assist

    1.下載安裝Aptana Studio（包含有Eclipse）；
    2.啟動Aptana并打開程序菜單到：Help → Software Updates → Find and Install… → Search for new features to install → New remote site…
    3.名稱: “Spket”，地址URL是http://www.spket.com/update/
    4.重啟Aptana；
    5.觀看一下這個SketIDE的教程，看看Ext代碼提示的功能有多省事（你可以修改/src/ext.jsb 保持最新版的Ext），基本步驟如下：

1. Window → Preferences → Spket → JavaScript Profiles → New ；
2. 輸入“ExtJS”點擊OK；
3. 選擇“ExtJS” 并點擊“Add Library”然后在下拉條中選取“ExtJS”；
4. 選擇 “ExtJS”并點擊“Add File”，然后在你的./ext-2.x/source目錄中選取“ext.jsb” 文件；
5. 設置新的ExtJS Profile，選中并點擊“JavaScript Profiles” 對話框右手邊的“Defalut”按鈕；
6. 重啟Aptana；
7. 創建新的JS文件并輸入： Ext這樣就可設置Ext Code代碼自動完成的功能。

http://extjs.com/forum/showthread.php?t=3613  

文檔中心
 http://www.jackytsu.com/extcn/docs/
http://www.ajaxjs.com/
 
EXT實用簡明教程
http://www.easyjf.com/blog/html/20080217/1179671.html

EXT實戰
http://www.extshow.com/

ext / 網摘列表