Ext.onReady(function()
{
	var xtf = Ext.form;

	var actionButtonText = "Login";

	function validateForm(form)
	{
		if (form.findField('userId').getValue() == "")
		{
			form.findField('userId').focus();
			return false;
		}
		if (form.findField('password').getValue() == "")
		{
			form.findField('password').focus();
			return false;
		}

		return true;
	}

	var loginForm = new xtf.FormPanel({
		labelWidth: 65,
		frame: false,
		bodyStyle:'background:#A5C4E1;padding:6px 0px 6px 2px',
		border: true,
		onSubmit: Ext.emptyFn,
		labelAlign: 'right',
		labelSeparator: ' ',
		width: 159,
		url: actionURL,
		items:
		[{
			xtype: 'textfield',
			id: 'userIdField',
			name: 'userId',
			fieldLabel: 'User Name',
			maskRe: /[a-zA-Z0-9\.\_\-]/,
			minLength: 5,
			maxLength: 20,
			width: 75
		},
		{
			xtype: 'textfield',
			name: 'password',
			fieldLabel: 'Password',
			maskRe: /[a-zA-Z0-9]/,
			inputType: 'password',
			minLength: 5,
			maxLength: 12,
			width: 75
		},
		{
			xtype: 'hidden',
			name: 'timezoneOffset',
			value: (new Date()).getTimezoneOffset()
		},
		{
			xtype: 'button',
			text: actionButtonText,
			style:'margin-left:97px',
			handler: function()
			{
				if (validateForm( loginForm.getForm() ))
				{
					loginForm.getForm().getEl().dom.action = loginForm.url;
					loginForm.getForm().getEl().dom.submit();
				}
			}
		}]
	});
	loginForm.render('loginForm');
});