使用Ext2.0制作漂亮的登陆面板

使用Ext2.0制作漂亮的登陆面板

PS:最近迷上了uucall免费网络电话，最多可以送60分钟话费，用电脑打市话、长途都不要钱！实际上，因为我经常联系的人也不多，用UUCall可以省不了多少钱，关键是觉得很好玩儿　：）拿电脑跟人家打电话，用起来音质蛮好的！大家都去下一个，电脑对电脑是不要钱的，还有的送。不用白不用。http://account.uucall.com/c/27967316.html


参照网上一个Ext2.0富客户端项目的登陆面板代码而写的,文字性的东西就不多说,代码里有完整的注释.如还不明白,欢迎讨论http://www.easyjf.com/.

源码下载地址: http://www.easyjf.com/Ext_EasyJF.rar   或QQ群:52317037共享里也提供下载。

效果如下图所示:


login.html代码:

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > 登录系统 </ title >
< link  rel ="stylesheet"  type ="text/css"  href ="plugins/extjs/ext-2.0/resources/css/ext-all.css"   />
< link  rel ="stylesheet"  type ="text/css"  href ="ext-patch.css"   />

< script  type ="text/javascript"  src ="plugins/extjs/ext-2.0/adapter/ext/ext-base.js" ></ script >
< script  type ="text/javascript"  src ="plugins/extjs/ext-2.0/ext-all.js" ></ script >
< script  type ="text/javascript"  src ="plugins/extjs/ext-2.0/examples/ext-lang-zh_CN.js" ></ script >
< script  type ="text/javascript" >
        Ext.BLANK_IMAGE_URL  =  'plugins / extjs / ext - 2.0 / resources / images / default / s.gif';
        Ext.QuickTips.init(); // 初始化鼠标停留时的显示框
        Ext.form.Field.prototype.msgTarget  =  'side';

</ script >
< style  type ="text/css" >
    .user {  background : url(images/user.gif) no-repeat 1px 2px ;   }
    .key {  background : url(images/key.gif) no-repeat 1px 2px ;    }
    .key,.user {
        background-color : #FFFFFF ;
        padding-left : 20px ;
        font-weight : bold ;
        color : #000033 ;
     }
</ style >
</ head >

< body >
< script  src ="javascript/adminLogin.js"  type ="text/javascript" ></ script >
< div  id ="win"  class ="x-hidden" ></ div >
</ body >
</ html >

adminLogin.js代码

/**/ /**
 * @author 冷雨 HTTP://WWW.EasyJF.Com
 * 
 * 使用Ext2.0构造一个客户登陆面板
 */
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 : 'userName',
                    // 指定字段的标签
                    fieldLabel : '帐号',
                    // 为空时提示信息
                    blankText : '帐号不能为空'
                }, {
                    cls : 'key',
                    name : 'password',
                    fieldLabel : '密码',
                    blankText : '密码不能为空',
                    inputType : 'password'
                }]
        });
    };
    var buildWin = function() {
        // 构建一个窗口面板容器
        win = new Ext.Window( {
            // 把该面板绑定于win这个DIV对象上
            el : 'win',
            // 窗口面板标题
            title : '登陆系统',
            // 窗口面板宽度
            width : 265,
            // 高度
            height : 140,
            // 该面板布局类型
            layout : 'column',
            // 面板是否可以关闭及打开
            collapsible : true,
            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() {
        // 执行当前表单面板的submit
        f.form.submit( {
            // 动作发生期间显示的文本信息
                waitMsg : '正在登录',
                // submit发生时指向的地址
                url : 'portal.ejf?cmd=adminLogin',
                // 表单提交方式
                method : 'POST',
                // 数据验证通过时发生的动作
                success : function(form, action) {
                    window.location.href = 'manage.ejf';
                },
                // 反之
                failure : function(form, action) {
                    reset();
                    if (action.failureType == Ext.form.Action.SERVER_INVALID)
                        Ext.MessageBox.alert('警告', action.result.errors.msg);
                }
            });
    };
    // 清空当前表单面板内的数据
    var reset = function() {
        f.form.reset();
    };
    // 注册按钮指向的地址
    var link = function() {
        window.open('http://easyjf.com/user.ejf?cmd=registerPU', '_blank')
    };
    return {
        init : function() {
            buildForm();
            buildWin();
            // 最后把窗口面板显示出来
            win.show();
        }
    }
} ();
//  当当前页面DOM加载完毕后,在LoginPanel作用域内执行LoginPanel.init.
Ext.onReady(LoginPanel.init, LoginPanel);

转自： http://blog.csdn.net/maoweiwer/archive/2008/01/20/2054011.aspx