ext实现完整的登录代码


Posted in Javascript onAugust 08, 2008

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

//定义表单
var simple = new Ext.FormPanel({
labelWidth: 75, 
baseCls: 'x-plain',
width: 150,
defaultType: 'textfield',//默认字段类型

//定义表单元素
items: [{
fieldLabel: '帐户',
name: 'name',//元素名称
//anchor:'95%',//也可用此定义自适应宽度
allowBlank:false,//不允许为空
blankText:'帐户不能为空'//错误提示内容
},{
inputType:'password',
fieldLabel: '密码',
//anchor:'95%',
name: 'pws',
allowBlank:false,
blankText:'密码不能为空'
}
],

buttons: [{
text: '登陆',
type: 'submit',
//定义表单提交事件
handler:function(){
if(simple.form.isValid()){//验证合法后使用加载进度条
Ext.MessageBox.show({
title: '请稍等',
msg: '正在加载...',
progressText: '',
width:300,
progress:true,
closable:false,
animEl: 'loding'
});
//控制进度速度
var f = function(v){
return function(){
var i = v/11;
Ext.MessageBox.updateProgress(i, '');
};
};

for(var i = 1; i < 13; i++){
setTimeout(f(i), i*150);
}

//提交到服务器操作
simple.form.doAction('submit',{
url:'check.asp',//文件路径
method:'post',//提交方法post或get
params:'',
//提交成功的回调函数
success:function(form,action){
if (action.result.msg=='ok') {
document.location='index.html';
} else {
Ext.Msg.alert('登陆错误',action.result.msg);
}
},
//提交失败的回调函数
failure:function(){
Ext.Msg.alert('错误','服务器出现错误请稍后再试!');
}
});

}
},{
text: '取消',
handler:function(){simple.form.reset();}//重置表单
}]
}); 
//定义窗体
var win = new Ext.Window({
id:'win',
title:'用户登陆',
layout:'fit', //之前提到的布局方式fit,自适应布局 
width:300,
height:150,
plain:true,
bodyStyle:'padding:5px;',
maximizable:false,//禁止最大化
closeAction:'close',
closable:false,//禁止关闭
collapsible:true,//可折叠
plain: true,
buttonAlign:'center',
items:simple//将表单作为窗体元素嵌套布局
});
win.show();//显示窗体

Javascript 相关文章推荐
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
Oct 29 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
May 22 Javascript
JS控制HTML元素的显示和隐藏的两种方法
Sep 27 Javascript
全屏滚动插件fullPage.js使用实例解析
Oct 21 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
Vue验证码60秒倒计时功能简单实例代码
Jun 22 Javascript
layui问题之模拟select点击事件的实例讲解
Aug 15 Javascript
微信小程序实现蒙版弹窗效果
Nov 01 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
Javascript与flash交互通信基础教程
Aug 07 #Javascript
二级域名或跨域共享Cookies的实现方法
Aug 07 #Javascript
Div Select挡住的解决办法
Aug 07 #Javascript
js模拟弹出效果代码修正版
Aug 07 #Javascript
top.location.href 没有权限 解决方法
Aug 05 #Javascript
javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 #Javascript
很可爱的输入框
Aug 03 #Javascript
You might like
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
shopex主机报错误请求解决方案(No such file or directory)
2011/12/27 PHP
使用PHP免费发送定时短信的实例
2016/10/24 PHP
php 遍历目录,生成目录下每个文件的md5值并写入到结果文件中
2016/12/12 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
一些mootools的学习资源
2010/02/07 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
2016/09/20 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
Vue.js在数组中插入重复数据的实现代码
2017/11/17 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
浅谈Vue数据响应思路之数组
2018/11/06 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
[02:11]2014DOTA2 TI专访VG战队Fenrir:队伍气氛良好
2014/07/11 DOTA
Python魔术方法详解
2015/02/14 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
WxPython建立批量录入框窗口
2019/02/27 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
意大利男装网店:Vrients
2019/05/02 全球购物
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
美工的岗位职责
2013/11/14 职场文书
国际会议邀请函范文
2014/01/16 职场文书
十八届三中全会个人学习材料
2014/02/13 职场文书
教师见习报告范文
2014/11/03 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python