PDA

View Full Version : Ext.ux.OOSubmitAction - Submit forms the right way



Shyru
5 Mar 2008, 5:47 AM
Hi all!
Did you ever run into one of these problems with ext forms?


Checkboxes which are not checked are not submitted at all (as normal html-forms also do)
Comboboxes get their displayed value submitted, and not the value behind the combobox
DateFields get their displayed date submitted, which may be different based on the users locale
All formitems which return something different in their getValue() method from what is written inside the input tags value attribute are not be submitted correctly.


I have a nice solution for you: OOSubmit is a simple but effective way to submit ext forms in a better way by using the formitems getValue() method instead of the input-tags value.
I have explained it in detail here:
OOSubmit - How to submit ext forms the right way (http://www.diloc.de/blog/2008/03/05/how-to-submit-ext-forms-the-right-way/)

I hope this helps one or another. Feedback is appreciated!

mystix
5 Mar 2008, 6:36 AM
there's a bug in the code for the Ext.ux.OOSubmitAction.run method


//check if the form item provides a specialized getSubmitValue() and use that if available
if (typeof file.getSubmitValue == "function") formValues[field.getName()] = field.getSubmitValue();


should be


//check if the form item provides a specialized getSubmitValue() and use that if available
if (typeof field.getSubmitValue == "function") formValues[field.getName()] = field.getSubmitValue();

Animal
5 Mar 2008, 9:36 AM
I agree with the OP's point though. Dropping back to raw HTML controls seems out of place. Collecting the getValue values directly from the Javascript widgets themselves is the best way.

I can see things like DataViews and Grids and Trees implementing the Ext.form.Field interface because they can be dragged from and dropped onto, so collection using getValues on each input item will access serialized data from a complex widget.

Animal
5 Mar 2008, 9:40 AM
Of course disabled widgets should not submit, so either the code will have to test the underlying HTML control, or, better, the Ext.form.Field interface should include an isDisabled method.

tof
6 Mar 2008, 3:49 AM
I agree with the OP's point though. Dropping back to raw HTML controls seems out of place. Collecting the getValue values directly from the Javascript widgets themselves is the best way.

<useless comment>
Fully agreed.
</useless comment>

Shyru
12 Mar 2008, 4:23 AM
I have now updated the code of OOSubmit (http://www.diloc.de/blog/2008/03/05/how-to-submit-ext-forms-the-right-way/), it includes a bunch of fixes and also only submits fields which are not disabled.

Thanks for the feedback!

surfyogi
21 Apr 2008, 10:34 AM
Any idea why OOSubmit does not honor the standardSubmit:true flag being set on FormPanel?

Anybody know how I might fix this?

I've gone into the ext-all-debug.js and looked at the run and submit methods; everything I've tried so far does not seem to make a difference.

Works great otherwise.... really appreciate the contrib, but I need the form to submit normally.

thanks,
jeff-

surfyogi
21 Apr 2008, 12:49 PM
I see in the run method override, that the modified params are being submitted directly to Ext.AJAX.submit, so is there an alternate way to submit params to the native submit action?

I'm guessing no, not directly; here's the code I tried to modify:




* This is nearly a copy of the original submit action run method
*/
run : function(){

var o = this.options;
var method = this.getMethod();
var isPost = method == 'POST';

var params = this.options.params || {};
if (isPost) Ext.applyIf(params, this.form.baseParams);

//now add the form parameters
this.form.items.each(function(field)
{
if (!field.disabled)
{
//check if the form item provides a specialized getSubmitValue() and use that if available
if (typeof field.getSubmitValue == "function")
params[field.getName()] = field.getSubmitValue();
else
params[field.getName()] = field.getValue();
}
});

//convert params to get style if we are not post
if (!isPost) params=Ext.urlEncode(params);

if(o.clientValidation === false || this.form.isValid()){

if(this.form.standardSubmit){ // <-- Standard Submit conditional

this.form.el.dom.submit();
}
else {
Ext.Ajax.request(Ext.apply(this.createCallback(o), {
url:this.getUrl(!isPost),
method: method,
params:params, //add our values
isUpload: this.form.fileUpload
}));
}



anybody know how to get modified params into a normal submit?

surfyogi
21 Apr 2008, 2:29 PM
hiddenName works too, for combo values and STANDARD submit, instead of using OOSubmit:

items: [{
xtype:’selectbox’,
id:’rt_air_class’,
valueField:’value’,
displayField:’display’,
hiddenName: ‘rt_air_class’, <<< HERE

JorisA
21 Apr 2008, 3:05 PM
I dont understand why ext doesn't do this by default.
thnx!

Animal
22 Apr 2008, 2:07 AM
Me neither. Then all this hiddenField stuff could just disappear.

brian.moeskau
22 Apr 2008, 3:26 AM
FYI, I am watching this thread with interest. We've already started down a similar path in some newer code that's not yet in SVN, along with some other related form enhancements.

JorisA
23 Apr 2008, 12:50 AM
Hm there might be some difficulties with fields that have more then one value.
But on the other most of the hidden fields won't be necessary anymore.

Animal
23 Apr 2008, 2:54 AM
Exciting news Brian! I can't wait to see what you guys are cooking up!

On the con side, a pure Ajax submit that does not come directly from real, submittable <form> fields will not please some purists who insist upon the ability to function without javascript.

But my attitude is that I am writing an application. And the platform I specify that application to run on is an Firefox not restricted in terms of scripting.

JorisA
29 May 2008, 4:24 AM
Any updates on this subject? Would be super cool to have this in by default. I'm using it for radio groups (join checked values with a separator) and editorgrids as well, and it works perfectly.

Edit:
Oh and it also will not submit the emptyText value ;)

NoahK17
29 May 2008, 7:15 AM
I agree with the statements posted above mine. ExtJS using this submit methodology would be ideal. I've always had issues with standard checkbox html form submit behavior.

JorisA
20 Jun 2008, 5:15 AM
Hm one addition, wouldn't it make sense to do this as well?


Ext.override(Ext.form.Field, {
/**
* Returns the name attribute of the field if available
* @return {String} name The field name
*/
getName: function(){
// return this.rendered && this.el.dom.name ? this.el.dom.name : (this.hiddenName || '');
return this.name;
}
});


Ext.override(Ext.FormPanel, {
initFields : function(){
var f = this.form;
var formPanel = this;
var fn = function(c){
if(c.isFormField && c.name){
f.add(c);
}else if(c.doLayout && c != formPanel){
Ext.applyIf(c, {
labelAlign: c.ownerCt.labelAlign,
labelWidth: c.ownerCt.labelWidth,
itemCls: c.ownerCt.itemCls
});
if(c.items){
c.items.each(fn);
}
}
}
this.items.each(fn);
},

onAdd : function(ct, c) {
if (c.isFormField && c.name) {
this.form.add(c);
}
}
});