Ext JS With ASP.NET MVC Sample（1）

来源：互联网发布：手机文字游戏制作软件编辑：程序博客网时间：2024/04/28 00:44
最近抽空开始整理些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/
0 0