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 相关文章推荐
Extjs中常用表单介绍与应用
Jun 07 Javascript
javascript动态加载实现方法一
Aug 22 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
Jan 22 Javascript
JavaScript for循环 if判断语句(学习笔记)
Oct 11 Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 Javascript
JS实现的视频弹幕效果示例
Aug 17 Javascript
JavaScript类型相关的常用操作总结
Feb 14 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 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
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
JS小框架 fly javascript framework
2009/11/26 Javascript
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
Mac地址验证的javascript代码
2013/11/09 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
初始Nodejs
2014/11/08 NodeJs
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
JavaScript生成图形验证码
2020/08/24 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
vue实现选中效果
2020/10/07 Javascript
简述Python中的面向对象编程的概念
2015/04/27 Python
python使用zip将list转为json的方法
2018/12/31 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
Python Web框架之Django框架cookie和session用法分析
2019/08/16 Python
wxpython布局的实现方法
2019/11/01 Python
Python同时处理多个异常的方法
2020/07/28 Python
python 生成器需注意的小问题
2020/09/29 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
python 基于opencv去除图片阴影
2021/01/26 Python
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
完美主义个人的自我评价
2014/02/17 职场文书
生日礼品店创业计划书范文
2014/03/21 职场文书
环保倡议书
2014/04/14 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
学习雷锋精神倡议书
2015/04/27 职场文书