ExtJs二(实现登录)

原文 http://www.cnblogs.com/aehyok/archive/2013/04/18/3028739.html

前言

  在上一次http://www.cnblogs.com/aehyok/archive/2013/04/17/3025957.html主要是搭建Ext环境,本次课程主要是通过Ext组件来实现登录。

开始动手

 1.在解决方案资源管理器中选择Scripts\ExtJS\ux目录,单击右键选择添加,新建项,在弹出窗口中选择Jscript文件,并将名称修改为login.js(以后的项目的可直接将该文件复制到该目录)

这里要注意,文件名不能用类的全名做文件名,因为动态加载会根据类名自动找到目录并加载文件,类名中最后一个小数点后的名称就是文件名,例如,登录窗口的类全称为Ext.ux.Login,而login就是文件名。

如果想要在脚本中使用ExtJS的提示信息,可将书附带的资源包中的Ext.js文件复制到ExtJS目录中,复制后,在解决方案资源管理器将Ext.js拖到到login.js文件中,就会生成以下代码: 

/// <reference path="../Ext.js" />

2.现在,先把类的定义写好,包括父类、单例模式、窗口标题、宽度和高度。窗口的标题为“Ext Js MVC登录窗口”。宽度和高度暂定为400,到时候再调整。最终代码如下(Login.js中):

Ext.define("Ext.ux.Login", {
    extend: "Ext.window.Window",
    singleton: true,
    title: 'ExtJs Mvc登录窗口',
    width: 400,
    height: 400
});

3.要考虑窗口应该包含那些配置项了,窗口应是模态的,不能关闭,不能调整大小,关闭模式为隐藏,隐藏模式为偏移等,因而加入以下代码:

    modal: true,
    closable: false,
    resizable: false,
    closeAction: 'hide',
    hideMode: 'offsets',

4.在窗口的initComponent方法内定义登录用的控件了。一般的登录窗口都包含用户名、密码和验证码3个文本输入框,还包含有显示验证码 的图片、登录和重置按钮。因而需要用到的ExtJS控件包括表单面板、图片、工具栏、按钮和文本字段。下面要做的是先定义好表单,在扩展内加入以下代码:

    initComponent: function () {
        var me = this;
        me.form = Ext.create(Ext.form.Panel, {

        });
        me.callParent(arguments);
    }

代码中,me的作用是将外部作用域中的this对象保存为本地变量,这样的好处包括,一是,如果this是window等全局变量,就可以将全局变 量变成本地变量,提高访问效率,二是可以让闭包访问该对象。这写法在Ext JS文件中始终贯穿其中,本着拿来主义的精神,好东西应该学一下。

注意create方法中的对象名称,笔者并没有使用字符串,这样就可以直接使用对象,而不需要再去转换表中找对象,可以提高速度。

调用callParent方法是必须的,不然组件运行会出问题,达不到预期效果。

5.来定义表单配置项了,代码如下:

            border: false,
            bodyPadding: 5,
            bodyStyle: "background:#DFE9F6",

代码中,第一句表示不要边框,如果喜欢带有边框的表单,可以把这项去掉或者修改为true。第二句表示将表单面板向内压缩5像素,这样表单内的组件 就不会和窗口的内边框粘在一起,这个可根据个人喜好设置。第三句的作用就是让表单面板的背景颜色和窗口融合在一起,而不是默认的白色,这还是个人喜好问 题。

6.接着加入表单面板的提交地址,这里定为Account/Login,就是Account控制器的Login方法,代码如下:

url: "Account/Login",

7.因为表单内使用的都是文本字段,因而可以统一做一些定义,如标签宽度为80,标签的分隔符为中文冒号,锚固为0,都不允许为空等,代码如下:

defaultType: "textfield",
fieldDefaults: {
    labelWidth: 80,
    labelSeparator: ":",
    anchor: "0",
    allowBlank: false
},

8.接下来是定义字段了,这个简单,因为默认设置已经定义了几个配置项,因而余下的就只有字段标签和名称。验证码特殊点,必须是6位字符,代码如下:

items: [
    {
        fieldLabel: "用户名", name: "UserName"
    },
    {
        fieldLabel: "密码", name: "Password", inputType: "password"
    },
    {
        fieldLabel: "验证码", name: "Vcode", minLength: 6, maxLength: 6
    }
}

