You found a bug! We've classified it as
TOUCH-1204
.
We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
-
Sencha User
Alter form data using the beforesubmit event
According to the documentation of the event beforesubmit in Ext.form.Panel , I should be able to modify the values submitted, but I can't figure out how.
Implementations may adjust submitted form values or options prior to execution.
I've tried modifying the variable values, but this has no effect.
Any help is highly appreciated.
Note: I'm basically trying to send a JSON string, so I need to encode the values using JSON.stringify.
-
Sencha User
This looks like a bug. Thanks for the report.
-
Sencha User
This is working for me, using the following block of code:
Code:
var form = Ext.Viewport.add({
xtype: 'formpanel',
items: [
{
xtype: 'textfield',
label: 'one',
name: 'name',
value: 'go'
},
{
docked: 'bottom',
xtype: 'toolbar',
items: [
{
xtype: 'button',
text: 'submit',
handler: function() {
form.submit({
method: 'POST',
url: 'test'
});
}
}
]
}
],
listeners: {
beforesubmit: function(form, values, options) {
values.test = "hello";
}
}
});
This will post: 'name=go&test=hello'
-
Sencha User
This does not seem to work in ST 2.3.1!
-
Sencha User
Any updates about this?
I'm trying to add/change/format the values of the submit just like rdougan said, but is not working.
Please help!
-
Sencha User
I'm running into the same issue. The server expects a timestamp, but the form is sending something like:
Tue Jan 01 1980 00:00:00 GMT+0100 (CET)
I'm trying:
PHP Code:
onBeforeSubmit: function (form, values, opts, evt, eOpts) {
var timestamp = Ext.Date.format(values.dateOfBirth, 'U');
values.dateOfBirth = window.parseInt(timestamp, 10);
}
to no avail. Using ST 2.3.1
Is there a workaround/override?
Last edited by bruijn88; 9 May 2014 at 11:33 PM.
Reason: ST version
-
Sencha User
I did some more digging and found the following.
Ext.form.Panel#submit does:
PHP Code:
...
return me.fireAction('beforesubmit', [me, formValues, options, e], 'doBeforeSubmit');
...
If you look at Ext.mixin.Observable#fireAction, it says:
Fires the specified event with the passed parameters and execute a function (action) at the end if there are no listeners that return
false.
But if i step through the code using dev-tools, Ext.form.Panel#doBeforeSubmit (where the actual request is being done) is executed before my own event handler. This makes it quote obvious that the values cannot be altered before the request as documented by the Ext.form.Panel#beforesubmit event.
-
Sencha User
Did some more digging and found a workaround.
As stated above, Ext.form.Panel#doBeforeSubmit is executed before any listeners attached to the Ext.form.Panel#beforesubmit event. This is because the Ext.mixin.Observable#fireAction takes 2 more (undocumented) parameters, 'options' and 'order'. The last one indicates if the so called action, (Ext.form.Panel#doBeforeSubmit in this case) is executed before or after the registered listeners. The default seems to be before. To get around this i've overridden Ext.form.Panel#submit as follows:
PHP Code:
Ext.define('My.form.Panel', {
override: 'Ext.form.Panel',
submit: function(options, e) {
var me = this,
formValues = me.getValues(me.getStandardSubmit() || !options.submitDisabled),
form = me.element.dom || {};
if(this.getEnableSubmissionForm()) {
form = this.createSubmissionForm(form, formValues);
}
options = Ext.apply({
url : me.getUrl() || form.action,
submit: false,
form: form,
method : me.getMethod() || form.method || 'post',
autoAbort : false,
params : null,
waitMsg : null,
headers : null,
success : null,
failure : null
}, options || {});
// make sure 'doBeforeSubmit' is executed after any registered listeners
return me.fireAction('beforesubmit', [me, formValues, options, e], 'doBeforeSubmit', me, {}, 'after');
}
});
This fixes the order of execution problem, but we're not out of the woods yet.
The 'values' parameter passed to the Ext.form.Panel#beforesubmit listener essentially gets tossed in Ext.form.Panel#doBeforeSubmit, so changing that in the listener is of no use. I figured i could instead set the value on the 'options.params' property, but unfortunately when the final querystring for the request is being assembled in Ext.data.Connection#setupParams, the serialized form (which still contains the old, non overridden value) is put after the params you just set, resulting in something like:
valueToOverride=newValue&foo=bar&baz=qux&valueToOverride=oldValue
and since the last one takes precedence, the old value is still the one you receive on the server end.
To work around this problem you can just set the value of the form in the event listener like so:
PHP Code:
onBeforeSubmit: function (form, values, options, e, eOpts) {
// this has no effect
values.valueToOverride = 'newValue';
// neither has this
options.params = {
valueToOverride: 'newValue'
};
// this does the trick
Ext.fly(options.form).down('input[name=valueToOverride]', true).value = 'newValue';
}
Hope this helps anyone.