如何将嵌套在表格中的网格的列标题分组为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

你做了一个小小的mistyping;你使用骆驼写作为Columns，所以它被忽略。写

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