9.现在要考虑怎么显示验证码图片,如果直接在表单内加入Image控件,会很难控制图片的位置,因为最好的方式是先套一个容器。因为Img对象的 实例在刷新图片的时候还要用到,因而最好用一个属性来指向对象实例,这样就可以通过该属性在类的内部访问到实例了。在创建表单的前面添加以下创建Img对 象实例的代码:

 me.image = Ext.create(Ext.Img, {
  src: "/VerifyCode"
  });

 千万不要在创建表单后面创建,不然在表单内插入图片的时候就找不到对象了。

代码中,验证码图片将VerifyCode控制器生成,这个暂时放下,会在后面讨论。

10.还要实现的是单击图片刷新验证码,但是查API发现Img对象居然没单击事件。没关系,在4.1版本的Ext JS中,修改了事件的定义方式,可以直接为对象生成的HTML元素绑定事件了,只要在监听事件中加入element配置项就行了,这相当方法。因而可在创 建Img实例的配置对象中加入以下代码:

listeners: {
    click: me.onRefrehImage,
    element: "el",
    scope: me
}

代码中,element配置项中的el就表示要在对象生成的HTML元素中绑定事件,绑定事件为click事件,事件将调用 onRefrehImage方法。方法只是简单的刷新图片,因而使用Img对象的setSrc方法就可以,使用以下代码顺便完成 onRefrehImage方法:

onRefrehImage: function () {
    this.image.setSrc("/VerifyCode?_dc=" + (new Date()).getTime());
}

代码很简单,使用setSrc方法刷新图片的src就行了,加上时间戳可防止显示缓存图片。

 好了,可以在表单items里加入验证码图片了,代码如下:

?

{

    xtype: "container", height: 80, anchor: "-5", layout: "fit",

    items: [me.image]

}

 从代码可以看到,使用容器的作用就是可以使用fit布局来限制图片的尺寸,这样布局就容易多了。

还要加入一段提示信息,告知用户验证码不区分大小写,且如果看不清楚验证码图片,可单击图片刷新验证码,代码如下:

?

{

    xtype: "container", anchor: "-5", html: "**验证码不区分大小写,如果看不清楚验证码,可单击图片刷新验证码。"

}

 11.表单余下的就是添加登录和重置按钮了,代码如下:

dockedItems: [{
    xtype: 'toolbar', dock: 'bottom', ui: 'footer', layout: { pack: "center" },
    items: [
        { text: "登录", width: 80, disabled: true, formBind: true, handler: me.onLogin, scope: me },
        { text: "重置", width: 80, handler: me.onReset, scope: me }
    ]
}]

在这里使用了dockedItems配置项,目的一是因为介绍Ext JS 4的新功能,二是因为使用这个确实挺方便。代码中定义了一个工具栏,停靠位置由dock配置项决定,在这里是底部(bottom),工具栏的样式使用了 ui配置项定义的footer,也就是原来窗口的底部页脚工具栏,工具栏的布局将使用居中对齐方式。

登录按钮预设为禁用的。formBind配置的作用是只有在表单内输入符合要求时才能使用该按钮,这个设计在Ext JS4也是新加入的,很方便,不再需要自己去写代码实现这个了。登录按钮将调用onLogin方法。重置按钮很简单,只是简单的调用onReset方法。

余下要完成的是onLogin和onReset方法。先来完成简单onReset方法,基本功能就是重置表单,并将焦点移动到第一个文本字段,也就是用户名那里,还要刷新验证码,代码如下:

    onReset: function () {
        var me = this;
        me.form.getForm().reset();
        if (me.form.items.items[0]) {
            me.form.items.items[0].focus(true, 10);
        }
        me.onRefrehImage();
    }

代码中要注意的是获取表单中第一个文本字段的代码,因为表单在实例化后,items属性指向的是MixedCollection实例,因为要在其items内才能找到文本自动对象。

 接着完成的是onLogin方法,难度也不大, 就是先调用isValid方法,验证表单是否符合提交要求,然后调用submit方法提交。其实不调用isValid也行,因为登录按钮只要在isValid为true时才能用。代码如下:

onLogin: function () {
    var me = this,
        f = me.form.getForm();
    if (f.isValid()) {
        f.submit({
            //waitMsg: "正在登录,请等待……",
            //waitTitle: "正在登录",
            success: function (form, action) {
                window.location.reload();
            },
            failure: function () {
            },
            scope: me
        });
    }
}

