使用Ext2.0制作漂亮的登陆面板

来源：互联网发布：网络报销管理系统编辑：程序博客网时间：2024/06/09 20:04

参照网上一个Ext2.0富客户端项目的登陆面板代码而写的,文字性的东西就不多说,代码里有完整的注释.如还不明白,欢迎讨论http://www.easyjf.com.

源码下载地址:http://www.easyjf.com/Ext_EasyJF.rar

效果如下图所示:

<head>

Ext.BLANK_IMAGE_URL = 'plugins/extjs/ext-2.0/resources/images/default/s.gif';

Ext.QuickTips.init();//初始化鼠标停留时的显示框

Ext.form.Field.prototype.msgTarget = 'side';

</script>

.user{...}{ background:url(images/user.gif) no-repeat 1px 2px; }

.key{...}{ background:url(images/key.gif) no-repeat 1px 2px; }

.key,.user{...}{

background-color:#FFFFFF;

padding-left:20px;

font-weight:bold;

color:#000033;

}

</style>

</head>

<body>

</body>

</html>

adminLogin.js代码

/**//**

* @author 冷雨 HTTP://WWW.EasyJF.Com

* 使用Ext2.0构造一个客户登陆面板

LoginPanel = function() ...{

var win, f;

var buildForm = function() ...{

// 构建一个表单面板容器

f = new Ext.form.FormPanel( ...{

// 给面板的body元素指定自定义的CSS样式信息

bodyStyle : 'padding-top:6px',

// 容器中元素的默认类型

defaultType : 'textfield',

// 标签的默认对齐方式

labelAlign : 'right',

// 指定标签的默认长度

labelWidth : 55,

// 标签与字段录入框之间的空白

labelPad : 0,

// 窗口是否显示背景色

frame : true,

// 容器中组件默认统一配置选项

defaults : ...{

// 验证字段是否能为空

allowBlank : false,

// 字段宽度

width : 158

// 指定容器中的元素

items : [ ...{

// 给元素添加CSS样式

cls : 'user',

// 元素的名称

name : 'userName',

// 指定字段的标签

fieldLabel : '帐号',

// 为空时提示信息

blankText : '帐号不能为空'

}, ...{

cls : 'key',

name : 'password',

fieldLabel : '密码',

blankText : '密码不能为空',

inputType : 'password'

}]

});

};

var buildWin = function() ...{

// 构建一个窗口面板容器

win = new Ext.Window( ...{

// 把该面板绑定于win这个DIV对象上

el : 'win',

// 窗口面板标题

title : '登陆系统',

// 窗口面板宽度

width : 265,

// 高度

height : 140,

// 该面板布局类型

layout : 'column',

// 面板是否可以关闭及打开

collapsible : true,

defaults : ...{

// 容器内元素是否显示边框

border : false

items : ...{

// 指定内部元素所占宽度1表示100% .5表示50%

columnWidth : 1,

// 把表单面板容器增加入其中,使之成为窗口面板容器的子容器

items : f

// 面板中按钮的排列方式

buttonAlign : 'left',

// 面板底部的一个或多个按钮对象

buttons : [ ...{

// 按钮上需显示的文本

text : '登陆',

// 单击按钮时响应的动作

handler : login

}, ...{

text : '重置',

handler : reset

}, ...{

text : '注册',

handler : link

}]

});

};

// 单击按钮时执行登陆操作

var login = function() ...{

// 执行当前表单面板的submit

f.form.submit( ...{

// 动作发生期间显示的文本信息

waitMsg : '正在登录......',

// submit发生时指向的地址

url : 'portal.ejf?cmd=adminLogin',

// 表单提交方式

method : 'POST',

// 数据验证通过时发生的动作

success : function(form, action) ...{

window.location.href = 'manage.ejf';

// 反之......

failure : function(form, action) ...{

reset();

if (action.failureType == Ext.form.Action.SERVER_INVALID)

Ext.MessageBox.alert('警告', action.result.errors.msg);

}

});

};

// 清空当前表单面板内的数据

var reset = function() ...{

f.form.reset();

};

// 注册按钮指向的地址

var link = function() ...{

window.open('http://easyjf.com/user.ejf?cmd=registerPU', '_blank')

};

return ...{

init : function() ...{

buildForm();

buildWin();

// 最后把窗口面板显示出来

win.show();

}

}();

// 当当前页面DOM加载完毕后,在LoginPanel作用域内执行LoginPanel.init.

Ext.onReady(LoginPanel.init, LoginPanel);