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字符串对象的concat方法实例(用于连接两个或多个字符串)
Oct 16 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 Javascript
分享20个提升网站界面体验的jQuery插件
Dec 15 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
Dec 18 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Feb 20 Javascript
JavaScript继承定义与用法实践分析
May 28 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
详解Angular Forms中自定义ngModel绑定值的方式
Dec 10 Javascript
原生JS利用transform实现banner的无限滚动示例代码
Jun 15 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
Sep 22 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
短波问题解答
2021/02/28 无线电
php限制文件下载速度的代码
2015/10/20 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
Ext面向对象开发实践(续)
2008/11/18 Javascript
javascript复制对象使用说明
2011/06/28 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
2012/05/10 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
2015/03/24 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
2017/03/08 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
使用Angular CLI生成路由的方法
2018/03/24 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
python中快速进行多个字符替换的方法小结
2016/12/15 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
Python线性回归实战分析
2018/02/01 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
Python中关于浮点数的冷知识
2019/09/22 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
以工厂直接定价的传奇性能:Ben Hogan Golf
2019/01/04 全球购物
群胜软件Java笔试题
2012/09/29 面试题
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
大学生旷课检讨书
2014/01/22 职场文书
公司委托书格式范文
2014/04/04 职场文书
银行委托书范本
2014/09/28 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
小学生大队委竞选稿
2015/11/20 职场文书
《雪域豹影》读后感:父爱的伟大
2019/12/23 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书