extjs遮罩层登陆,该怎么解决

extjs遮罩层登陆
我对extjs不了解，现在想完成这样一个功能，点击一个超链接，弹出一个遮罩层，层是用来登陆的，要把层里填写的用户名和密码传给struts1的action，现在由于不了解extjs，所以希望各位能给个思路！谢谢

------解决方案--------------------
都不了解了如何使用?
EXT里有弹出层的方法,点击链接就弹出层-->
填写完提交Form,也可以就AJAX发送用户名和密码,随便了,然后到Action-->
要返回数据不?返回来JS回调处理,把层关了.处理其它.
不返回数据,整个页面都换了?那前面提交Form更简单.
------解决方案--------------------
先写好一个formpanel，里面写好需要提交的字段、成功和错误的方法，还有提交路径（即平时写的提交路径如：user/login.action）！
最后提交到后台action,返回错误或成功。当页面接受到数据做相应的处理（如成功就调用成功的function）。
------解决方案--------------------

JScript code

var loginForm = new Ext.FormPanel({
        title : "登录",
        frame : true,
        bodyStyle : 'padding-left: 10px;padding-top: 10px;',
        width : 410,
        height : 220,
        items : [{
            layout : 'column',
            items : [{
                columnWidth : .45,
                html : '<img src="images/login/login_title.gif" />' // 左边列放一个logo
            }, {
                columnWidth : .55,
                bodyStyle : 'padding-left: 5px;padding-top:30px;',
                labelPad : 0,
                labelWidth : 45,
                items : [{
                    xtype : 'fieldset',
                    collapsible : false,
                    baseCls : "x-fieldset",
                    width : 200,
                    height : 120,
                    defaultType : 'textfield',
                    items : [{
                        cls : 'user',
                        fieldLabel : '用户名',
                        id : 'login-username',
                        name : 'username',
                        allowBlank : false,
                        // 不允许为空
                        value : jty.util.getCookie("username"),
                        blankText : '用户名不能为空',
                        anchor : '95%'
                    }, {
                        cls : 'key',
                        fieldLabel : '密　码',
                        id : 'login-password',
                        name : 'password',
                        allowBlank : false,
                        // 不允许为空
                        blankText : '密码不能为空',
                        value : "",
                        inputType : 'password',
                        anchor : '95%'
                    }],
                    buttons : [{
                        text : '登录',
                        type : 'submit',
                        handler : loginAction
                    }, {
                        text : '关闭',
                        handler : function() {
                            window.open("", "_parent", "");
                            window.close();
                        }
                    }]
                }]
            }]
        }]
    });
    loginForm.render("login");
    loginForm.el.center();

function loginAction() {
        // 验证是否合法
        if (!loginForm.form.isValid()) {
            // Ext.MessageBox.alert('验证错误', '页面验证有错误！');
            return;
        }
        loginForm.form.doAction('submit', {
            url : 'login.action',
            // 文件路径
            method : 'post',
            // 提交方法post或get
            params : '',

            // 提交成功的回调函数
            success : function(form, action) {
                document.location = 'index.action';
            },
            // 提交失败的回调函数
            failure : function(form, action) {
                // form.reset();
                Ext.MessageBox.alert('登录错误', action.result.message);
            }
        });
    }

------解决方案--------------------

CSS code


点击超链接的时候，显示登陆的window或是formPanel。显示模式设置成遮罩，遮罩后就不能操作后面的业务了。登陆成功后，隐藏window或formPanel即可。

------解决方案--------------------

extjs遮罩层登陆,该怎么解决

相关推荐