ExtJS网页登录界面

　　老项目的登录界面是模仿wordpress后台写的，这次打算全部重写页面，都采用extjs框架。首先从登录界面下手，结合其他网友提供的代码自己再改改，拼凑成这个样，感觉还不错。

　　js代码：

Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';
Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget = 'side';
var sb = new Ext.ux.StatusBar( {});
if (!Ext.isChrome) {
	sb
			.addButton( {
				text : '建议使用Google浏览器访问',
				cls : "x-btn-text-icon",
				icon : "shared/icons/google-chrome.png",
				handler : function() {
					var googleWin = new Ext.Window(
							{
								iconCls : 'google',
								title : 'Google浏览器安装',
								width : 850,
								height : 450,
								closable : true,
								html : "<iframe src='http://www.google.com/chrome/eula.html?extra=devchannel' style='width:100%; height:100%;'></iframe>"
							});
					googleWin.show();
				}
			})
} else {
	sb.addButton( {
		text : '流畅体验尽在Google浏览器',
		cls : "x-btn-text-icon",
		icon : "shared/icons/google-chrome.png",
		handler : function() {
		}
	})
}
var win = new Ext.Window( {
	title : '用户登录',
	width : 400,

	collapsible : true,
	closable : false,
	resizable : false,
	shadow : true,
	shadowOffset : 10,
	defaults : {
		border : false
	},
	buttonAlign : 'center',
	items : form = new Ext.FormPanel( {
		bodyStyle : 'padding-top:20px',
		defaultType : 'textfield',
		labelAlign : 'right',
		height : 100,
		frame : true,
		defaults : {
			allowBlank : false,
			autowidth : true,
			width : 210
		},

		items : [ {
			xtype : 'textfield',
			fieldLabel : '用户名',
			cls : 'username',
			name : 'username',
			blankText : '用户名不能为空！'

		},

		{
			xtype : 'textfield',
			fieldLabel : '密　码',
			cls : 'password',
			name : 'password',
			inputType : 'password',
			blankText : '密码不能为空！'
		} ]
	}),
	buttons : [ {
		text : "登录",
		icon : 'shared/icons/lock_open.png',
		id : 'login',
		type : "submit",
		handler : function() {

			form.form.submit( {
				waitTitle : '登陆',
				waitMsg : '正在登陆',
				url : 'login/login.action',
				method : 'post',
				params : '',
				success : function() {
				},
				failure : function() {
				}

			})
		}
	},

	{
		text : "重置",
		type : 'submit',
		icon : 'shared/icons/arrow_redo.png',
		handler : function() {
			form.getForm().reset();
		}
	}

	],
	bbar : sb
});
Ext.onReady(function() {
	win.show(this);
});