How to POST a grid within a form in ExtJS

Question

I have a form that has comboboxes, tagfields, date pickers, etc., and a grid. Each of these elements has a different store. The user is going to make selections from the comboboxes, etc,. and enter values into the grid. Then the values from the grid and other form elements are all sent on a POST to the server. I know how to POST the data from the comboboxes, tagfields, and date pickers. However, I don't know how to send the data in the grid with the form. Here is the form view:

Ext.define('ExtTestApp.view.main.List', {
extend: 'Ext.form.Panel',
xtype: 'cell-editing',
frame: true,
autoScroll: true,
title: 'Record Event',
bodyPadding: 5,
requires: [
    'Ext.selection.CellModel',
    'ExtTestApp.store.Personnel'
],
layout: 'column',

initComponent: function(){

    this.cellEditing = new Ext.grid.plugin.CellEditing({
        clicksToEdit: 1
    });

    Ext.apply(this, {
        //width: 550,
        fieldDefaults: {
            labelAlign: 'left',
            labelWidth: 90,
            anchor: '100%',
            msgTarget: 'side'
        },

        items: [{
            xtype: 'fieldset',
            //width: 400,
            title: 'Event Information',
            //height: 460,
            //defaultType: 'textfield',
            layout: 'anchor',
            defaults: {
                anchor: '100%'
            },
            items: [{
                xtype: 'fieldcontainer',
                fieldLabel: 'Event',
                layout: 'hbox',
                defaults: {
                    hideLabel: 'true'
                },
                items: [{
                    xtype: 'combobox',
                    name: 'eventTypeId',
                    width: 300,
                    //flex: 1,
                    store: {
                        type: 'events'
                    },
                    valueField: 'eventTypeId',
                    // Template for the dropdown menu.
                    // Note the use of the "x-list-plain" and "x-boundlist-item" class,
                    // this is required to make the items selectable.
                    allowBlank: false
                }
               ]
            },
            {
                xtype: 'container',
                layout: 'hbox',
                margin: '0 0 5 0',
                items: [
                    {
                        xtype: 'datefield',
                        fieldLabel: 'Date',
                        format: 'Y-m-d',
                        name: 'startDate',
                        //msgTarget: 'under', //location of error message, default is tooltip
                        invalidText: '"{0}" is not a valid date. "{1}" would be a valid date.',
                        //flex: 1,
                        emptyText: 'Start',
                        allowBlank: false
                    },
                    {
                        xtype: 'datefield',
                        format: 'Y-m-d',
                        name: 'endDate',
                        //msgTarget: 'under', //location of error message
                        invalidText: '"{0}" is not a valid date. "{1}" would be a valid date.',
                        //flex: 1,
                        margin: '0 0 0 6',
                        emptyText: 'End',
                        allowBlank: false
                    }
                ]
            }]
        },
        {
            xtype: 'fieldset',
            //height: 460,
            title: 'Platform Information',
            //defaultType: 'textfield',
            layout: 'anchor',
            defaults: {
                anchor: '100%'
            },
            items: [
                {
                    xtype: 'fieldcontainer',
                    layout: 'hbox',
                    fieldLabel: 'Platform',
                    //combineErrors: true,
                    defaults: {
                        hideLabel: 'true'
                    },
                    items: [
                        {
                            xtype: 'combobox',
                            name: 'platformId',
                            store: {
                                type: 'platforms'
                            },
                            valueField: 'platformId',
                            allowBlank: false
                        }
                    ]
                }
            ]
        },  
        {
            xtype: 'fieldcontainer',
                layout: 'hbox',
                fieldLabel: 'Software Type(s)',
                //combineErrors: true,
                defaults: {
                    hideLabel: 'true'
                },
                items: [
                    {
                        xtype: 'tagfield',
                        width: 400,
                        //height: 50,
                        fieldLabel: 'Software Type(s)',
                        name: 'softwareTypeIds',
                        store: {
                            type: 'softwareTypes'
                        },
                        labelTpl: '{softwareName} - {manufacturer}',
                        valueField: 'softwareTypeId',
                        allowBlank: false
                    }
                ]
        },
        {
            xtype: 'gridpanel',
            layout: 'anchor',
            defaults: {
                anchor: '100%'
            },
            width: 1300,
            //columnWidth: 0.78,
            //title: 'Metrics',
            plugins: [this.cellEditing],

            title: 'Personnel',

            store: {
                type: 'personnel'
            },

            columns: [
                { text: 'Name',  dataIndex: 'name', editor: 'textfield' },
                { text: 'Email', dataIndex: 'email', flex: 1 },
                { text: 'Phone', dataIndex: 'phone', flex: 1 }
            ]
        }

        ],
        buttons: [

            {
                text: 'Save Event',
                handler: function() {
                    var form = this.up('form'); // get the form panel

                    // if (form.isValid()) { // make sure the form contains valid data before submitting
                        Ext.Ajax.request({
                            url: 'api/events/create',
                            method:'POST',
                            headers: { 'Content-Type': 'application/json' },
                            params : Ext.JSON.encode(form.getValues()),
                            success: function(form, action) {
                                Ext.Msg.alert('Success', action.result);
                            },
                            failure: function(form, action) {
                                //console.log(form.getForm().getValues());
                                Ext.Msg.alert('Submission failed', 'Please make sure you selected an item for each required field.', action.result);
                            }
                        });
                    // } else { // display error alert if the data is invalid
                    //     Ext.Msg.alert('Submit Failed', 'Please make sure you have made selections for each required field.')
                    // }
                }
            }
        ]
    });
    this.callParent();
}
});

var grid = Ext.ComponentQuery.query('grid')[0];

Here is the store for the grid:

Ext.define('ExtTestApp.store.Personnel', {
extend: 'Ext.data.Store',

alias: 'store.personnel',

fields: [
    'name', 'email', 'phone'
],

data: { items: [
    { name: 'Jean Luc', email: "jeanluc.picard@enterprise.com", phone: "555-111-1111" },
    { name: 'Worf',     email: "worf.moghsson@enterprise.com",  phone: "555-222-2222" },
    { name: 'Deanna',   email: "deanna.troi@enterprise.com",    phone: "555-333-3333" },
    { name: 'Data',     email: "mr.data@enterprise.com",        phone: "555-444-4444" }
]},

autoLoad: true,

proxy: {
    type: 'memory',
    api: {
        update: 'api/update'
    },
    reader: {
        type: 'json',
        rootProperty: 'items'
    },
    writer: {
        type: 'json',
        writeAllFields: true,
        rootProperty: 'items'
    }
}
});

Answer 1

Ideally, you would need to create a custom "grid field" so that the grid data is picked up on form submit like any other field.

You can also use this workaround: in the "Save Event" button handler, dig out the grid store and fish data out of it:

    var gridData = [];
    form.down('gridpanel').store.each(function(r) {
        gridData.push(r.getData());
    });

Then get the rest of the form data and put the grid data into it:

    var formData = form.getValues();
    formData.gridData = gridData;

Finally, include it all in your AJAX call:

params: Ext.JSON.encode(formData)