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 相关文章推荐
弹出层之1:JQuery.Boxy (一) 使用介绍
Oct 06 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
Jan 24 Javascript
js中判断用户输入的值是否为空的简单实例
Dec 23 Javascript
探索Vue.js component内容实现
Nov 03 Javascript
JS函数多个参数默认值指定方法分析
Nov 28 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
JavaScript的事件机制详解
Jan 17 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 Javascript
解决vue-cli中stylus无法使用的问题方法
Jun 19 Javascript
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 Javascript
详解vue文件中使用echarts.js的两种方式
Oct 18 Javascript
12个提高JavaScript技能的概念(小结)
May 09 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
Terran剧情介绍
2020/03/14 星际争霸
php中去除所有js,html,css代码
2010/10/12 PHP
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
php实现统计目录文件大小的函数
2015/12/25 PHP
PHP针对字符串开头和结尾的判断方法
2016/07/11 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
JQuery toggle使用分析
2009/11/16 Javascript
Javascript 面试题随笔
2011/03/31 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
Node.js简单入门前传
2017/08/21 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
python数字图像处理之高级滤波代码详解
2017/11/23 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
python实现滑雪游戏
2020/02/22 Python
Python 解析xml文件的示例
2020/09/29 Python
非洲NO.1网上商店:Jumia肯尼亚
2016/08/18 全球购物
MATCHESFASHION澳大利亚/亚太地区:英国时尚奢侈品电商
2020/01/14 全球购物
物理教学随笔感言
2014/02/22 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
会计岗位工作总结
2015/08/12 职场文书
寒假致家长的一封信
2015/10/10 职场文书
如何理解python接口自动化之logging日志模块
2021/06/15 Python
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python