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 ));
   

Answer 2

That partially worked for me - in ExtJS 4.0.2a, I couldn't add to the baseParams, so instead I triggered the send handler to instead do:

function prepareToSendForm(a, b) {
var myItems = Ext.getCmp('grid-links').store.getRange();
var myJson = [];
for (var i in myItems) {
    myJson.push({
        'title': myItems[i].get('title'),
        'url': myItems[i].get('url'),
        'refreshes': myItems[i].get('refreshes')
    });
}

//Update the hidden field to be the JSON of the Grid
for (var i=0, len=Ext.getCmp('roomCreateForm').getForm()._fields.items.length; i<len; i++) {
    var item = Ext.getCmp('roomCreateForm').getForm()._fields.items[i];
    if (item.name=='roomLinks') {
        Ext.getCmp('roomCreateForm').getForm()._fields.items[i].inputEl.dom.value=Ext.encode(myJson);
        break;
    }
}

Ext.getCmp('roomCreateForm').submit();
}

Which worked lie a charm (but isn't very plug-and-play). I had to create a hidden field (named roomLinks above) in the form, and the second for loop above finds that and replaces the value with the JSONed results.