如何为嵌套在 ExtJs 表单内的网格分组列标题

Question

我有一个嵌套在表单面板中的网格面板。网格包含分组标题，但分组标题的子列未正确加载。知道我做错了什么吗？

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;

我注意到第一级列的值显示正确，但分组的标题列没有显示任何值。它也不显示分组标题，仅显示第一级标题“Column2”和“Column3”。

谢谢

Answer 1

你犯了一个小小的错误；您为Columns 使用了驼峰式书写，所以它被忽略了。写

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