<a href="#" id="login_in">[登 陆]</a>
Ext.onReady(function() {
Ext.get('login_in').on('click',loginfun);
});
var loginfun=function(){
var simple = new Ext.FormPanel({
labelWidth: 75,
baseCls: 'x-plain',
defaults: {width: 150},
defaultType: 'textfield',//默认字段类型
onSubmit: Ext.emptyFn,
submit: function(){
this.getEl().dom.action = 'memberAction.do?action=1'; //连接到服务器的url地址
this.getEl().dom.submit();
},
//定义表单元素
items: [{
fieldLabel: '会员名',
name: 'username',//元素名称
//anchor:'95%',//也可用此定义自适应宽度
allowBlank:false,//不允许为空
maxLength:15,
blankText:'帐户不能为空'//错误提示内容
},{
fieldLabel: '密码',
inputType:'password',
//anchor:'95%',
name: 'password',
maxLength:15,
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 < 12; i++){
setTimeout(f(i), i*150);
}
//非ajax提交
simple.form.submit();
/*
//ajax提交到服务器操作
simple.form.doAction('submit',{
url:'memberAction.do?action=1',//文件路径
method:'post',//提交方法post或get
params:'',
//提交成功的回调函数
success:true,
success:function(form,action){
if (action.result.msg=='ok') {
document.location='index.jsp';
} else {
Ext.Msg.alert('登陆错误',action.result.msg);
}
},
//提交失败的回调函数
failure:function(){
Ext.Msg.alert('错误','服务器出现错误请稍后再试!');
//document.location='index.jsp';
}
});*/
}
}
},
{
text: '关闭',
handler:function(){simple.form.reset();}//重置表单
}]
});
//定义窗体
win = new Ext.Window({
id:'win',
title:'会员登陆',
layout:'fit', //之前提到的布局方式fit,自适应布局
width:300,
height:150,
plain:true,
bodyStyle:'padding:5px;',
maximizable:false,//禁止最大化
closeAction:'close',
closable:true,//禁止关闭
collapsible:false,//可折叠
plain: true,
resizable:false,
draggable:false,
buttonAlign:'center',
items:simple//将表单作为窗体元素嵌套布局
});
win.show();//显示窗体
}
分享到:
相关推荐
### EXT异步提交FORM表单知识点详解 #### 一、EXT异步提交FORM表单概述 在现代Web应用开发中,异步提交表单是一种常见的技术手段,它能够提升用户体验,减少页面刷新带来的数据丢失风险,并能有效提高系统的响应...
在Servlet端,我们需要接收并解析EXT form提交的数据。EXT form默认使用POST方法,数据以JSON或URL编码格式发送。在Servlet的`doPost`方法中,可以通过`HttpServletRequest`对象获取请求参数,然后进行业务处理。 ...
EXT.form组件是EXT JS库中用于构建表单界面的核心组件集合。这些组件提供了一系列丰富的控件,用于创建具有不同功能的交互式表单。在EXT JS中,表单组件不仅包含基本的输入字段,还支持复杂的输入类型和验证机制。 ...
根据给定的信息,本文将详细解释“Ext 添加功能form表单实例”的知识点,这主要针对Ext初学者。本文会从创建表单、字段定义、验证规则以及提交逻辑等方面进行深入探讨。 ### Ext 添加功能form表单实例 #### 表单...
### Ext.form表单中各种属性应用详解 #### 1. Ext.form.NumberField **Ext.form.NumberField** 是 **Ext.form.TextField** 的一个扩展,它专为处理数字输入而设计,提供了一系列与数值相关的配置选项。 - **...
在这个“Ext2.0 form使用实例的例程”中,我们将深入探讨Ext 2.0的表单(form)组件及其应用。 表单在任何应用程序中都扮演着至关重要的角色,用于收集和验证用户输入的数据。Ext 2.0的表单组件提供了一整套完整的...
在“EXT form小例子”中,我们将探讨EXTJS Form组件的基础用法,包括客户端验证和对`Ext.form.Vtype`的扩展。 1. EXTJS Form组件基础: - 表单创建:EXTJS中的表单通常通过`Ext.create`方法创建,如`Ext.create('...
本文主要总结了EXT表单提交数据的三种常见方法:EXT的form表单AJAX提交、非AJAX提交以及EXT的Ajax类直接提交。 1. EXT的form表单AJAX提交(默认提交方式) EXT的form表单默认采用AJAX方式进行数据提交,这样可以在...
标题中的“ext 表单提交”指的是Ext JS框架中关于表单数据提交的功能。Ext JS是一个流行的JavaScript库,用于构建富客户端Web应用。它提供了一套完整的组件模型,包括各种UI元素,如表格、面板、表单等。在Ext JS中...
ext form 提交表单介绍 个个属性的介绍 两个函数介绍
`Ext.form.Action.Load`用于加载数据,`Ext.form.Action.Submit`用于提交数据。它们都有success和failure回调函数,用于处理请求的结果。 5. **HTTP响应处理**: 成功或失败的判断并不完全依赖于HTTP状态码,而是...
Ext Form 是 Ext JS 库中的一个关键组件,用于创建丰富的、交互式的网页表单。它在Web应用程序中扮演着至关重要的角色,允许用户输入、编辑和提交数据。本示例旨在展示如何使用 Ext Form 来构建基本的表单结构以及与...
- **原始的Form提交**:直接使用HTML表单的`submit`方法,适用于不需要异步操作的场景。 - **Ajax提交**:通过Ajax技术,可以在不重新加载页面的情况下发送数据至服务器,提供更流畅的交互体验。 - `Ext.form.Basic...
1. **EXT的Form表单AJAX提交**:这是EXT中最常见的提交方式,它允许你在不刷新整个页面的情况下与服务器进行异步通信。通过使用`doAction`方法,你可以方便地触发表单的提交,并指定URL、HTTP方法以及额外的参数。...
EXT 2.0 Form Demo 知识点详解 EXT是一个流行的JavaScript库,它专注于构建功能丰富的、用户界面复杂的Web应用程序。EXT 2.0版本在当时是一个重要的里程碑,引入了许多新特性和改进,特别是在表单处理方面。在这个...
### ext控件Form相关配置详解 #### 一、引言 在现代Web开发中,Ext JS作为一款功能强大且灵活的前端框架,被广泛应用于构建复杂的企业级应用程序。其中,`Form`控件是Ext JS中一个非常重要的组成部分,它为开发者...
EXT2_combobox_form.rar_combobox ext_ext 这个标题暗示我们关注的是一个与EXT2相关的项目,其中包含了关于form表单和combobox的示例。EXT是一个流行的JavaScript库,主要用于构建富客户端应用,特别是Web应用的用户...
在本文中,我们将深入探讨如何优化EXTJS中的Form表单提交过程,特别是在EXTJS应用程序中。EXTJS是一个强大的JavaScript框架,用于构建富客户端Web应用程序,而表单提交是任何应用程序中不可或缺的部分。优化这一过程...