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

Posted 2023-02-26

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

【英文标题】：How to group column header for a grid nested inside a form for ExtJs

【发布时间】：2012-09-28 00:48:29

【问题描述】：

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

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”。

谢谢

【参考方案1】：

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

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

【讨论】：

再次感谢@sra，我们总是怀念生活中那些简单的事情。哈哈