参照网上一个Ext2.0富客户端项目的登陆面板代码而写的,文字性的东西就不多说,代码里有完整的注释.如还不明白,欢迎讨论http://www.easyjf.com/ .
源码下载地址:http://www.easyjf.com/Ext_EasyJF.rar 或QQ群:52317037共享里也提供下载。
效果如下图所示:
login.html代码:
<
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
>
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);