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 API来处理不同的浏览器事件
Dec 09 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
bootstrap网页框架的使用方法
May 10 Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 Javascript
浅谈JavaScript 浏览器对象
Jun 03 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
js实现二级导航功能
Mar 03 Javascript
实例解析ES6 Proxy使用场景介绍
Jan 08 Javascript
详解vue移动端项目的适配(以mint-ui为例)
Aug 17 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 Javascript
Vue事件处理原理及过程详解
Mar 11 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新手上路(四)
2006/10/09 PHP
简单谈谈php中ob_flush和flush的区别
2014/11/27 PHP
变量在 PHP7 内部的实现(二)
2015/12/21 PHP
PHP简单日历实现方法
2016/07/20 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
jQuery 学习 几种常用方法
2009/06/11 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
Javascript递归打印Document层次关系实例分析
2015/05/15 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
图解javascript作用域链
2019/05/27 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
Python中pygame的mouse鼠标事件用法实例
2015/11/11 Python
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
wxPython的安装与使用教程
2018/08/31 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
长青弘远的面试题
2012/06/09 面试题
国际贸易专业推荐信
2013/11/15 职场文书
销售副总经理岗位职责
2013/12/11 职场文书
投标单位介绍信
2014/01/09 职场文书
12岁生日感言
2014/01/21 职场文书
知识竞赛主持词
2014/03/26 职场文书
应届生求职自荐信范文
2014/04/07 职场文书
彩妆大赛策划方案
2014/05/13 职场文书
尊师重教演讲稿
2014/09/04 职场文书
Javascript中async与await的捕捉错误详解
2022/03/03 Javascript