- 浏览: 1010403 次
文章分类
最新评论
-
18335864773:
很多公司项目 都在使用pageoffice 来操作word,e ...
用java生成word文档 -
Gozs_cs_dn:
请问下博主, 怎样将sitemesh3.xsd绑定 sitem ...
SiteMesh3配置 -
Rose_06:
springside4.0quick-start.bat报错原因 -
ilemma:
我也是刚参见工作啊,经理让自学这个,有些东西不太懂,能不能发个 ...
Apache Shiro在Web中的应用 -
shanbangyou:
你废了
程序员上班打酱油的方法
今天研究FormPanel提交表单数据研究了半天.. 终于把表单提交成功了... 趁现在还记得问题,做一下总结:
1. 实用FormPanel如何提交表单:
在Ext中FormPanel并中并不保存表单数据,其中的数据是由BasicForm保存,在提交表单的时候需要获取当前FormPanel中的BasicForm来进行提交.
获取FormPanel中的BasicForm对象代码如下:
var pnlLogin = new Ext.FormPanel({ //省略 }); //获取BasicForm对象 pnlLogin.getForm();
在获取BasicForm对象后便可进行表单的提交操作... 此时需要查一下BasicForm 的API文档, 文档中说,需要调用submit();方法进行提交:
Shortcut to do a submit action.
Parameters:
* options : Object
The options to pass to the action (see doAction for details)
Returns:
* BasicForm
this
由API文档可以知道,submit方法实际上是调用了BasicForm的doAction()方法, 而doAction放法在API文档中的描述如下:
Performs a predefined action (Ext.form.Action.Submit or Ext.form.Action.Load) or a custom extension of Ext.form.Action to perform application-specific processing.
Parameters:
* actionName : String/Object
The name of the predefined action type, or instance of Ext.form.Action to perform.
* options : Object
(optional) The options to pass to the Ext.form.Action. All of the config options listed below are supported by both the submit and load actions unless otherwise noted (custom actions could also accept other config options):
o url : String
The url for the action (defaults to the form's url.)
o method : String
The form method to use (defaults to the form's method, or POST if not defined)
o params : String/Object
The params to pass (defaults to the form's baseParams, or none if not defined)
o headers : Object
Request headers to set for the action (defaults to the form's default headers)
o success : Function
The callback that will be invoked after a successful response. Note that this is HTTP success (the transaction was sent and received correctly), but the resulting response data can still contain data errors. The function is passed the following parameters:
+ form : Ext.form.BasicForm
The form that requested the action
+ action : Ext.form.Action
The Action class. The result property of this object may be examined to perform custom postprocessing.
o failure : Function
The callback that will be invoked after a failed transaction attempt. Note that this is HTTP failure, which means a non-successful HTTP code was returned from the server. The function is passed the following parameters:
+ form : Ext.form.BasicForm
The form that requested the action
+ action : Ext.form.Action
The Action class. If an Ajax error ocurred, the failure type will be in failureType. The result property of this object may be examined to perform custom postprocessing.
o scope : Object
The scope in which to call the callback functions (The this reference for the callback functions).
o clientValidation : Boolean
Submit Action only. Determines whether a Form's fields are validated in a final call to isValid prior to submission. Set to false to prevent this. If undefined, pre-submission field validation is performed.
Returns:
* BasicForm
this
这里actionName只能是 load 和 submit。 当然提交的时候使用submit...
看了这么多的API文档, 其实关于表单提交操作并没有结束, 从doAction方法的描述中可以看出.. 这里实际上是调用了Ext.form.Action这个类, 而submit操作是调用了该类的子类Ext.form.Action.Submit... 绕了一大圈,终于把Ext中FormPanel是如何提交表单的原理搞的差不多了.. 那么下来就可以上代码了:
- var winLogin = new Ext.Window({
- title:'登录',
- renderTo:Ext.getBody(),
- width:350,
- bodyStyle:'padding:15px;',
- id:'login-win',
- buttonAlign:'center',
- modal:true,
- items:[{
- xtype:'form',
- defaultType:'textfield',
- bodyStyle : 'padding:5px',
- baseCls : 'x-plaints',
- url:'ajaxLogin.do',
- method:'POST',
- defaults:{
- anchor:'95%',
- allowBlank:false
- },
- items:[{
- id:'loginName',
- name:'loginName',
- fieldLabel:'用户名',
- emptyText:'请输入用户名',
- blankText:'用户名不能为空'
- },{
- id:'password',
- name:'password',
- fieldLabel:'密码',
- blankText:'密码不能为空'
- }]
- }],
- buttons:[{
- text:'登录',
- handler:function(){
- //获取表单对象
- var loginForm = this.ownerCt.findByType('form')[0].getForm();
- alert(loginForm.getValues().loginName);
- loginForm.doAction('submit', {
- url:'ajaxLogin.do',
- method:'POST',
- waitMsg:'正在登陆...',
- timeout:10000,//10秒超时,
- <SPAN style="COLOR: #ff0000">params:loginForm.getValues(),//获取表单数据</SPAN>
- success:function(form, action){
- var isSuc = action.result.success;
- if(isSuc) {
- //提示用户登陆成功
- Ext.Msg.alert('消息', '登陆成功..');
- }
- },
- failure:function(form, action){
- alert('登陆失败');
- }
- });
- this.ownerCt.close();
- }
- }, {
- text:'重置',
- handler:function(){
- alert('reset');
- this.ownerCt.findByType('form')[0].getForm().reset();
- }
- }]
- });
- winLogin.show();
var winLogin = new Ext.Window({
title:'登录',
renderTo:Ext.getBody(),
width:350,
bodyStyle:'padding:15px;',
id:'login-win',
buttonAlign:'center',
modal:true,
items:[{
xtype:'form',
defaultType:'textfield',
bodyStyle : 'padding:5px',
baseCls : 'x-plaints',
url:'ajaxLogin.do',
method:'POST',
defaults:{
anchor:'95%',
allowBlank:false
},
items:[{
id:'loginName',
name:'loginName',
fieldLabel:'用户名',
emptyText:'请输入用户名',
blankText:'用户名不能为空'
},{
id:'password',
name:'password',
fieldLabel:'密码',
blankText:'密码不能为空'
}]
}],
buttons:[{
text:'登录',
handler:function(){
//获取表单对象
var loginForm = this.ownerCt.findByType('form')[0].getForm();
alert(loginForm.getValues().loginName);
loginForm.doAction('submit', {
url:'ajaxLogin.do',
method:'POST',
waitMsg:'正在登陆...',
timeout:10000,//10秒超时,
params:loginForm.getValues(),//获取表单数据
success:function(form, action){
var isSuc = action.result.success;
if(isSuc) {
//提示用户登陆成功
Ext.Msg.alert('消息', '登陆成功..');
}
},
failure:function(form, action){
alert('登陆失败');
}
});
this.ownerCt.close();
}
}, {
text:'重置',
handler:function(){
alert('reset');
this.ownerCt.findByType('form')[0].getForm().reset();
}
}]
});
winLogin.show();
注意红色的部分... 这里是得到BaiscForm中所有表单元素中的值,并且已String/Object键值对的形式保存。。 该方法在api文档中的描述如下:
Returns the fields in this form as an object with key/value pairs as they would be submitted using a standard form submit. If multiple fields exist with the same name they are returned as an array.
Parameters:
* asString : Boolean
(optional) false to return the values as an object (defaults to returning as a string)
Returns:
* String/Object
如此提交解决了提交表单时无法发送数据的问题....
到这里终于解决了 如何提交表单的问题...
2. 为什么没有执行submit中的success方法, failure方法是在什么时候会被执行..
这里还是需要 查Action类中的success属性的API文档描述...
The function to call when a valid success return packet is recieved. The function is passed the following parameters:
* form : Ext.form.BasicForm
The form that requested the action
* action : Ext.form.Action
The Action class. The result property of this object may be examined to perform custom postprocessing.
这里 success方法需要两个参数, 尤其是第二个参数的描述: 尤其result, 这里是可以点击的
点击后随即跳到了Action result属性的描述:
The decoded response object containing a boolean success property and other, action-specific properties.
有此描述可知,服务器返回的响应中需要包含一个 boolean 型的 success 字段, 该字段会保存在result中,Action会通过获取对该字段的描述 来判断是否执行 success 方法。。
那么服务器如何返回boolean型的success字段呢? 服务器段部分代码如下:
- try {
- //返回成功标识
- <SPAN style="COLOR: #ff0000">response.getWriter().println("{success:true}");</SPAN>
- response.getWriter().flush();
- } catch (IOException e) {
- e.printStackTrace();
- } finally {
- try {
- response.getWriter().close();
- } catch (IOException e) {
- e.printStackTrace();
- }
- }
其实form的东西个人觉得还是用ajax提交比较好.
例如:
- var PostVal = baseForm.getForm().getValues();
- //修改要提交内容的值就很方便了。加入有ID字段,修改它的值只需要这样:
- PostVal.ID = 2;
- Ext.Ajax.request({
- url:'',
- success:function(response, opts){
- var action = Ext.decode(response.responseText);
- },
- params : PostVal
- });
success: function(response, opts)里面的参数顺序
request( Object options ) : Number
Sends an HTTP request to a remote server. Important: Ajax server requests are asynchronous, and this call will retu...
Sends an HTTP request to a remote server.
Important: Ajax server requests are asynchronous, and this call will return before the response has been received. Process any returned data in a callback function.
后台返回格式为 {"success":true,"message":"ok"}
Ext.Ajax.request({
url: 'ajax_demo/sample.json',
success: function(response, opts) {
//Ext.decode 为解析json
var obj = Ext.decode(response.responseText);
Ext.Msg.alert('',obj.message);
},
failure: function(response, opts) {
console.log('server-side failure with status code ' + response.status);
}
});
注意
response为需要解析的json
success : Function (Optional)
The function to be called upon success of the request. The callback is passed the following parameters:
response : Object
The XMLHttpRequest object containing the response data.
options : Object
The parameter to the request call.
submit( Object options ) : BasicForm
Shortcut to do a submit action.
Shortcut to do a submit action.
Parameters:
options : Object
The options to pass to the action (see doAction for details).
Note: this is ignored when using the standardSubmit option.
The following code:
myFormPanel.getForm().submit({
clientValidation: true,
url: 'updateConsignment.php',
params: {
newStatus: 'delivered'
},
success: function(form, action) {
//一样的要注意success: function(form, action)参数问题。最简单的查看方法
var i = '';
for(var o in action) i += o + ' ';
alert(i);
Ext.Msg.alert('Success', action.result.message);
},
failure: function(form, action) {
Ext.Msg.alert('Failure', action.result.message);
}
});
would process the following server response for a successful submission:
{
"success":true, // note this is Boolean, not string
"msg":"Consignment updated"
}
and the following server response for a failed submission:
{
"success":false, // note this is Boolean, not string
"msg":"You do not have permission to perform this operation"
}
发表评论
-
extjs 总结
2010-08-14 00:00 1464问题:使用Grid时,如果出现列标题与复选框错位 使用定义样 ... -
Ext2.2+json+jsp获取后台数据的问题 --Ajax
2010-08-13 22:55 3075在学习Ext-2.2时,我们通常会先研究它自带的一些例子,今天 ... -
grid 表格奇偶行颜色
2010-08-07 23:48 936用stripeRows: true区分不明显 <scr ... -
grid加竖表格线
2010-08-07 21:12 911在页面中加入 /*显示竖线*/ .x-grid ... -
learning extjs 中文版 表单提交
2009-02-07 17:02 1569我们的表单还没有向服务器提交数据。所以我们需要添加提交按钮。 ... -
监听表单事件 learning extjs 中文
2009-02-07 17:01 3586监听表单事件 Ext让监听单击控件或按键等用户事件变得异常简 ... -
TextArea_HTMLEditor 编辑器 learning extjs 中文
2009-02-07 16:59 2855TextArea 和HTMLEditor 现在我们在表 ... -
下拉列表 learning extjs 中文
2009-02-07 16:57 1961服务器端返回json串。 String result=&qu ... -
js面向对象 learning extjs 中文
2009-02-07 16:55 1744这些年来,我们越来越重视基于浏览器到web应用。而大多数浏览器 ... -
learning ext js 电子书
2009-02-04 08:30 3999learning ext js 电子书 -
learning ext js 中文版 之 Ext的form功能是无穷的
2009-02-04 08:21 1926Ext的form功能是无穷的。按键监听,校验,错误提示和值约束 ... -
learning ext js 中文版 之 根据用户操作对话框来给出响应
2009-02-04 08:19 938现在我们可以根据用户操作对话框来给出响应。我们将加入switc ... -
learningExtjs 中文版 之 用得最多的就是Ext.get了
2009-02-04 08:15 1158Extjs之所以好用在于它可以很容易取到并操作DOM.用得最多 ...
相关推荐
除了本地验证,FormPanel 还支持远程验证,即通过Ajax请求将表单数据发送到服务器进行验证。这通常通过设置`standardSubmit`为`false`,并提供`url`和`method`(GET或POST)来实现。 在实际应用中,我们可能需要...
在使用Ext Ajax提交表单前,通常需要先将表单数据序列化为JSON或URL编码格式。ExtJs 4.0的FormPanel对象提供了`getForm()`方法获取表单实例,然后通过`form.submit()`或`form.serialize()`方法完成数据的序列化。 ...
它提供了丰富的组件模型、数据绑定机制以及丰富的API,使得开发者能够创建功能丰富的动态表单。在"动态添加表单"这个主题中,我们将深入探讨如何在ExtJS中实现表单的动态创建和管理。 首先,我们要理解表单(Form)...
当我们讨论EXT提交表单与ASP.NET的结合时,主要涉及的是EXTJS如何与ASP.NET后端进行数据交互。EXTJS 提供了表单组件(FormPanel)来创建和处理用户输入,而ASP.NET则处理这些数据并进行业务逻辑处理或数据持久化。 ...
在Ext JS这个强大的JavaScript框架中,动态加载表单数据是一种常见的功能需求,特别是在构建数据驱动的应用程序时。本文将深入探讨如何使用JSON格式的数据来实现这一功能,以便于灵活地更新和显示表单内容。 首先,...
它允许开发者构建包含多个输入字段、按钮以及其他交互元素的表单,并且提供了大量的功能来帮助处理表单数据,如验证、提交以及数据绑定等。 ### 二、加载JSON数据至FormPanel #### 2.1 基本原理 在Extjs4中,可以...
在现代Web应用开发中,异步提交表单是一种常见的技术手段,它能够提升用户体验,减少页面刷新带来的数据丢失风险,并能有效提高系统的响应速度。EXT框架(通常指的是Ext JS)作为一种成熟且功能丰富的JavaScript库,...
在ExtJS中,提交表单是一项常见的操作,用于将用户在表单中填写的数据发送到服务器进行处理。本文将详细讲解如何在ExtJS环境中实现表单的提交,并结合Java Web后端进行交互。 首先,我们需要了解ExtJS中的表单组件...
1. 自定义事件:创建新的事件类型,如`dataChange`,以便在表单数据更改时通知其他组件。 2. 数据感知:监听Store的数据变更事件,自动更新表单中的数据显示。 3. 自动绑定:通过在构造函数中设置`autoLoad`属性和`...
总结,`Ext.FormPanel`的`getForm().submit()`更适合处理基于表单的数据提交,它简化了表单数据的处理和验证,而`Ext.Ajax.request`则提供了更高的灵活性,适用于各种HTTP请求,特别是当需要发送非表单数据或处理...
在`FormPanel`底部,通过`buttonAlign`属性设为`center`,将“提交”和“重置”按钮居中对齐,增强了界面的美观性和操作便捷性。 ### 六、结论 通过以上分析,我们可以看到在ExtJs中,通过巧妙地结合使用`...
正如描述中提到的,FormPanel本身并不直接保存表单数据,而是由内部的BasicForm对象来管理。BasicForm提供了提交表单的机制,包括验证和处理提交结果。因此,我们可以获取FormPanel的BasicForm对象,并在需要的时候...
在ExtJS中,FormPanel提供了丰富的功能,如数据验证、表单提交以及与服务器端的数据交互。 1. **FormPanel基本结构**:FormPanel由多个字段(Field)组成,如文本框、复选框、下拉列表等。每个字段都有其特定的配置...
EXT表单还支持异步提交,即通过Ajax技术将表单数据无刷新地发送到服务器。这通常涉及使用Action对象和FormPanel的submit方法。开发者可以自定义提交过程,处理服务器返回的结果,比如显示错误消息或处理成功后的后续...
在用户填写完表单后,我们可以使用`FormPanel`的`submit`方法,它会使用Ajax方式将表单数据提交到服务器。 关于Google Maps集成,Sencha Touch虽然没有内置的Google Maps组件,但我们可以借助HTML5的`<iframe>`或者...
通过上述分析可以看出,ExtJS中的`FormPanel`及其相关方法提供了非常灵活且强大的功能,能够满足各种复杂的表单数据加载与提交需求。在实际开发过程中,合理配置这些选项是非常重要的,它们能够确保应用程序与后端...
EXT JS的异步提交机制使得开发者能够灵活地处理与服务器的数据交互,无论是简单的参数提交还是复杂的表单数据,都能轻松应对。在实际开发中,选择哪种方式取决于具体的需求和项目结构。例如,如果已经有HTML表单,第...
2. **关联FormPanel**:确保新字段与FormPanel正确关联,以便在提交表单时能进行验证。这可以通过`formPanel.getForm().add()`方法实现,它会自动将字段加入到表单的验证链中。 3. **更新验证状态**:如果在表单...
在上述代码的`load`和`submit`方法中,表单数据的加载和提交通过URL与服务器进行交互,`waitMsg`提供了加载提示,`success`和`failure`回调处理操作结果。 总结来说,EXT表单FormPanel和表格GridPanel是EXT JS中...