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访问html页面的控件的方法详细分析第1/2页

下面切入正题： 访问控件的主要对象是:document对象。分别对应当前文档所有的（子对象）个人观点。并且已经提供的几个主要方法来访问对象。 1. document.getElementById 2. document.getElementsBy>>>详细阅读

本文标题：ext实现完整的登录代码

地址：http://www.17bianji.com/kaifa2/JS/29477.html

 1/2    1