`
leiwuluan
  • 浏览: 695659 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

ext实现完整的登录代码

阅读更多
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();//显示窗体 

 
看了以上代码应该就知道了,主要是action.result.msg 这一句,后台返回的数据格式是{ success: true||false , msg: '訊息' },success为false,他就会执行failure方法了。


 

 

 

  • 大小: 10.7 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics