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 相关文章推荐
基于jquery的气泡提示效果
May 31 Javascript
6个DIV 135或246间隔一秒轮番显示效果
Jul 24 Javascript
javascript拓展DOM操作 prependChild insertAfert
Nov 17 Javascript
jquery 圆形旋转图片滚动切换效果
Jan 19 Javascript
extJS中常用的4种Ajax异步提交方式
Mar 07 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
JavaScript是如何实现继承的(六种方式)
Mar 31 Javascript
AngularJS基础 ng-value 指令简单示例
Aug 03 Javascript
详解用webpack把我们的业务模块分开打包的方法
Jul 20 Javascript
VUE 实现滚动监听 导航栏置顶的方法
Sep 11 Javascript
深入浅析js原型链和vue构造函数
Oct 25 Javascript
ant-design-vue 实现表格内部字段验证功能
Dec 16 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
德劲1104的电路分析与改良
2021/03/01 无线电
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
React.js中常用的ES6写法总结(推荐)
2017/05/09 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
JS实现验证码倒计时的注册页面
2018/01/02 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
python实现百度关键词排名查询
2014/03/30 Python
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
Python运算符重载用法实例
2015/05/28 Python
Python入门学习之字符串与比较运算符
2015/10/12 Python
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
opencv 图像腐蚀和图像膨胀的实现
2020/07/07 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
自1926年以来就为冰岛保持温暖:66°North
2020/11/27 全球购物
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
财政专业求职信范文
2014/02/19 职场文书
“向国旗敬礼”活动策划方案(4篇)
2014/09/27 职场文书
学生会主席任命书
2015/09/21 职场文书
导游词之藏龙百瀑景区
2019/12/30 职场文书
JavaScript+HTML实现学生信息管理系统
2021/04/20 Javascript
Golang: 内建容器的用法
2021/05/05 Golang