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代码
Mar 05 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
Jul 29 Javascript
Javascript加载速度慢的解决方案
Mar 11 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
Apr 25 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 Javascript
详解Angular 开发环境搭建
Jun 22 Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 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实现采集程序原理和简单示例代码
2007/03/18 PHP
PHP实现多条件查询实例代码
2010/07/17 PHP
php 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
ThinkPHP框架任意代码执行漏洞的利用及其修复方法
2014/07/04 PHP
php修改文件上传限制方法汇总
2015/04/07 PHP
laravel学习教程之关联模型
2016/07/30 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
Javascript 复制数组实现代码
2009/11/26 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
jquery中filter方法用法实例分析
2015/02/06 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
详解Python中的join()函数的用法
2015/04/07 Python
python处理Excel xlrd的简单使用
2017/09/12 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
pycharm Tab键设置成4个空格的操作
2021/02/26 Python
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
印度服装购物网站:Limeroad
2018/09/26 全球购物
乌克兰网上服装店:Bolf.ua
2018/10/30 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
实习护理工作自我评价
2013/09/25 职场文书
八一演出活动方案
2014/02/03 职场文书
租房协议书
2014/04/10 职场文书
初中生评语大全
2014/04/24 职场文书
李培根演讲稿
2014/05/22 职场文书
学习型党组织建设经验材料
2014/05/26 职场文书
团代会邀请函
2015/02/02 职场文书
党员转正介绍人意见
2015/06/03 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL
SQL SERVER中的流程控制语句
2022/05/25 SQL Server