使用Ext2.0制作漂亮的登陆面板
PS:最近迷上了uucall免费网络电话,最多可以送60分钟话费,用电脑打市话、长途都不要钱!实际上,因为我经常联系的人也不多,用UUCall可以省不了多少钱,关键是觉得很好玩儿 :)拿电脑跟人家打电话,用起来音质蛮好的!大家都去下一个,电脑对电脑是不要钱的,还有的送。不用白不用。http://account.uucall.com/c/27967316.html
参照网上一个Ext2.0富客户端项目的登陆面板代码而写的,文字性的东西就不多说,代码里有完整的注释.如还不明白,欢迎讨论http://www.easyjf.com/.
源码下载地址: http://www.easyjf.com/Ext_EasyJF.rar 或QQ群:52317037共享里也提供下载。
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > 登录系统 </ title >
< link rel ="stylesheet" type ="text/css" href ="plugins/extjs/ext-2.0/resources/css/ext-all.css" />
< link rel ="stylesheet" type ="text/css" href ="ext-patch.css" />
< script type ="text/javascript" src ="plugins/extjs/ext-2.0/adapter/ext/ext-base.js" ></ script >
< script type ="text/javascript" src ="plugins/extjs/ext-2.0/ext-all.js" ></ script >
< script type ="text/javascript" src ="plugins/extjs/ext-2.0/examples/ext-lang-zh_CN.js" ></ script >
< script type ="text/javascript" >
Ext.BLANK_IMAGE_URL = 'plugins / extjs / ext - 2.0 / resources / images / default / s.gif';
Ext.QuickTips.init(); // 初始化鼠标停留时的显示框
Ext.form.Field.prototype.msgTarget = 'side';
</ script >
< style type ="text/css" >
.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 >
< script src ="javascript/adminLogin.js" type ="text/javascript" ></ script >
< div id ="win" class ="x-hidden" ></ div >
</ body >
</ html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > 登录系统 </ title >
< link rel ="stylesheet" type ="text/css" href ="plugins/extjs/ext-2.0/resources/css/ext-all.css" />
< link rel ="stylesheet" type ="text/css" href ="ext-patch.css" />
< script type ="text/javascript" src ="plugins/extjs/ext-2.0/adapter/ext/ext-base.js" ></ script >
< script type ="text/javascript" src ="plugins/extjs/ext-2.0/ext-all.js" ></ script >
< script type ="text/javascript" src ="plugins/extjs/ext-2.0/examples/ext-lang-zh_CN.js" ></ script >
< script type ="text/javascript" >
Ext.BLANK_IMAGE_URL = 'plugins / extjs / ext - 2.0 / resources / images / default / s.gif';
Ext.QuickTips.init(); // 初始化鼠标停留时的显示框
Ext.form.Field.prototype.msgTarget = 'side';
</ script >
< style type ="text/css" >
.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 >
< script src ="javascript/adminLogin.js" type ="text/javascript" ></ script >
< div id ="win" class ="x-hidden" ></ div >
</ 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);
* @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);
转自: http://blog.csdn.net/maoweiwer/archive/2008/01/20/2054011.aspx