How to group column header for a grid nested inside a form for ExtJs

Question

I have a grid panel nested inside a form panel. The grid contain grouped header, but the sub column of the grouped header are not loading properly. Any idea what I'm doing wrong?

form = Ext.create('Ext.form.Panel', {
    id: 'form-' + index,
    layout: 'column',
    height: 300,
    width: 500,

    items: [{
        xtype: 'container',
        anchor: '100%',
        columnWidth: 0.5,
        items: [{
            xtype: 'textfield',
            fieldLabel: 'Field1',
            name: 'Field1Value',
            anchor: '96%',
            readOnly: true
        }, {
            xtype: 'textfield',
            fieldLabel: 'Field2',
            name: 'Field2Value',
            anchor: '96%',
            readOnly: true
        }]
    }, {
        xtype: 'gridpanel',
        title: 'Grid',
        columnWidth: 0.5,
        store: store,
        columnLines: true,
        columns: [{
            xtype: 'gridcolumn',
            text: 'Column1',
            dataIndex: 'Column1Value'
        }, {
            //xtype: 'gridcolumn',
            text: 'Column2',
            Columns: [{
                xtype: 'gridcolumn',
                text: 'Column2A',
                dataIndex: 'Column2AValue'
            }, {
                xtype: 'gridcolumn',
                text: 'Column2B',
                dataIndex: 'Column2BValue'
            }, {
                xtype: 'gridcolumn',
                text: 'Column2C',
                dataIndex: 'Column2CValue'
            }]
        }, {
            //xtype: 'gridcolumn',
            text: 'Column3',
            Columns: [{
                xtype: 'gridcolumn',
                text: 'Column3A',
                dataIndex: 'Column3AValue'
            }, {
                xtype: 'gridcolumn',
                text: 'Column3B',
                dataIndex: 'Column3BValue'
            }, {
                xtype: 'gridcolumn',
                text: 'Column3C',
                dataIndex: 'Column3CValue'
            }]
        }, {
            xtype: 'gridcolumn',
            text: 'Column4',
            dataIndex: 'Column4Value'
        }, {
            xtype: 'gridcolumn',
            text: 'Column5',
            dataIndex: 'Column5Value'
        }, {
            xtype: 'gridcolumn',
            text: 'Column6',
            dataIndex: 'Column6Value'
        }]
    }]
});
var formpanel = Ext.getCmp('form-' + index);
formpanel.loadRecord(record);
return form;

I notice that the value of the first level columns are displaying correctly, but the grouped header columns doesn't show any value. It doesn't show a grouped header either, just the first level header 'Column2' and 'Column3'.

Thanks

Answer 1

You have made a tiny mistyping; you used camel case writing for Columns, so it get ignored. Write

text: 'Column3',
columns: [{  // <- this way it will work