Ext JS With ASP.NET MVC Sample（1）

最新推荐文章于 2021-02-13 08:33:55 发布

笨笨的小菜

最新推荐文章于 2021-02-13 08:33:55 发布

阅读量1.1k

点赞数

分类专栏：代码实例文章标签： ExtJS ASP.NET MVC

本文链接：https://blog.csdn.net/alangshan/article/details/24269043

版权

代码实例专栏收录该内容

10 篇文章 0 订阅

订阅专栏

最近抽空开始整理些WEB前段开发资料，在此记录下来，这是一个基于Ext JS 和 ASP.NET MVC的列子。

（一）登录界面效果图

（二）Ext JS 脚本

/*!
 * Ext JS Library 4.2
 * Copyright(c) 2013-2014 lyh Inc.
 * logyou@msn.com
 * http://extjs.codeplex.com/
 */

Ext.define('Lyh.window.Login', {
    extend: 'Ext.window.Window',
    title: "通用后台管理系统",
    height: 400,
    width: 600,
    layout: "anchor",
    closable: false,
    resizable: false,
    iconCls: "locked",

    initComponent: function() {
        var me = this;

        me.image = Ext.create('Ext.Img', {
            src: '/Home/Code',
            title: '点击刷新图片',
            cls: 'login-cursor-pointer',
            listeners: {
                click: me.refreshImage,
                element: "el",
                scope: me
            }
        });

        me.logoPanel = Ext.create("Ext.Panel", {
            anchor: '100% 28%',
            baseCls: 'login-banner'
        });

        me.loginForm = Ext.create('Ext.form.Panel', {
            title: '帐号登录',
            anchor: "100% 50%",
            bodyPadding: 10,
            waitMsgTarget: true,
            labelWidth: 60,
            layout: 'anchor',
            url: '/Home/Login',
            defaults: {
                anchor: '100%'
            },
            defaultType: 'textfield',
            items: [
                {
                    name: 'UserName',
                    blankText: '用户名不能为空',
                    emptyText: '输入用户名',
                    fieldCls: 'login-username',
                    validateOnBlur: true,
                    allowBlank: false
                }, {
                    inputType: 'password',
                    name: 'Password',
                    blankText: '密码不能为空',
                    emptyText: '输入密码',
                    fieldCls: 'login-password',
                    validateOnBlur: true,
                    allowBlank: false
                },
                {
                    xtype: "container",
                    layout: 'hbox',
                    items: [
                        {
                            xtype: 'textfield',
                            name: 'Code',
                            width: '89.6%',
                            blankText: '验证码不能为空',
                            emptyText: '输入验证码',
                            fieldCls: 'login-code',
                            validateOnBlur: true,
                            allowBlank: false,
                            listeners: {
                                specialkey: function(field, e) {
                                    if (e.getKey() == e.ENTER) {
                                        me.login();
                                    }
                                }
                            }
                        }, me.image
                    ]
                }
            ],
            buttons: [
                {
                    text: '登录',
                    width: '100%',
                    height: 30,
                    formBind: true,
                    iconCls: 'unlocked',
                    handler: function() {
                        me.login();
                    }
                }
            ]
        });

        me.otherLoginForm = Ext.create("Ext.Panel", {
            title: '第三方帐号登录',
            anchor: "100% 22%",
            bodyPadding: 20,
            layout: 'anchor'
        });

        me.items = [me.logoPanel, me.loginForm, me.otherLoginForm];
        me.callParent();
    },
    login: function() {
        if (this.loginForm.isValid()) {
            this.loginForm.submit({
                waitTitle: '登录',
                waitMsg: '登录中，请稍候……',
                success: function(form, action) {
                    window.location.href = '/Account/Main';
                },
                failure: function(form, action) {
                    Ext.Msg.show({
                        title:action.result.title,
                        msg: action.result.message,
                        buttons: Ext.Msg.YES,
                        icon:Ext.Msg.ERROR
                    });
                }
            });
        }
    },
    refreshImage: function() {
        this.image.setSrc('/Home/Code?t=' + new Date().getTime());
    }
});

Ext.require('Lyh.window.Login');
Ext.onReady(function() {
    var win = Ext.create('Lyh.window.Login').show();
    Ext.EventManager.onWindowResize(function() {
        win.center();
    });
});

更多：http://extjs.codeplex.com/