登录成功(success配置项)后,会刷新一下页面,让页面写入验证信息到Cookie。当然,也可以跳转到另外一页,不过笔者认为不如这样来得简便,这个稍后会说到。

登录失败(failure配置项),只写了一个空函数的目的是因为表单的提交返回的数据格式是一样的,处理方式也一样,因而可使用同一个函数进行处理,但是还没写到,因而先保留一个空函数。

最后,别忘了将表单加入窗口的items里,这个必须放在调用callParent之前,不如不会初始化表单,代码如下:

me.items = [me.form]

至此,登录窗口就暂时写好了。

以下是完整的Login.js代码:

/// <reference path="../Ext.js" />

Ext.define("Ext.ux.Login", {
    extend: "Ext.window.Window",
    singleton: true,
    title: 'ExtJs Mvc登录窗口',
    width: 450,
    height: 300,
    modal: true,
    closable: false,
    resizable: false,
    closeAction: 'hide',
    hideMode: 'offsets',

    initComponent: function () {
        var me = this;

        me.image = Ext.create(Ext.Img, {
            style: "cursor:pointer ",
            src: "/VerifyCode",
            listeners: {
                click: me.onRefrehImage,
                element: "el",
                scope: me
            }
        });

        me.form = Ext.create(Ext.form.Panel, {
            border: false,
            bodyPadding: 5,
            bodyStyle: "background:#DFE9F6",
            url: "Account/Login",
            defaultType: "textfield",
            fieldDefaults: {
                labelWidth: 80,
                labelSeparator: ":",
                anchor: "0",
                allowBlank: false
            },
            items: [
                {
                    fieldLabel: "用户名", name: "UserName"
                },
                {
                    fieldLabel: "密码", name: "Password", inputType: "password"
                },
                {
                    fieldLabel: "验证码", name: "Vcode", minLength: 6, maxLength: 6
                },
                {
                    xtype: "container", height: 80, anchor: "-5", layout: "fit",
                    items: [me.image]
                },
                {
                    xtype: "container", anchor: "-5", html: "**验证码不区分大小写,如果看不清楚验证码,可单击图片刷新验证码。"
                }
            ],
            dockedItems: [{
                xtype: 'toolbar', dock: 'bottom', ui: 'footer', layout: { pack: "center" },
                items: [
                    { text: "登录", width: 80, disabled: true, formBind: true, handler: me.onLogin, scope: me },
                    { text: "重置", width: 80, handler: me.onReset, scope: me }
                ]
            }]
        });

        me.items = [me.form]

        me.callParent(arguments);

    },

    onRefrehImage: function () {
        this.image.setSrc("/VerifyCode?_dc=" + (new Date()).getTime());
    },

    onReset: function () {
        var me = this;
        me.form.getForm().reset();
        if (me.form.items.items[0]) {
            me.form.items.items[0].focus(true, 10);
        }
        me.onRefrehImage();
    },

    onLogin: function () {
        var me = this,
            f = me.form.getForm();
        if (f.isValid()) {
            f.submit({
                //waitMsg: "正在登录,请等待……",
                //waitTitle: "正在登录",
                success: function (form, action) {
                    window.location.reload();
                },
                failure: function () {
                },
                scope: me
            });
        }
    }

});

时间: 2013-04-26

ExtJs二(实现登录)的相关文章

Nodejs+Extjs+Mongodb开发第三天 登录页面(1)

学习新技术最快捷的方式就是做项目.在第一天的环境搭建好后,我就准备基于Nodejs+Extjs+Mongodb来做一个Web系统. 环境搭建:http://blog.csdn.net/jrainbow/article/details/38845639 一.技术选择的原因 1.Nodejs.这个不用说了,就是为了学习这个来的.因为要做的是Web系统,所以选择了Express框架. 2.Extjs.原因也很简单,因为笔者的美工不行,而且之前有使用过Extjs框架.为了更满足自己的银弹心理,这个项目选

C#进行Visio二次开发之Web端启动绘图客户端并登录

有这样的需求,一个系统,包含Web端的后台和Winform的绘图客户端程序,用户需要在Web端能够启动绘图客户端,并且不需要重新登录(因为已经登录了Web端了). 那么在IE的Web端,如何启动Winform做的绘图客户端程序呢?当然对于其他桌面应用程序也是一样的. 总体思路是: 1. 在asp.net页面中增加一个按钮或者菜单,连接是调用一个JavaScript函数实现启动程序 2. 客户端的用户的环境变量有该应用程序的目录路径信息 3. Winform的绘图客户端程序能够处理传递过来的命令行

