`
chenxueyong
  • 浏览: 341930 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

ExtJS带验证码登录框[新增回车提交]

阅读更多


/*
*   用户带验证码登录页面
* 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'});

}
);

分享到:
评论
1 楼 xlshlr 2012-09-17  
code.php在哪????貌似么有找到这个文件

相关推荐

    ExtJS登入验证码的实现

    以上就是使用ExtJS MVC实现登录验证码的基本步骤。这个过程涉及到了Model、Store、View和Controller的交互,以及前后端数据交换和用户输入验证。在实际项目中,可能还需要考虑更多细节,如验证码的过期时间、重试...

    extjs 登陆页面+验证码

    标题中的“extjs 登录页面+验证码”表明我们要讨论的是使用ExtJS框架构建的一个登录页面,其中包含了验证码功能。ExtJS是一个流行的JavaScript库,用于构建桌面级的Web应用程序,它提供了丰富的用户界面组件和强大的...

    Extjs4登录功能+验证码+struts2

    在"Extjs4登录功能+验证码+struts2"这个主题中,我们将深入探讨如何利用ExtJS4构建一个带有验证码功能的登录界面,并结合Struts2后端框架实现数据验证和处理。 首先,登录功能是Web应用的基础部分,通常包含用户名...

    ExtJs 登陆框、框架

    在“C# Extjs 登陆框、框架”这个主题中,我们主要关注的是如何使用ExtJS创建一个登录界面,并结合C#后端实现用户验证。登录框是任何应用程序的基础元素,它通常包含用户名和密码字段,以及登录和取消按钮。在ExtJS...

    ssh整合实现登录的例子,包含源代码,用extjs做的登录界面

    在这个例子中,Struts将接收登录表单的提交,转发到Spring控制层进行处理,并将结果返回给视图层。 3. **Hibernate框架**:Hibernate是一个对象关系映射(ORM)工具,简化了数据库操作。在登录场景中,Hibernate...

    extjs带复选框的树包括全选 反选 子选父以及 父选子

    - `extjs复选框树.js`:这是实现上述功能的JavaScript代码,包括工具类和针对树节点的操作方法。 - `样式文件.css`:可能包含了一些自定义的样式,用于美化复选框和树的显示效果。 - `示例HTML文件.html`:演示如何...

    extjs实现登陆验证

    在IT领域,特别是Web开发中,使用ExtJS框架进行用户登录界面的前端验证是一个常见的需求。根据提供的文件信息,我们可以详细解析如何利用ExtJS来实现这一功能。 ### ExtJS实现登录验证 #### 核心概念与流程 1. **...

    Extjs FineUI开发框架 FineOffice框架 OA源码

    ExtJS FineUI 开发框架与 FineOffice 框架是两个在企业级Web应用开发中常用的工具,尤其在构建OA(办公自动化)系统时。本文将深入探讨这两个框架及其在OA源码中的应用。 首先,ExtJS是一个强大的JavaScript库,...

    Extjs web 开发框架

    Extjs框架Extjs框架Extjs框架Extjs框架Extjs框架Extjs框架Extjs框架Extjs框架Extjs框架

    解决Extjs当中复选框全选后,取消选中某一项,全选框仍是选中状态的问题

    在EXTJS这个强大的JavaScript框架中,用户界面的交互设计是其一大亮点,其中包括各种各样的控件,如复选框(checkboxes)和全选功能。然而,在实际应用中,我们可能会遇到一个问题:当实现全选功能后,如果尝试取消...

    带复选框的 ExtJs tree

    在给定的文件中,我们关注的是“带复选框的ExtJS tree”这一主题,这涉及到ExtJS框架下的树形组件(TreePanel)如何与复选框结合,为用户提供更为灵活的数据选择和管理方式。 ### 标题解析:“带复选框的ExtJS tree...

    ExtJs消息提示框

    在ExtJs中,消息提示框(Notification)是用户界面交互的一个重要元素,它能够向用户显示各种类型的通知信息,如警告、确认、信息提示等。 在标题提到的"ExtJs消息提示框"中,我们关注的是如何在ExtJs应用程序中...

    轻松搞定Extjs 带目录

    Extjs提供了一套丰富的消息框组件,包括: - 提示框(message box) - 输入框(prompt box) - 确认框(confirm box) - 自定义消息框(自定义外观和行为) - 进度条对话框(用于长时间运行操作的反馈) #### 5. ...

    extjs6.6框架的web项目(登录+首页)

    这个项目是一个基于EXTJS 6.6的Web应用实例,提供了完整的登录页面和首页布局,包括左侧菜单和列表展示。以下是关于EXTJS 6.6框架以及该项目的关键知识点: 1. **EXTJS 6.6框架**:EXTJS 是由Sencha公司开发的一个...

    ExtJs4.0 表单提交Demo

    ExtJs 4.0 提供了多种类型的表单字段,如文本输入框、密码框、选择框等,以及表单容器,如Panel、FormPanel。这些组件允许开发者创建复杂且功能完备的表单。表单字段可以通过配置项定义,包括字段类型、验证规则、...

    Extjs4后台框架

    ExtJS4是一个强大的JavaScript前端框架,它主要用于构建富互联网应用程序(RIA)。这个“Extjs4后台框架”可能指的是一个特定的、与ExtJS4集成的后端解决方案,用于支持前端应用的数据交互和管理。让我们深入探讨...

    extjs4.0.7后台管理框架

    4. **Form Components**:EXTJS提供了各种表单元素,如文本框、下拉框、复选框等,用于数据输入和验证。 5. **Layouts**:EXTJS的布局管理器确保组件在不同屏幕尺寸和分辨率下的适配,如Fit、Border、Accordion等...

    extjs弹出框 n秒后消失

    在EXTJS中,弹出框(也称为警告、信息或确认对话框)是用户界面交互的重要组成部分,常用于向用户提供信息、警告或者等待用户确认操作。实现EXTJS弹出框在n秒后自动消失,我们可以利用EXTJS的定时器(Ext.util....

    extjs4.1下拉复选框完整DEMO

    在这个"extjs4.1下拉复选框完整DEMO"中,我们主要关注的是如何使用ExtJS实现一个具有动态加载功能的下拉复选框组件。这个DEMO包含以下几个关键组成部分: 1. **ext-all-debug.js**:这是ExtJS的核心库文件,包含了...

    Extjs实现用户登录

    总结来说,通过ExtJS实现用户登录涉及创建一个包含输入字段的表单,设置提交事件来调用服务器端的登录处理逻辑。在服务器端,如`EmployeeAction`,会接收到这些请求,验证用户名和密码,然后返回相应的响应。整个...

Global site tag (gtag.js) - Google Analytics