`
leiwuluan
  • 浏览: 703645 次
  • 性别: 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
分享到:
评论

相关推荐

    ext 嵌入editarea 实现代码 源代码 代码高亮 显示

    ext 嵌入editarea 实现代码 源代码 代码高亮 显示 ext 嵌入editarea 实现代码 源代码 代码高亮 显示 ext 嵌入editarea 实现代码 源代码 代码高亮 显示 ext 嵌入editarea 实现代码 源代码 代码高亮 显示

    Ext实现的论坛前台代码

    在这个"Ext实现的论坛前台代码"项目中,开发者利用ExtJS的组件化和数据绑定机制,构建了一个完整的论坛前端界面,提供了用户交互丰富的功能,如版主管理、发帖、回帖以及用户注册等。 1. **ExtJS 框架基础**: - *...

    ext 嵌入editarea 实现代码 源代码

    通过分析这些文件,开发者可以进一步了解EXTJS和EditArea如何协同工作,实现在线代码编辑器的完整功能。对于想要学习或改进此类工具的人来说,这些源代码是宝贵的参考资料。总的来说,EXTJS与EditArea的结合使用,...

    用ext来登录的程序代码

    对于初学者来说,如何利用Ext框架实现一个完整的登录功能可能会遇到不少挑战。本文将通过一份示例代码,详细介绍如何使用Ext框架构建一个基本的登录界面,并解释代码中的关键部分,帮助读者更好地理解和掌握Ext框架...

    JSP+Ext实现CURD

    在IT行业中,"JSP+Ext实现CURD"是一个常见的开发任务,涉及到Web应用的后端和前端交互,用于数据的创建(Create)、读取(Read)、更新(Update)和删除(Delete)操作。JSP(JavaServer Pages)是Java的一种动态网页技术,...

    codePress Ext 扩展代码实现

    2. codePress编辑器:熟悉codePress的API,学习如何实现代码高亮、编辑功能和事件处理。 3. JavaScript集成:学习如何将codePress的JavaScript库与EXTJS的组件系统相集成。 4. 在线编辑器设计:了解在线编辑器的用户...

    EXT导出Excel代码demo

    在这个"EXT导出Excel代码demo"中,我们将探讨如何使用EXT 3.3实现将数据导出到Excel文件的功能。 在EXT应用中,导出数据到Excel通常涉及到以下几个关键步骤: 1. 数据准备:首先,你需要收集并格式化要导出的数据...

    ext2.0项目源代码供大家学习ext使用

    通过分析这个EXT 2.0项目源代码,开发者可以学习如何组织EXT应用程序的结构,如何利用EXT的API创建组件,如何处理数据交互,以及如何实现特定的功能。对于想要提升EXT编程技能或者希望理解EXT内部机制的人来说,这是...

    Ext实现验证码的关键代码

    在IT行业中,验证码是一...以上就是使用Ext实现验证码功能的基本步骤。当然,实际项目中可能需要考虑更多细节,如错误处理、用户体验优化等。通过结合前端和后端的技术,我们可以创建出既安全又易于使用的验证码系统。

    Ext.Net 源代码

    Ext.Net利用Ajax技术实现页面无刷新更新,源代码会包含关于Ajax请求、响应和回调函数的实现。 5. **主题和皮肤**: Ext.Net支持多主题,允许自定义界面样式。源代码中会有关于主题配置和应用的部分。 6. **扩展...

    简单的EXT项目代码

    EXT项目通常会与其他后端技术如Struts进行整合,以实现完整的MVC(Model-View-Controller)架构,提供数据的处理和展示。 在"简单的EXT项目代码"中,我们可以推测这个项目是一个示例,用于展示EXT与Struts框架如何...

    EXT 登录的设计 extjs4.0

    在 "UserLogin" 文件中,我们可以期待找到一个完整的EXTJS 4.0登录模板的实现,包括HTML结构、JavaScript代码和可能的CSS样式。这个模板将展示如何组合上述组件和概念来创建一个功能完备的登录界面。通过学习和理解...

    ext-2.0.1源代码

    ext源代码 包括完整的js库。方便刚学习ext的同学进行了解实现。

    ext 中文源代码

    EXT的组件系统基于MVC(Model-View-Controller)设计模式,有利于实现松耦合的代码结构,提高代码复用性和可维护性。 EXT的源代码结构通常包含以下几个关键部分: 1. **Ext Core**:这是EXT的基础库,提供了事件...

    实现extpanel代码

    实现extpanel代码,有图有真相不容错过。

    DojoChina Ext代码(视频代码)

    【DojoChina Ext代码(视频代码)】是一个专门针对Dojo和Ext框架的学习资源,它包含了一组示例代码,这些代码可能源自一系列的教学视频。Dojo和Ext都是JavaScript库,用于构建富互联网应用程序(RIA),尤其在企业级...

    Ext实现完整界面,适合初学者参考

    基本的显示界面,唯美的UI层,很简单的架构,每个js代码相关联的都很好找哦

    EXT代码

    用ext实现一个简单的窗口布局

Global site tag (gtag.js) - Google Analytics