Ext.onReady(function() {
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
// 使用表单提示
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
// 根据Cookie里面存放的CSS style来动态改变id为text的样式
var file = Ext.state.Manager.get('style');
Ext.util.CSS.swapStyleSheet('test', 'resources/css/' + file);
// 定义表单
var loginForm = new Ext.FormPanel({
labelAlign : 'top',
frame : true,
monitorValid : true,// 把有formBind:true的按钮和验证绑定
id : 'login',
bodyStyle : 'padding:5px 5px 0',
width : 400,
// 定义表单元素
// 指定容器中的元素
items : [{
layout : 'table', // 把整个空间划分成两列
items : [{
width : 180,
html : '<img src="resources/images/House.jpg" width=170/>' // 左边列放一个logo
}, {
width : 180,
layout : 'form', // 右边列再分成上下两行
items : [{
xtype : 'textfield',
// 元素的名称
name : 'login.username',
// 指定字段的标签
fieldLabel : '帐号',
width : 140,
allowBlank : false,
// 为空时提示信息
blankText : '帐号不能为空'
}, {
xtype : 'textfield',
name : 'login.password',
fieldLabel : '密码',
allowBlank : false,
width : 140,
blankText : '密码不能为空',
inputType : 'password'
}, {
items : [{
layout : 'table', // 把整个空间划分成两列
items : [{
layout : 'form', // 右边列再分成上下两行
width : 85,
items : [{
name : 'login.validateCode',
xtype : 'textfield',
fieldLabel : '验证码',
regex : /^[0-9]{4}$/,
regexText : '图片不清楚吗？请点击图片进行刷新，验证码为4位数字!',
width : 70,
allowBlank : false,
blankText : '验证码不能为空!'
}]
}, {
html : '<img id="photo" src="user.action" onmousedown="changeImg(this)"/>'
}]
}]
}]
}]
}],
buttons : [{
text : '登陆',
formBind : true,
type : 'submit',
// 定义表单提交事件
handler : function() {
if (loginForm.form.isValid()) {// 验证合法后使用加载进度条
Ext.MessageBox.show({
title : '请稍等',
msg : '正在登陆...',
progressText : '',
width : 300,
progress : true,
closable : false,
animEl : 'loading'
});
// 控制进度速度
var f = function(v) {
return function() {
var i = v / 11;
Ext.MessageBox.updateProgress(i, '');
};
};
for (var i = 1; i < 12; i++) {
setTimeout(f(i), i * 150);
}
// 提交到服务器操作
loginForm.form.doAction('submit', {
url : 'login.action',// 文件路径
method : 'post',// 提交方法post或get
params : '',
// 提交成功的回调函数
success : function(form, action) {
if (action.result.data == 'ok') {// ???
window.location = 'main.html';
} else {
Ext.Msg.alert('登陆失败',
action.result.data);
}
},
// 提交失败的回调函数
failure : function() {
Ext.Msg.alert('错误', '服务器出现错误请稍后再试！');
}
});
}
}
}, {
text : '取消',
handler : function() {
loginForm.form.reset();
}// 重置表单
}]
});
// 定义窗体
// 构建一个窗口面板容器
win = new Ext.Window({
// 把该面板绑定于wins这个DIV对象上
// el : 'wins',
// 窗口面板标题
title : '登陆房屋出租系统',
// 窗口面板宽度
width : 400,
// 不容许任意伸缩大小
resizable : false,
// 高度
autoHeight : true,
// 该面板布局类型
layout : 'column',
// 面板是否可以关闭及打开
collapsible : true,
// 窗体拖拽 默认是TRUE
draggable : false,
defaults : {
// 容器内元素是否显示边框
border : false
},
items : {
// 指定内部元素所占宽度1表示100% .5表示50%
columnWidth : 1,
// 把表单面板容器增加入其中,使之成为窗口面板容器的子容器
items : loginForm
}
// // 面板中按钮的排列方式
// buttonAlign : 'center',
// // 面板底部的一个或多个按钮对象
// buttons : [ {
// // 按钮上需显示的文本
// text : '登陆',
// // 单击按钮时响应的动作
// handler : login
// }, {
// text : '重置',
// handler : reset
// }]
});
win.show();// 显示窗体
});
// 点击更换验证码
function changeImg(obj) {
obj.src = "user.action" + "?t=" + Math.random();
}