ext实现登录

Js代码  

Ext.form.Field.prototype.msgTarget = 'side';
//定义表单
var simple = new Ext.FormPanel({
    labelWidth: 75,
    baseCls: 'x-plain',
    width: 150,
    defaultType: 'textfield',//默认字段类型
    //定义表单元素
    items: [{
        fieldLabel: '帐户',
        name: 'name',//元素名称
        //anchor:'95%',//也可用此定义自适应宽度
        allowBlank:false,//不允许为空
        blankText:'帐户不能为空'//错误提示内容
    },{
        inputType:'password',
        fieldLabel: '密码',
        //anchor:'95%',
        name: 'pws',
        allowBlank:false,
        blankText:'密码不能为空'
    }],
    buttons: [{
        text: '登陆',
        type: 'submit',
        //定义表单提交事件
        handler:function(){
            if(simple.form.isValid()){//验证合法后使用加载进度条
                Ext.MessageBox.show({
                    title: '请稍等',
                    msg: '正在加载...',
                    progressText: '',
                    width:300,
                    progress:true,
                    closable:false,
                    animEl: 'loding'
                });
                //控制进度速度
                var f = function(v){
                    return function(){
                        var i = v/11;
                        Ext.MessageBox.updateProgress(i, '');
                    };
                };
                for(var i = 1; i < 13; i++){
                    setTimeout(f(i), i*150);
                }

                //提交到服务器操作
                simple.form.doAction('submit',{
                    url:'check.asp',//文件路径
                    method:'post',//提交方法post或get
                    params:'',
                    //提交成功的回调函数
                    success:function(form,action){
                        if (action.result.msg=='ok') {
                            document.location='index.html';
                        } else {
                            Ext.Msg.alert('登陆错误',action.result.msg);
                        }
                    },
                    //提交失败的回调函数
                    failure:function(){
                        Ext.Msg.alert('错误','服务器出现错误请稍后再试！');
                    }
                });
            }
        }
    },{
        text: '取消',
        handler:function(){simple.form.reset();}//重置表单
    }]
});

//定义窗体
var win = new Ext.Window({
    id:'win',
    title:'用户登陆',
    layout:'fit', //之前提到的布局方式fit，自适应布局
    width:300,
    height:150,
    plain:true,
    bodyStyle:'padding:5px;',
    maximizable:false,//禁止最大化
    closeAction:'close',
    closable:false,//禁止关闭
    collapsible:true,//可折叠
    plain: true,
    buttonAlign:'center',
    items:simple//将表单作为窗体元素嵌套布局
});

win.show();//显示窗体