/*
* 用户带验证码登录页面
* sheak
* code.php 生成验证码
* 1202增加键盘回车提交功能(粗体部分)
*/
/*
* 用户带验证码登录页面
* sheak 081115
* code.php 生成验证码
*/
Ext.QuickTips.init();
LoginWindow=Ext.extend(Ext.Window,{
title : '登陆系统',
width : 275,
height : 155,
collapsible : true,
defaults : {
border : false
},
buttonAlign : 'center',
createFormPanel :function() {
//表单重置函数
function reset(){
myform.form.reset();
};
//表单提交函数
function surely() {
if(myform.getForm().isValid())
{
myform.form.submit({
waitMsg : '正在登录......',
url : '../../../index/login',
timeout: 3000,
success : function(form, action) {
if(action.result.type == 0)//OP
window.location.href = '../op/index.html';
else//CP
window.location.href = 'index.html';
},
failure : function(form, action) {
form.reset();
if (action.failureType == Ext.form.Action.SERVER_INVALID)
Ext.MessageBox.alert('警告', action.result.errors.msg);
}
});
}
};
var myform = new Ext.form.FormPanel( {
bodyStyle : 'padding-top:6px',
defaultType : 'textfield',
labelAlign : 'right',
labelWidth : 55,
labelPad : 2,
//frame : true,
method:'POST',
//增加表单键盘事件
keys:[
{
key: [10,13],
fn:surely
} ],
defaults : {
allowBlank : false,
width : 158
},
items : [{
cls : 'user',
name : 'username',
fieldLabel : '帐 号',
blankText : '帐号不能为空'
}, {
cls : 'key',
name : 'password',
fieldLabel : '密 码',
blankText : '密码不能为空',
inputType : 'password'
}, {
cls : 'key',
name:'randCode',
id:'randCode',
fieldLabel:'验证码',
width:70,
blankText : '验证码不能为空'
}],
buttons:[
{
text:'确定',
id:'sure',
handler:surely
},
{
text:'重置',
id:'clear',
handler:reset
}]
});
return myform;
},
initComponent : function(){
LoginWindow.superclass.initComponent.call(this);
this.fp=this.createFormPanel();
this.add(this.fp);
}
});
Ext.onReady(function()
{
var win=new LoginWindow();
win.show();
var bd = Ext.getDom('randCode');
var bd2 = Ext.get(bd.parentNode);
bd2.createChild({tag: 'img', src: 'code.php',align:'absbottom'});
}
);
分享到:
相关推荐
以上就是使用ExtJS MVC实现登录验证码的基本步骤。这个过程涉及到了Model、Store、View和Controller的交互,以及前后端数据交换和用户输入验证。在实际项目中,可能还需要考虑更多细节,如验证码的过期时间、重试...
标题中的“extjs 登录页面+验证码”表明我们要讨论的是使用ExtJS框架构建的一个登录页面,其中包含了验证码功能。ExtJS是一个流行的JavaScript库,用于构建桌面级的Web应用程序,它提供了丰富的用户界面组件和强大的...
在"Extjs4登录功能+验证码+struts2"这个主题中,我们将深入探讨如何利用ExtJS4构建一个带有验证码功能的登录界面,并结合Struts2后端框架实现数据验证和处理。 首先,登录功能是Web应用的基础部分,通常包含用户名...
在“C# Extjs 登陆框、框架”这个主题中,我们主要关注的是如何使用ExtJS创建一个登录界面,并结合C#后端实现用户验证。登录框是任何应用程序的基础元素,它通常包含用户名和密码字段,以及登录和取消按钮。在ExtJS...
在这个例子中,Struts将接收登录表单的提交,转发到Spring控制层进行处理,并将结果返回给视图层。 3. **Hibernate框架**:Hibernate是一个对象关系映射(ORM)工具,简化了数据库操作。在登录场景中,Hibernate...
- `extjs复选框树.js`:这是实现上述功能的JavaScript代码,包括工具类和针对树节点的操作方法。 - `样式文件.css`:可能包含了一些自定义的样式,用于美化复选框和树的显示效果。 - `示例HTML文件.html`:演示如何...
在IT领域,特别是Web开发中,使用ExtJS框架进行用户登录界面的前端验证是一个常见的需求。根据提供的文件信息,我们可以详细解析如何利用ExtJS来实现这一功能。 ### ExtJS实现登录验证 #### 核心概念与流程 1. **...
ExtJS FineUI 开发框架与 FineOffice 框架是两个在企业级Web应用开发中常用的工具,尤其在构建OA(办公自动化)系统时。本文将深入探讨这两个框架及其在OA源码中的应用。 首先,ExtJS是一个强大的JavaScript库,...
Extjs框架Extjs框架Extjs框架Extjs框架Extjs框架Extjs框架Extjs框架Extjs框架Extjs框架
在EXTJS这个强大的JavaScript框架中,用户界面的交互设计是其一大亮点,其中包括各种各样的控件,如复选框(checkboxes)和全选功能。然而,在实际应用中,我们可能会遇到一个问题:当实现全选功能后,如果尝试取消...
在给定的文件中,我们关注的是“带复选框的ExtJS tree”这一主题,这涉及到ExtJS框架下的树形组件(TreePanel)如何与复选框结合,为用户提供更为灵活的数据选择和管理方式。 ### 标题解析:“带复选框的ExtJS tree...
在ExtJs中,消息提示框(Notification)是用户界面交互的一个重要元素,它能够向用户显示各种类型的通知信息,如警告、确认、信息提示等。 在标题提到的"ExtJs消息提示框"中,我们关注的是如何在ExtJs应用程序中...
Extjs提供了一套丰富的消息框组件,包括: - 提示框(message box) - 输入框(prompt box) - 确认框(confirm box) - 自定义消息框(自定义外观和行为) - 进度条对话框(用于长时间运行操作的反馈) #### 5. ...
这个项目是一个基于EXTJS 6.6的Web应用实例,提供了完整的登录页面和首页布局,包括左侧菜单和列表展示。以下是关于EXTJS 6.6框架以及该项目的关键知识点: 1. **EXTJS 6.6框架**:EXTJS 是由Sencha公司开发的一个...
ExtJs 4.0 提供了多种类型的表单字段,如文本输入框、密码框、选择框等,以及表单容器,如Panel、FormPanel。这些组件允许开发者创建复杂且功能完备的表单。表单字段可以通过配置项定义,包括字段类型、验证规则、...
ExtJS4是一个强大的JavaScript前端框架,它主要用于构建富互联网应用程序(RIA)。这个“Extjs4后台框架”可能指的是一个特定的、与ExtJS4集成的后端解决方案,用于支持前端应用的数据交互和管理。让我们深入探讨...
4. **Form Components**:EXTJS提供了各种表单元素,如文本框、下拉框、复选框等,用于数据输入和验证。 5. **Layouts**:EXTJS的布局管理器确保组件在不同屏幕尺寸和分辨率下的适配,如Fit、Border、Accordion等...
在EXTJS中,弹出框(也称为警告、信息或确认对话框)是用户界面交互的重要组成部分,常用于向用户提供信息、警告或者等待用户确认操作。实现EXTJS弹出框在n秒后自动消失,我们可以利用EXTJS的定时器(Ext.util....
在这个"extjs4.1下拉复选框完整DEMO"中,我们主要关注的是如何使用ExtJS实现一个具有动态加载功能的下拉复选框组件。这个DEMO包含以下几个关键组成部分: 1. **ext-all-debug.js**:这是ExtJS的核心库文件,包含了...
总结来说,通过ExtJS实现用户登录涉及创建一个包含输入字段的表单,设置提交事件来调用服务器端的登录处理逻辑。在服务器端,如`EmployeeAction`,会接收到这些请求,验证用户名和密码,然后返回相应的响应。整个...