ext 表单提交的两种方式对比
Ext中的表单数据提交有两种方式:
Ajax提交方式
Form提交方式
Ajax提交方式
function save(){
var pid = field_PId.getValue();//必填字段
var ptid = combo_PtId.getValue();
var creator = field_creator.getValue();//必填字段
var createtime = field_createtime.getValue();//必填字段
var modifier = field_modifier.getValue();//必填字段
var modifytime = field_modifytime.getValue();//必填字段
var orderno = field_orderno.getValue();
var orgcode = field_orgcode.getValue();
var prjno = field_prjno.getValue();
var prjname = field_prjname.getValue();
var prjdscr = field_prjdscr.getValue();
var psd = field_psd.getValue();
var ped = field_ped.getValue();
var asd = field_asd.getValue();
var aed = field_aed.getValue();
var prjpm = field_prjpm.getValue();
var parenetid = field_pid.getValue();
var istrue = combo_istrue.getValue();
var owner = field_owner.getValue();
var ownertel = field_ownertel.getValue();
var owneraddr = field_owneraddr.getValue();
var state = field_state.getValue();
var stage = field_prjstage.getValue();
var dirid = field_dirid.getValue();
var hiddenID = hidden_Id.getValue();
if(validate(pid,"项目ID")&&
validate(creator,"创建人")&&
validate(createtime,"创建时间")&&
validate(modifier,"最后一次修改人")&&
validate(modifytime,"最后一次修改时间")){
if(hiddenID==null||hiddenID==""){//add
Ext.Ajax.request({
//url : contextPath+'/oa/csproject.ext?pmethod=addCsProject',
url : contextPath+'/oa/csproject.ext?pmethod=addCsProject',
pmethod : 'post',
params : {
prjId : pid,//必填字段
creator : creator,//必填字段
createtime : createtime,//必填字段
modifier : modifier,//必填字段
modifytime : modifytime,//必填字段
orderno : orderno,
orgcode : orgcode,
prjCode : prjno,
prjName : prjname,
prjDscr : prjdscr,
prjPlanSd : psd,
prjPlanEd : ped,
prjActualSd : asd,
prjActualEd : aed,
prjPm : prjpm,
parentId : parenetid,
prjIstrue : istrue,
prjOwner : owner,
prjOwnerTel : ownertel,
prjOwnerAddr : owneraddr,
prjState : state,
prjStage : stage,
prjDirId : dirid
},
success : function(response, options) {
var jsonObj = eval(response.responseText);
if (jsonObj.state) {
store_csProject.load();
window_Edit.hide();
}
Ext.Msg.alert("提示", jsonObj.message);
}
});
}else{//update
Ext.Ajax.request({
url : contextPath+'/oa/csproject.ext?pmethod=updateCsProject',
pmethod : 'post',
params : {
prjId : pid,//必填字段
creator : creator,//必填字段
createtime : createtime,//必填字段
modifier : modifier,//必填字段
modifytime : modifytime,//必填字段
orderno : orderno,
orgcode : orgcode,
prjCode : prjno,
prjName : prjname,
prjDscr : prjdscr,
prjPlanSd : psd,
prjPlanEd : ped,
prjActualSd : asd,
prjActualEd : aed,
prjPm : prjpm,
parentId : parenetid,
prjIstrue : istrue,
prjOwner : owner,
prjOwnerTel : ownertel,
prjOwnerAddr : owneraddr,
prjState : state,
prjStage : stage,
prjDirId : dirid
},
success : function(response, options) {
var jsonObj = eval(response.responseText);
if (jsonObj.state) {
store_csProject.load();
window_Edit.hide();
}
Ext.Msg.alert("提示", jsonObj.message);
}
});
}
}
}
Ajax提交方式比较麻烦,提交数据首先的获取到控件里面的内容,然后在以参数的形式传递到后台。其次还有一个问题就是当传递DateField控件里面的数据到后台的时候会出现null值的现象,这主要是因为Ajax的传递机制问题。
他会把时间格式的数据以字符串的形式并且是以URL重写的方式传递到后台,这样在传递过程中,会导致浏览器对时间格式的不识别,从而丢失数据。
再次,如果是要重置表单的话,也需要一个一个控件的进行置空。
所以,我们最好是采用form表单提交的形式进行数据提交。尤其是在提交数据字段很多的时候,会有很大的优势。
在使用Form表单提交的时候,需要注意的地方就是一定要为你的控件添加 name属性!!!!!!!!!
表单提交格式:
if(savePanel.getForm().isValid()){
savePanel.getForm().doAction('submit',{
url : contextPath+'/work/schedule.ext?pmethod=addSchedule',
method : 'post',
params : {
},
success : function(response, action) {
var message = action.result.message;
//Ext.example.Msg(message);
Ext.Msg.alert('提示',message);
},
failure:function(response,action){
}
});
}
关于表单提交的几个重要方法:
表单自动验证 >>>> 表单控件.getForm().isValid();
表单提交 >>>> 表单控件.getForm().doAction(‘submit’);
表单重置 >>>> 表单控件.getForm().reset();
对于表单提交后台返回处理结果的格式:
if(info!=null){
this.write(response, "{'success':true,'message':'增加日程信息成功'}");
}else{
this.write(response, "{'success':false,'message':'增加日程信息失败'}");
}
分享到:
相关推荐
EXT框架(通常指的是Ext JS)作为一种成熟且功能丰富的JavaScript库,提供了强大的UI组件和便捷的数据处理方法,其中就包括了异步提交FORM表单的功能。 #### 二、EXT异步提交FORM表单的基本原理与实现 ##### 2.1 ...
1. **EXT的Form表单AJAX提交**:这是EXT中最常见的提交方式,它允许你在不刷新整个页面的情况下与服务器进行异步通信。通过使用`doAction`方法,你可以方便地触发表单的提交,并指定URL、HTTP方法以及额外的参数。...
通常,Ext JS的表单提交使用Ajax方式,这意味着它可以异步地将表单数据发送到服务器,无需页面刷新。这种方式提供了更好的用户体验,因为用户可以在数据提交的同时继续与应用交互。 在Ext JS中,表单(`Ext.form....
其中,`form.submit()`是Ext默认的提交方式,它利用Ajax技术进行数据传输,无需刷新整个页面即可完成数据的提交和响应处理,极大地提升了用户体验。 - **原始的Form提交**:直接使用HTML表单的`submit`方法,适用于...
EXT表单,是一种基于JavaScript和Ajax技术的富客户端(Rich Client)表单处理技术,它源自EXT JS库,专门用于构建交互性强、用户体验优秀的Web应用程序。EXT JS是一个强大的JavaScript库,提供了一系列组件化的UI...
当我们讨论EXT提交表单与ASP.NET的结合时,主要涉及的是EXTJS如何与ASP.NET后端进行数据交互。EXTJS 提供了表单组件(FormPanel)来创建和处理用户输入,而ASP.NET则处理这些数据并进行业务逻辑处理或数据持久化。 ...
EXT表单验证是EXT JS框架中的一个重要特性,用于在用户输入数据时确保数据的正确性和完整性。EXT JS是一个强大的JavaScript库,专为构建富客户端Web应用程序而设计。它提供了丰富的组件库,包括表格、表单、菜单等,...
EXT表单设计器是一款基于EXT库的强大工具,专用于快速、高效地构建Web应用程序中的表单。EXT是一个流行的JavaScript框架,由Sencha公司开发,用于构建富客户端应用。EXT表单设计器充分利用EXT库的功能,提供了可视化...
method: 'POST', // 提交方式,默认为POST success: function(form, action) { Ext.Msg.alert('成功', '表单提交成功!'); }, failure: function(form, action) { Ext.Msg.alert('失败', '表单提交失败: ' + ...
Ext Form提供了一种结构化的方式来组织这些字段,并提供了验证、提交和数据绑定等功能。 动态加载表单数据涉及到的主要知识点包括: 1. **JSON数据格式**:JSON(JavaScript Object Notation)是一种轻量级的数据...
在“ExtJs4.0 表单提交Demo”中,我们将深入探讨如何在ExtJs 4.0环境下,通过Ext Ajax模块实现表单的数据提交,同时实现显示层和控制层的分离,提升代码的可维护性和可扩展性。 1. **ExtJs 4.0 表单基础** ExtJs ...
EXT4.3实现动态表单全动态是一种在Web开发中常用的技术,主要应用于构建高度可配置和可扩展的用户界面。这种技术的核心是利用EXTJS库的EXT4.3版本,EXTJS是一个强大的JavaScript框架,专门用于创建富互联网应用程序...
除了上述两种异步提交方式外,EXT还支持同步提交方式。这种方式在现代Web开发中较少使用,因为它会导致用户界面阻塞直到请求完成。 1. **创建连接**: ```javascript var conn = Ext.lib.Ajax....
总结起来,EXTJS的登录验证表单提交涉及前端表单组件的创建、事件监听、数据提交,以及后端服务器的接收和验证。通过这种方式,我们可以实现一个完整的用户登录流程。理解这一过程对于进行Web应用开发至关重要,因为...
【EXT表单FormPanel】 EXT表单FormPanel是EXT JS框架中用于创建复杂表单的组件,它允许用户输入、编辑和验证数据。在上述代码中,`sampleFormPanel`是一个FormPanel实例,包含了多个配置属性,用于定制表单的行为和...
3. 添加表单提交按钮并定义处理函数,进行数据验证和提交。 4. 可选地,使用`images`资源来增强用户体验。 通过这种方式,我们可以创建一个功能完备且用户友好的注册界面,为用户提供方便的注册服务。
EXT是Sencha公司开发的一款基于JavaScript的富客户端应用框架,它提供了一套完整的组件化UI构建工具,其中EXT表单(FormPanel)是用于创建复杂数据输入和验证的重要部分。在EXT表单中,TextField是最常见的输入控件...
这段代码首先检查表单是否有效,然后比较两次输入的密码是否一致,并检查角色信息是否正确选择。最后,如果一切正常,则提交表单数据到服务器端指定的URL,并处理成功或失败的回调。 综上所述,这个实例展示了如何...
简单的Ext应用实例,包括表单,与后台交互,基本组件等的使用。对于Ext初学者来说挺实用的,适用于Ext 3.0版本
2. `name`:每个textField都需要一个唯一的name属性,以便在提交表单时标识数据。 3. `allowBlank`:设置是否允许字段为空,如果为false,则当字段为空时表单验证会失败。 4. `maxLength`:限制输入的最大字符数。 5...