用ExtJs制作登陆界面

第一步引入ExtJs文件及相关js文件：

第二步，登陆界面：

第三步，登陆的js文件Login.js

Ext.BLANK_IMAGE_URL = 'pic/blank.gif';

var login = function() {
	Ext.QuickTips.init();
	Ext.lib.Ajax.defaultPostHeader += ";charset=utf-8";
	Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

	// 实现具体的功能
	var form = new Ext.FormPanel( {
		defaultType : 'textfield',
		labelWidth : 60,
		style : 'background:#ffffff;padding:25px 35px 30px 16px;',
		region : "center",
		defaults : {
			border : false,
			allowBlank : false,
			msgTarget : 'side',
			blankText : '该字段不允许为空'
		},
		waitMsgTarget : true,
		items : [
				{
					fieldLabel : '登录帐号',
					name : 'user',
					regex:/^[0-9a-zA-Z]{2,6}$/,
					regexText:'只能为两到六位的大小写字母。'
				},
				{
					fieldLabel : '登录密码',
					name : 'pass',
					inputType : 'password',
					regex:/^.{4,}$/,
					regexText:'长度不能少于4位'
				},
				{
					xtype : 'panel',
					layout : 'column',
					items : [
							{
								width : 130,
								layout : 'form',
								border : false,
								items : [{
									fieldLabel : '效 验 码',
									name : 'checkcode',
									xtype : 'textfield',
									allowBlank : false,
									msgTarget : 'side',
									blankText : '该字段不允许为空',
									anchor : '98%'
								}]
							},
							{   xtype : 'checkCode',
								src : 'IMG.action',
								width : 60,
								height : 20,
								handler : true
							}
					]
				}],
		buttons : [ {
			text : '登陆',
			handler : function() {
				form.getForm().submit( {
					success : function(f, a) {
						OpenFullWin(a.result.url);
					},
					url : 'login.jsp',
					waitMsg : '正在提交，请稍等...'
				});
			}
		}, {
			text : '取消',
			handler : function() {
				form.getForm().reset();
			}
		}]

	});

	var panel = new Ext.Panel( {
		renderTo : 'loginpanel',
		layout : "border",
		width : 525,
		height : 290,
		defaults : {
			border : false
		},
		items : [ {
			region : "north",
			height : 56,
			html : 'pic'
		}, {
			region : "south",
			height : 56,
			html : 'pic'
		}, {
			region : "west",
			width : 253,
			html : 'pic'
		}, form]
	});

	Ext.get('loginpanel').setStyle('position', 'absolute')
			.center(Ext.getBody());

};

Ext.onReady(login);

整体思路是：将登陆界面放入一个border布局的panel里面，该panel的各个部分border设为false。由于没有对

设置CSS，所以显示的登陆界面是在页面的左上角，故需要对panel设置css样式：
Ext.get(‘loginpanel’).setStyle(‘position’, ‘absolute’).center(Ext.getBody());
在CheckCode.js扩展了一个验证组件，代码如下：

Ext.ux.form.CheckCode = Ext.extend(Ext.BoxComponent, {
	initComponent : function() {
		Ext.ux.form.CheckCode.superclass.initComponent.call(this);
		this.addEvents('click');//初始化时间中注册click事件

	},
	onRender : function(ct, position) {
               // 如果当前组件的dom不存在，则创建一个img对象
		if (!this.el) {
			this.el = document.createElement('img');
			this.el.src = this.src;
			if (this.forId) {
				this.el.setAttribute('htmlFor', this.forId);
			}
		}
		//类的onRender调用本类的onRender方法，也就是覆盖父类的onRender方法
		Ext.form.Label.superclass.onRender.call(this, ct, position);
	},
	afterRender : function() {
		Ext.ux.form.CheckCode.superclass.afterRender.call(this);
		this.el.on("click", this.onClick, this);
	},
	onClick : function() {
		if (this.handler === true)
			this.el.dom.src = this.src + '?date=' + new Date();
		else if (Ext.type(this.handler) == 'function')
			this.handler(this);
		this.fireEvent("click", this);
	}

});
Ext.reg('checkCode', Ext.ux.form.CheckCode);

最后，显示的效果图如下：

本文章中的代码下载：http://d.namipan.com/d/ecb1aa65111e17620d18f0565b6f2d190f13bf3d55a62b00