Submitting a form + grid in ExtJS 4

5
votes

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!

2
javascriptweb-applicationsextjsextjs4
it's not clear exactly what you mean... maybe put a sample of your form that you are trying to submit. And the grid is ignored because the submit only processes form fields that have a name assigned - nscrob
I've made some edits. I hope it's a bit clearer now. I've also added the solution I used. - liviucmg

2 Answers

8
votes

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

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.