extjs遮罩层登陆

[Z_FEI]

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

[hoojo]

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

[Mars_Ma_OK]

学习了..帮顶吧!

[weixingwx911]

[czmchen]

帮顶，希望早日解决

[archko]

都不了解了如何使用?
EXT里有弹出层的方法,点击链接就弹出层-->
填写完提交Form,也可以就AJAX发送用户名和密码,随便了,然后到Action-->
要返回数据不?返回来JS回调处理,把层关了.处理其它.
不返回数据,整个页面都换了?那前面提交Form更简单.

[Yokubee]

先写好一个formpanel，里面写好需要提交的字段、成功和错误的方法，还有提交路径（即平时写的提交路径如：user/login.action）！
最后提交到后台action,返回错误或成功。当页面接受到数据做相应的处理（如成功就调用成功的function）。

[zidasine]

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);
			}
		});
	}

[Z_FEI]

谢谢楼上各位的回答，这个遮罩层怎么实现呢？

[Z_FEI]

现在有个问题，就如同上面的代码，我怎样能控制它什么时候显示呢？用超链接

[Z_FEI]

问题解决了，把解决办法写下：
action中：
try {
response.setContentType("text/json;charset=utf-8");
response.getWriter().print(jsonStr);
response.getWriter().flush();
response.getWriter().close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

[Z_FEI]

struts1 action：

LoginForm lf = (LoginForm)form;
response.setContentType("text/json;charset=utf-8");
//System.out.println(lf.getUsername()+lf.getPassword());
	    PrintWriter out;
	    
		try {
			out = response.getWriter();
			String jsonStr="";
			//业务处理
		    if("admin".equals(lf.getUsername().trim()) && "admin".equals(lf.getPassword().trim())){
		    	jsonStr="{success:true,msg:'ok'}";
		    }else{
		    	jsonStr="{success:true,msg:'no'}";
		    }
		    out.print(jsonStr);
		    System.out.println(jsonStr);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}

jsp：

success:function(response){
    	      
		           var jsonObj=Ext.decode(response.responseText);
			       if(jsonObj.msg=="ok"){
			         window.location.href='main.html'
			       }
			       else{
			          alert(jsonObj.msg);
			       }
			  },

为什么红色的部分什么都没得到呢？

[ivfangwang_long]

学习了~~~~~~~~~~~~~~~~

[songwie]

用 Ext new 一个 window 在windows上面设置表单 , window 设成 遮罩模式就行了
var win = new Ext.Window({
title : '增加',
closable : true,
mask : 'ture',
modal : true,
layout : 'form',
defaultType: 'textfield',

items: [{
id:'bname',
fieldLabel: '姓名',
name: 'name',
allowBlank:false,
xtype:'textfield'
},
new Ext.form.ComboBox({
fieldLabel:'性别',
name:'bsex',
id:'bsex',
store:storeSex,
mode:'local',
valueField:'value',
displayField:'text',
emptyText:'请选择',
triggerAction:'all' ,
maxListWidth:100
})
,
new Ext.form.DateField({
id:'bbirth',
fieldLabel:'出生年月',
emptyText:'请选择',
format:'Y-m-d',

})
,{
id:'bother',
fieldLabel: '描述',
name: 'other',
allowBlank:false,
xtype:'textfield'
}
],

buttons: [{
text: '添加',
handler:function(){
var id = '121';

var p = new Plant({
id: id,
name: Ext.getDom('bname').value,
sex: Ext.getDom('bsex').value,
birth: Ext.getDom('bbirth').value,
descn: Ext.getDom('bother').value
});
//alert(p.data.name);
if(p.data.name==null||p.data.name==''){
Ext.Msg.alert('确认对话框','请先输入数据!');
}else{
//store.add(p);
store.insert(0,p);

win.close();

}

}
},{
text: '关闭',
handler:function(){
win.close();
}
}]
});

win.show(document.body);
}

[songwie]

关键字是 modal: true

[kawayiso007]

正好需要遮罩层，抱走了~