当前位置: 代码迷 >> Java Web开发 >> extjs遮罩层登陆,该怎么解决
  详细解决方案

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

热度:107   发布时间:2016-04-17 10:57:17.0
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即可。
------解决方案--------------------
  相关解决方案