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="login.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();//**********
 %>