Ext验证码例子

login.js
 Ext.form.Myimg = Ext.extend(Ext.BoxComponent, { 
     onRender : function(ct, position){ 
         if(!this.el){ 
          this.el = document.createElement('img');             
            this.el.src = this.src; 
            if(this.forId){ 
              this.el.setAttribute('htmlFor', this.forId); 
            } 
         } 
          Ext.form.Label.superclass.onRender.call(this, ct, position); 
    } 
  }); 
 
Ext.reg('myimg', Ext.form.Myimg); 
  
   
 Login = function(){ 
   var win, 
        form, 
       submitUrl = 'login.action'; 
   function onSubmit(){ 
        form.submit({ 
             waitMsg: '正在提交数据，请等待...', 
            reset: true, 
           success: Login.Success, 
            scope: Login 
        }); 
    } 
       
    return{ 
       Init:function(){ 
           Ext.QuickTips.init(); 
              
           var logoPanel = new Ext.Panel({ 
                baseCls: 'x-plain', 
                id: 'login-logo', 
                region: 'center' 
             }); 
             
            var formPanel = new Ext.form.FormPanel({ 
                baseCls: 'x-plain', 
                 baseParams: { 
                    module: 'login' 
                 }, 
               defaults: { 
                    width: 200 
                 }, 
                 defaultType: 'textfield', 
               frame: false, 
              height: 100, 
               id: 'login-form', 
                items: [{ 
                    fieldLabel: '登录帐号', 
                  name: 'user' 
                },{ 
                  fieldLabel: '登录密码', 
                    inputType: 'password', 
                    name: 'pass' 
                 },{ 
                    fieldLabel:'效 验 码', 
                    name:'imgCode', 
                     itemCls:'sex-male', //向左边浮动,处理控件横排    
                    clearCls:'allow-float' 
                },{ 
                    xtype:'myimg', 
                    src:'img.action', 
                    width:100, 
                    height:22, 
                   itemCls:'sex-female', //向左浮动,处理控件横排    
                    clearCls:'allow-float' 
               }], 
                 labelWidth:120, 
              region: 'south', 
                url: submitUrl 
            }); 
        
           win = new Ext.Window({ 
               buttons: [{ 
                    handler: onSubmit, 
                    scope: Login, 
                   text: '登 录' 
                }], 
                 buttonAlign: 'right', 
               closable: false, 
                draggable: false, 
                height: 250, 
               id: 'login-win', 
                keys: { 
                    key: [13], // enter key 
                     fn: onSubmit, 
                   scope:this 
                }, 
               layout: 'border', 
                minHeight: 290, 
               minWidth: 530, 
                plain: false, 
               resizable: false, 
                items: [ 
                    logoPanel, 
                     
                   formPanel 
                ], 
               title: 'Login', 
                 width: 530 
             }); 
              
            form = formPanel.getForm(); 
             
            formPanel.on('render', function(){ 
                var f = form.findField('user'); 
               
               if(f){ 
                    f.focus(); 
                } 
            }, this, {delay: 200}); 
            
            win.show(); 
         }, 
         
        Success: function(f,a){ 
             if(a && a.result){ 
                win.destroy(true); 
                // get the path 
                var path = window.location.pathname, 
                    path = path.substring(0, path.lastIndexOf('/') + 1); 
                    
               // set the cookie 
                set_cookie('sessionId', a.result.sessionId, '', path, '', '' ); 
                 set_cookie('memberName', a.result.name, '', path, '', '' ); 
                set_cookie('memberGroup', a.result.group, '', path, '', '' ); 
               // redirect the window 
                 window.location = a.result.path; 
            } 
        } 
    }; 
 }(); 
 //Form提交完成后 
 Ext.BasicForm.prototype.afterAction=function(action, success){ 
    this.activeAction = null; 
    var o = action.options; 
     if(o.waitMsg){ 
         Ext.MessageBox.updateProgress(1); 
        Ext.MessageBox.hide(); 
     } 
     if(success){ 
       if(o.reset){ 
            this.reset(); 
         } 
        Ext.callback(o.success, o.scope, [this, action]); 
        this.fireEvent('actioncompleted', this, action); 
     }else{ 
         Ext.callback(o.failure, o.scope, [this, action]); 
        this.fireEvent('actionfailed', this, action); 
    } 
 } 

login.html
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
 <html> 
  <head> 
     <title>系统登录</title> 
     <link rel="stylesheet" type="text/css" href="css/ext-all.css" /> 
    <script type="text/javascript" src="javaScript/extjs/ext-base.js"></script> 
    <script type="text/javascript" src="javaScript/extjs/ext-all.js"></script> 
    <script type="text/javascript" src="javaScript/extjs/ext-lang-zh_CN.js"></script> 
    <!-- LOGIN --> 
     <script type="text/javascript" src="system/login/cookies.js"></script> 
    <link rel="stylesheet" type="text/css" href="css/desktop.css" /> 
     <link rel="stylesheet" type="text/css" href="system/login/login.css" /> 
   <script type="text/javascript" src="system/login/login.js"></script> 
  </head> 
  <style type="text/css" media="all">    
     .allow-float {clear:none!important;} /* 允许该元素浮动 */   
    .stop-float {clear:both!important;} /* 阻止该元素浮动 */   
    .sex-male {float:left;}    
    .sex-female {float:left;padding:0 0 0 20px;}    
   .age-field {float:left;padding:0 0 0 58px;*padding:0 0 0 50px!important;*padding:0 0 0 50px;}    
</style>    
   <body> 
    <div id='loginDialogId'></div> 
  </body> 
</html>