extjs对php的ajax二次请求,权限复选框取了值返回后台,后台再计算权值value过来

问题描述 extjs对php的ajax二次请求,权限复选框取了值返回后台,后台再计算权值value过来 extjs二次请求,权限复选框取了值返回后台,后台再计算权值value过来,然后前台再将value给添加到数据库,有没有人能说个方法或者给个demo链接啊?? 解决方案 前台再将value给添加到数据库,是你的php入库,前台js无法写你远程数据库,前台js只负责传递数据

为什么服务器登录成功不显示ip,而是显示ID

问题描述 为什么服务器登录成功不显示ip,而是显示ID 解决方案 http://zhidao.baidu.com/link?url=Stgbd-8CerJPt6Xcjp5yNnhWpqw8Xe9oM1nVkrten3ljIb0ZgZIKkbLQ2qoHNQinWpWSNd0o5gCR6Rf0ie0E4iMobGqh2A11TK8FxAlCE3K 解决方案二: 登录成功 显示 用户名

Python的Flask框架中实现简单的登录功能的教程

  Python的Flask框架中实现简单的登录功能的教程,登录是各个web框架中的基础功能,需要的朋友可以参考下 回顾 在前面的系列章节中,我们创建了一个数据库并且学着用用户和邮件来填充,但是到现在我们还没能够植入到我们的程序中. 两章之前,我们已经看到怎么去创建网络表单并且留下了一个实现完全的登陆表单. 在这篇文章中,我们将基于我门所学的网络表单和数据库来构建并实现我们自己的用户登录系统.教程的最后我们小程序会实现新用户注册,登陆和退出的功能. 为了能跟上这章节,你需要前一章节最后部分,我们

网站为什么要登录?

谈到"登录",大多数人脑海中会立刻浮现出那个"两小框:一用户名,一密码,外加一按钮"的经典豆腐块, 这样的功能模块在互联网上屡见不鲜, 成为大中小各类网站的标配. 然而说到底,登录产品为什么是大家熟知的现在的样子?用户为什么要登录? 一.登录的产品目标 和做登录的产品经理探讨过这个话题,得到的结论是: 其实广义的登录就是一个用户身份的验证环节,密码校验只是众多身份验证的方式中的一种,之所以用户名和密码框的组合成为了登录的经典标配,是因为目前做身份验证的技术方案中,校

支付宝账户登录名无法自主修改的解决方法

用于登录支付宝账户的邮箱或手机号码不能使用,想更换支付宝账户登录名,请查看以下帮助内容: 一.登录名为邮箱: 1.进入帮助中心的自助服务大厅,点击[修改Email账户名]; 2.输入当前需要修改的支付宝账户登录名; 电脑常识 3.输入新的Email账户名; 4.提交成功后,进入新邮箱,根据邮件提示提供相应的证件给我们,您可以提供以下证件:身份证.户口本.户籍证明.2007年1月1日前的护照.临时身份证五选一,支付宝收到核实后会在48小时内处理. 二.登录名是手机号码 1.登录支付宝账户--手机服

tomcat部署本地项目后,登录提示400(bad request)

问题描述 tomcat部署本地项目后,登录提示400(bad request) 一.这是一个maven项目,部署在云服务器的.我拿了源码,本地用tomcat部署.已经把服务器IP改成localhost. 二.登录时候一直报400,用chrome的控制台显示,是 @ jquery-1.8.3.min.js?v=20150226:2v.extend.ajax . 三.在chrome的sources中可以看到这个js是来自云服务器的..本地是有一个jquery-min.js的JS. 四.我已经检查过代

10分钟 MySQL 入门教程

一.MySQL的相关概念介绍 二.Windows下MySQL的配置 配置步骤 MySQL服务的启动.停止与卸载 三.MySQL脚本的基本组成 四.MySQL中的数据类型 五.使用MySQL数据库 登录到MySQL 创建一个数据库 选择所要操作的数据库 创建数据库表 六.操作MySQL数据库 向表中插入数据 查询表中的数据 更新表中的数据 删除表中的数据 七.创建后的修改 添加列 修改列 删除列 重命名表 删除整张表 删除整个数据库 八.附录 修改 root 用户密码 可视化管理工具 MySQL