最近抽空开始整理些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();
});
});