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 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
jquery.tmpl JQuery模板插件
Oct 10 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 Javascript
Bootstrap的图片轮播示例代码
Aug 31 Javascript
jquery悬浮提示框完整实例
Jan 13 Javascript
微信小程序 绘图之饼图实现
Oct 24 Javascript
有趣的bootstrap走动进度条
Dec 01 Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 Javascript
Javascript删除数组里的某个元素
Feb 28 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
Feb 24 Javascript
vue实现评价星星功能
Jun 30 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 在文件指定行插入数据的代码
2010/05/08 PHP
php守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
分析php://output和php://stdout的区别
2018/05/06 PHP
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
跟我学习javascript的最新标准ES6
2015/11/20 Javascript
初步使用Node连接Mysql数据库
2016/03/03 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
vue实现移动端悬浮窗效果
2018/12/01 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
详解微信小程序开发(项目从零开始)
2019/06/06 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
python获取文件扩展名的方法
2015/07/06 Python
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
python生成大写32位uuid代码
2020/03/03 Python
pytorch SENet实现案例
2020/06/24 Python
Python切片列表字符串如何实现切换
2020/08/06 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
CSS3中的弹性布局em运用入门详解 1em等于多少像素
2021/02/08 HTML / CSS
大学专科生推荐信范文
2013/11/23 职场文书
船舶专业个人求职信范文
2014/01/02 职场文书
节能宣传周活动总结
2014/05/08 职场文书
红色旅游心得体会
2014/09/03 职场文书
中韩经贸翻译专业大学生职业生涯规划范文
2014/09/18 职场文书
个人作风建设总结
2014/10/23 职场文书
工程安全生产协议书
2014/11/21 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
python字典的元素访问实例详解
2021/07/21 Python
利用Java连接Hadoop进行编程
2022/06/28 Java/Android