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获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
用js判断浏览器是否是IE的比较好的办法
May 08 Javascript
通过jQuery源码学习javascript(二)
Dec 27 Javascript
javascript中取前n天日期的两种方法分享
Jan 26 Javascript
Egret引擎开发指南之发布项目
Sep 03 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
JavaScrip常见的一些算法总结
Dec 28 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
Feb 15 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
Jul 15 Javascript
图文讲解vue的v-if使用方法
Feb 11 Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 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
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
php序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
PDO::rollBack讲解
2019/01/29 PHP
jQuery让控件左右移动的三种实现方法
2013/09/08 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
详解jQuery中的empty、remove和detach
2016/04/11 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
微信小程序如何调用新闻接口实现列表循环
2019/07/02 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
Python中取整的几种方法小结
2017/01/06 Python
Python实现pdf文档转txt的方法示例
2018/01/19 Python
创建pycharm的自定义python模板方法
2018/05/23 Python
Python中fnmatch模块的使用详情
2018/11/30 Python
python多任务及返回值的处理方法
2019/01/22 Python
python 实现矩阵填充0的例子
2019/11/29 Python
Python日志syslog使用原理详解
2020/02/18 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
仓库管理计划书
2014/05/04 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
小学生节水倡议书
2015/04/29 职场文书
2015年结对帮扶工作总结
2015/05/04 职场文书
董事长秘书工作总结
2015/08/14 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
Python编程super应用场景及示例解析
2021/10/05 Python
「SHOW BY ROCK!!」“雫シークレットマインド”组合单曲MV公开
2022/03/21 日漫