PDA

View Full Version : I want to submit only dirty field values.



ss.sureez
12 Jan 2012, 1:54 AM
Hi,
I am using Extjs 4.0.2a. While updating i want to submit only dirty field values to server. I am not able to find a property to submit only dirty fields.
Only in getvalues() we have a option to get dirty values.

As per my knowledge we can use getvalues() method to getvalue of the form and do ajax request to sent data. Can i able to do form submit to send only dirty values

Please help me how to do it.

thanks,
suresh kumar
:s

ero
12 Jan 2012, 8:44 AM
Have you tried using getFieldValues() instead?

mitchellsimoens
12 Jan 2012, 9:47 AM
Or just pass true as the 2nd argument of getValues

ss.sureez
12 Jan 2012, 11:07 AM
I know about getValues can return dirty field values.

I doing form submit, How can i send dirty values alone. Do i need to get the values and sent data with params property.

One more question. How Extjs sending form values sent to server, Is that using getvalues at the background, if that is true can we able to pass dirty as true for getvalues() method?

thanks,
suresh kumar

mitchellsimoens
12 Jan 2012, 11:27 AM
You can create your own submit action or override the default one:


getParams: function() {
var nope = false,
configParams = this.callParent(),
fieldParams = this.form.getValues(nope, nope, this.submitEmptyText !== nope);
return Ext.apply({}, fieldParams, configParams);
},

You can see that it uses getValues and you could override this method very easily

ss.sureez
13 Jan 2012, 8:11 AM
Thanks mitchellsimoens (http://www.sencha.com/forum/member.php?22216-mitchellsimoens).
:)

Diavololt
10 Oct 2012, 1:44 AM
It must be config on Ext.form.Action.Submit, like 'submitOnlyDirty' defaults to false
and like 'resetDirty' defaults to false, after submit to reset dirty fields.

Troy Wolf
13 Jun 2014, 9:14 AM
You can create your own submit action or override the default one:


getParams: function() {
var nope = false,
configParams = this.callParent(),
fieldParams = this.form.getValues(nope, nope, this.submitEmptyText !== nope);
return Ext.apply({}, fieldParams, configParams);
},

You can see that it uses getValues and you could override this method very easily

Always good stuff from mitchelsimoens! This is exactly what I want to do. This is an old thread, and I'm now using 4.2.2. The 4.2.2 source code for this function really has not changed:


getParams: function(useModelValues) {
var falseVal = false,
configParams = this.callParent(),
fieldParams = this.form.getValues(falseVal, falseVal, this.submitEmptyText !== falseVal, useModelValues, true);
return Ext.apply({}, fieldParams, configParams);
}


So I overrode this to tell getValues to only return dirty fields by passing in TRUE for the second arg. Here is my submit code trimmed down for this example:



handler: function(btn, evt) {
var f = btn.up('form').getForm();
f.submit({
url: '/some-path-on-my-server/save/',
getParams: function(useModelValues) {
var falseVal = false,
configParams = this.callParent(),
fieldParams = this.form.getValues(falseVal, true, this.submitEmptyText !== falseVal, useModelValues, true);
return Ext.apply({}, fieldParams, configParams);
}
});
}


When I submit, I'm getting:

Uncaught TypeError: Cannot read property 'apply' of undefined

When I debug, I find that it is the call to this.callParent(). The variable 'superMethod' ends up being undefined. This happens about line 4444 in 4.2.2 ext-all-debug.js:


callParent: function(args) {
var method,
superMethod = (method = this.callParent.caller) && (method.$previous ||
((method = method.$owner ? method : method.caller) &&
method.$owner.superclass[method.$name]));
return superMethod.apply(this, args || noArgs);
},


When this runs, the 'this' in the context is my submit action object. I assume this is what would be expected at this point.


this: constructor
+ form: constructor
+ getParams: function (useModelValues) {
url: "/some-path-on-my-server/save/"
+ __proto__: Object


I can bypass built-in "submit" and just do my own getValues() call and AJAX submission but I'd really love to just override this and take advantage of the simplicity of calling submit(). What am I doing wrong?

Troy Wolf
13 Jun 2014, 10:43 AM
A coworker who is smarter than me explained that the issue is that when I created my own getParams() method, I lost the hierarchy chain that the existing method had attached to it. That is why callParent() worked on the "old" getParams() but failed on mine.

As of right now, I'm not smart enough to fix this, but I have 87.3% confidence I'll get there. Something I tried that worked was "simply" overriding the form's getValues() by adding this bit to my form panel config:



afterrender: function() {
var form = this.getForm();
Ext.override(form, {
getValues: function() {
return this.callParent([false, true]);
}
});
}


This worked great! ....except I have to assume that lots of other functionality relies on getValues() ability to return ALL the fields--not just the dirty fields. (validation, etc.) So I don't think this is a wise solution. ~o)

Troy Wolf
13 Jun 2014, 12:32 PM
So here is my solution (so far). It is almost identical to the original idea from mitchellsimoens except I removed a tiny bit--notice there is no call to this.callParent():



handler: function(btn, evt) {
var f = btn.up('form').getForm();
f.submit({
url: '/some-path-on-my-server/save/,
getParams: function(useModelValues) {
var falseVal = false;
var fieldParams = this.form.getValues(falseVal, true, this.submitEmptyText !== falseVal, useModelValues, true);
return Ext.apply({}, fieldParams);
}
});
}


All that call was doing--best I could tell--was mixing in the "hard-set" params for your form, which I'm not using any for this implementation. If I was, seems I could just directly access those params without that this.callParent() call.

As to exactly why callParent() failed in my override, I barely understand it so I won't try to explain it. I offer a cup of coffee to whoever can dumb it down enough for me to understand.

Bonus points if you can explain to me the purpose of falseVal instead of just using false in the code below:


var falseVal = false,
configParams = this.callParent(),
fieldParams = this.form.getValues(falseVal, falseVal, this.submitEmptyText !== falseVal, useModelValues, true);

~o)