var forms=new Ext.form.FormPanel({
layout:"form",
frame:true,
items:[
{
layout:"column",
items:[
{
columnWidth:.4,
xtype:"fieldset",
title:"a",
layout: 'form',
autoHeight: true,
labelWidth:40,
defaults: {
allowBlank:true,
xtype:'textfield',
width:100
},
//defaults:{xtype:textfield},
items:[
{fieldLabel :"姓名",allowBlank:false,name:"username"},
{fieldLabel :"密码",inputType:"password",name:"password"}
]
},{
columnWidth:.6,
xtype:"fieldset",
title:"b",
layout: 'form',
labelWidth: 40,
autoHeight: true,
//defaults:{xtype:textfield},
items:[
{fieldLabel :"性别",allowBlank:false,xtype:"textfield",name:"sex"},
{fieldLabel :"年龄",xtype:"textfield",name:"age"}
]
}
]
},{
xtype:"fieldset",
autoHeight: true,
title:"aaaaaaa",
defaults:{
allowBlank:true,
xtype:'textarea',
width:100,
labelWidth:50
},
items:[
{fieldLabel:"个人爱好",width:200,name:"xingqu"}
]
}
]
});
var windows=new Ext.Window({
title:"添加窗口",
height:300,
width:400,
layout:"fit",
items:[forms],
buttonAlign:'center',
buttons:[
{
text:"ok",
handler:function(){
forms.getForm().submit({
url : 'demo/demos!ext_test.action',
waitMsg : '正在提交,请稍等……',
timeout : 100000,
method : 'GET',
reset : true , //当提交后清空输入域的值
success : function(form,action){ //是与业务相关的只有后台响应为true或响应的JSON包含success:true
Ext.Msg.alert("Success", action.result.msg);
},failure : function(form,action){ //后台响应的JSON包含error:{},就认为连接失败
Ext.Msg.alert('提示','系统登入失败,原因<br/>' + action.failureType);
}
});
}
},{
text:"cancle",
handler:function(){
forms.form.reset();
}
}
]
});
windows.show();
分享到:
相关推荐
Ext JS提供了多种向后台提交数据的方式,包括传统的HTML表单提交以及基于Ajax的异步提交。其中,`form.submit()`是Ext默认的提交方式,它利用Ajax技术进行数据传输,无需刷新整个页面即可完成数据的提交和响应处理,...
通常,Ext JS的表单提交使用Ajax方式,这意味着它可以异步地将表单数据发送到服务器,无需页面刷新。这种方式提供了更好的用户体验,因为用户可以在数据提交的同时继续与应用交互。 在Ext JS中,表单(`Ext.form....
在Ext JS这个强大的JavaScript框架中,动态加载表单数据是一种常见的功能需求,特别是在构建数据驱动的应用程序时。本文将深入探讨如何使用JSON格式的数据来实现这一功能,以便于灵活地更新和显示表单内容。 首先,...
- **解析请求参数**:由于EXT默认是以POST方式提交数据,所以在Action中需要确保能够正确解析这些参数。 ```java @Override public void validate() { if (username == null || username.trim().equals("")) { ...
"ExtAjax表单提交"是EXTJS中的一个重要功能,用于处理用户在网页上的表单数据,并通过Ajax方式向服务器发送请求,实现异步数据交互。 在EXTJS中,表单(Ext.form.Panel)是数据输入和展示的主要组件。它包含了各种...
FormPanel是EXT JS中用于创建表单的容器,它提供了对表单操作的基本支持,如加载和提交数据。在FormPanel中,我们可以添加FieldSet来分组相关的表单元素,或者使用ColumnLayout或FitLayout等布局管理器来调整表单...
在“ExtJs4.0 表单提交Demo”中,我们将深入探讨如何在ExtJs 4.0环境下,通过Ext Ajax模块实现表单的数据提交,同时实现显示层和控制层的分离,提升代码的可维护性和可扩展性。 1. **ExtJs 4.0 表单基础** ExtJs ...
6. **表单组件**:Ext JS 提供了丰富的表单组件,如文本框、下拉列表、复选框、单选按钮等,以及表单验证和数据提交功能,便于创建用户输入界面。 7. **Ajax和JsonP**:库内内置了Ajax和JsonP支持,方便开发者实现...
描述中提到的“ext js各种控件的描述 如树控件,文本框 grid表单 分页等等”,这暗示了这个压缩包可能包含了关于以下几种Ext JS控件的实现和使用方法: 1. **树控件(Tree)**:在Ext JS中,树控件用于显示层次结构...
6. **表单处理**:Ext JS3的表单组件功能强大,支持各种表单元素,包括文本、复选框、下拉框等,同时提供了验证和提交数据的机制,是构建用户输入界面的关键。 7. **图表和图表组件**:Ext JS3包含一套图表组件,可...
使用`Ext.form.Basic`和`Ext.form.Panel`,可以轻松实现数据的提交和验证。 2. **EXT4.3动态grid**: - **动态列**:EXT4.3的`Ext.grid.Panel`允许在运行时动态添加、删除和调整列宽。开发者可以通过`columns`配置...
表单组件是用户与Web应用交互的重要接口,Ext JS提供了丰富的表单组件和字段类型,使得构建复杂的表单验证和数据提交变得简单快捷。 在Ext JS的学习路径上,初学者通常会从下载、安装框架开始,然后通过学习Ext的...
1. **创建接收端点**:创建一个ASP.NET页面或Web API控制器方法,这个方法会接收EXTJS表单提交的数据。数据通常以POST方式发送,ASP.NET可以通过`Request.Form`或`Request.InputStream`来获取。 2. **处理数据**:...
3. **Ajax请求**:使用`Ext.Ajax.request`方法发起异步请求,该方法支持POST或GET方式提交数据。在`action.js`中,可以配置请求的URL(如`action.html`),数据类型,以及成功或失败的回调函数。 4. **服务器端处理...
在EXT中,有三种主要的方式提交数据到服务器,这些方法主要涉及到前端与后端之间的交互,用于处理用户输入的数据并将其发送到服务器进行处理。以下是EXT提交服务器的三种方式的详细说明: 1. **EXT的Form表单AJAX...
本文主要总结了EXT表单提交数据的三种常见方法:EXT的form表单AJAX提交、非AJAX提交以及EXT的Ajax类直接提交。 1. EXT的form表单AJAX提交(默认提交方式) EXT的form表单默认采用AJAX方式进行数据提交,这样可以在...
Ext JS是一个强大的JavaScript库,专门用于构建富客户端应用程序,它提供了丰富的组件库,包括各种表单元素、布局和数据绑定机制。XML作为一种常见的数据交换格式,常用于与后台服务器进行数据交互。 首先,`ext.js...
EXT表单FormPanel是EXT JS框架中用于创建复杂表单的组件,它允许用户输入、编辑和验证数据。在上述代码中,`sampleFormPanel`是一个FormPanel实例,包含了多个配置属性,用于定制表单的行为和外观。 1. `frame : ...
《JavaScript凌厉开发(Ext_JS_3详解与实践)》这本书深入浅出地探讨了JavaScript...这本书的实例丰富、易于理解,对于任何希望提升JavaScript技能,特别是使用Ext JS 3开发Web应用的开发者来说,都是宝贵的参考资料。
7. **Ajax通信**:EXT JS通过Ajax技术实现异步数据交换,可以轻松地与服务器进行交互,获取或提交数据,无需页面刷新。 8. **Drag & Drop**:EXT JS支持拖放功能,允许用户在界面上自由移动组件,实现更直观的操作...