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 相关文章推荐
document 和 document.all 分别什么时候用
Jun 22 Javascript
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 Javascript
用javascript实现读取txt文档的脚本
Jul 20 Javascript
javascript 动态加载 css 方法总结
Jul 11 Javascript
javascript 多种搜索引擎集成的页面实现代码
Jan 02 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
Jun 29 Javascript
JS调用页面表格导出excel示例代码
Mar 18 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
Jul 07 Javascript
如何理解Vue前后端数据交互与显示
May 10 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中数据类型转换的三种方式
2015/04/02 PHP
PHP MVC框架skymvc支持多文件上传
2016/05/26 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
详解JS函数重载
2014/12/04 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
深入理解ES7的async/await的用法
2017/09/09 Javascript
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
详解vue中的父子传值双向绑定及数据更新问题
2019/06/13 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
js实现微信聊天效果
2020/08/09 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
python用Pygal如何生成漂亮的SVG图像详解
2017/02/10 Python
Python 加密的实例详解
2017/10/09 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
聊城大学毕业生自荐书
2014/02/01 职场文书
致100米运动员广播稿
2014/02/14 职场文书
建房协议书
2014/04/11 职场文书
历史学专业求职信
2014/06/19 职场文书
公司地址变更通知
2015/04/25 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
Win11快速关闭所有广告推荐
2022/04/19 数码科技
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android