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 相关文章推荐
如何用javascript判断录入的日期是否合法
Jan 08 Javascript
一些技巧性实用js代码小结
Oct 14 Javascript
jquery 实现密码框的显示与隐藏示例代码
Sep 18 Javascript
js获取浏览器基本信息大全
Nov 27 Javascript
javascript拖拽应用实例(二)
Mar 25 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
canvas实现简易的圆环进度条效果
Feb 28 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
Oct 23 Javascript
Vue-cli中为单独页面设置背景色的实现方法
Feb 11 Javascript
解析vue data不可以使用箭头函数问题
Jul 03 Javascript
vue视图不更新情况详解
May 16 Javascript
JS猜数字游戏实例讲解
Jun 30 Javascript
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
《魔兽争霸3》重制版究竟重制了什么?玩家:这么糊弄真的好吗?
2020/05/04 魔兽争霸
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
详解PHP归并排序的实现
2016/10/18 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
2016/06/08 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
Python之reload流程实例代码解析
2018/01/29 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
Python调用ffmpeg开源视频处理库,批量处理视频
2020/11/16 Python
python多线程和多进程关系详解
2020/12/14 Python
美国知名日用品连锁超市:Dollar General(多来店)
2017/01/14 全球购物
JDO的含义
2012/11/17 面试题
程序运行正确, 但退出时却"core dump"了,怎么回事
2014/02/19 面试题
阿里巴巴的Oracle DBA笔试题答案-SQL tuning类
2016/04/03 面试题
争论的故事教学反思
2014/02/06 职场文书
乌鸦喝水教学反思
2014/02/07 职场文书
初中毕业生的自我评价
2014/03/03 职场文书
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
预防传染病方案
2014/06/14 职场文书
如何写股份合作协议书
2014/09/11 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
法人身份证明书
2014/10/08 职场文书
因公司原因离职的辞职信范文
2015/05/12 职场文书
判断Python中的Nonetype类型
2021/05/25 Python
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers