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 相关文章推荐
JSON 学习之JSON in JavaScript详细使用说明
Feb 23 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
jQuery晃动层特效实现方法
Mar 09 Javascript
JS实现CheckBox复选框全选全不选功能
May 06 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
微信小程序开发之Tabbar实例详解
Jan 09 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
基于js中的原型(全面讲解)
Sep 19 Javascript
js使用formData实现批量上传
Mar 27 Javascript
vue.js 子组件无法获取父组件store值的解决方式
Nov 08 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
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
jquery实现多行文字图片滚动效果示例代码
2014/10/10 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
深入学习JavaScript中的Rest参数和参数默认值
2015/07/28 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
2016/10/13 Javascript
如何在 Vue.js 中使用第三方js库
2017/04/25 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
vue 清空input标签 中file的值操作
2020/07/21 Javascript
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
django认证系统 Authentication使用详解
2019/07/22 Python
详解Python3 pickle模块用法
2019/09/16 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
Python实现一个优先级队列的方法
2020/07/31 Python
python opencv实现图像配准与比较
2021/02/09 Python
《老王》教学反思
2014/02/23 职场文书
小区物业门卫岗位职责
2014/04/10 职场文书
校园文明标语
2014/06/13 职场文书
公司董事长助理工作职责
2014/07/12 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书
离婚纠纷代理词
2015/05/23 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
一年级语文教学随笔
2015/08/14 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js