Submitting a form + grid in ExtJS 4

Question

I have an Ext.form.Panel containing a grid and some text fields for editing each row in the grid. It is very similar to this: http://dev.sencha.com/deploy/ext-4.0.2a/examples/writer/writer.html , only that there is no AJAX involved; my data store is local.

How can I submit the grid's rows via a standard POST?

If I simply do myForm.submit(), there are two issues:

1. The fields for editing the grid's rows are being validated. They should be ignored when submitting the form.

2. No data from the grid is being submitted.

The only solution I see is to somehow prevent the fields from being validated and create some hidden fields containing the data from each row. Is there any better option?

Thank you in advance!

Answer 1

Here's the solution I used:

1. For ignoring certain fields from the form upon submitting, I've overwritted the getFields() method of the form. Nasty, I know. In the code below, the fields with an 'ignoreInMainForm' property will be ignored.

   Ext.getCmp('myForm').getForm().getFields = function() {
       var fields = this._fields;
       if (!fields) {
           var s = [],
           t = this.owner.query('[isFormField]');
           for (var i in t) {
               if (t[i]['ignoreInMainForm'] !== true) {
                   s.push(t[i]);
               }
           }
           fields = this._fields = Ext.create('Ext.util.MixedCollection');
           fields.addAll(s);
       }
       return fields;
   }
   

2. For submitting the grid's data, I encode all the rows in a single JSON object that I add in the form's baseParams.

   var myItems = myStore.getRange();
   var myJson = [];
   for (var i in myItems) {
       myJson.push({
           'a': myItems[i].get('a'),
           'b': myItems[i].get('b'),
           ...
       });
   }
   Ext.getCmp('formHiddenId').setValue(Ext.encode(myJson ));