ExtReact基础表格数据不显示：表头渲染、数据加载正常无报错

问题原因及修复方案 #

• 1. 多余的grouped属性导致数据不渲染
     你在ExtGrid标签上添加了grouped属性，但对应的Store没有配置groupField指定分组字段，这会导致表格的分组逻辑无法正确处理数据，最终数据行不显示。
     修复方案二选一：
  • 直接删除ExtGrid上的grouped属性即可
  • 若确实需要分组功能，给Store添加groupField配置，比如按公司名称分组：groupField: 'name'
• 2. 未显式指定表格高度
     ExtReact现代版的Grid组件需要明确的高度才能正常渲染数据行，你当前没有给ExtGrid设置高度属性，可能出现高度塌陷导致数据行被隐藏。
     修复方案：给ExtGrid添加高度配置，比如设置固定高度：height={600}，如果外层容器是弹性布局可以设置flex={1}自适应高度。

修改后的核心代码示例 #

// Store配置如果保留分组的话加groupField
store = Ext.create('Ext.data.Store', {
    autoLoad: true,
    pageSize: 0,
    groupField: 'name', // 要分组就加这行，不需要就直接删grid的grouped属性
    fields: [
        { name: 'name' },
        { name: 'price', type: 'float'},
        { name: 'priceChange', type: 'float' },
        { name: 'priceChangePct', type: 'float' }
    ],
    data: [
        {"name": "Roodel","price": 59.47,"priceChange": 1.23,"priceChangePct": 2.11},
        {"name": "Voomm","price": 41.31,"priceChange": 2.64,"priceChangePct": 6.83}
    ]
});

// Grid部分修改
<ExtGrid 
    title={t("invoices_pageTitle")} 
    store={this.store} 
    scrollable 
    shadow 
    // grouped 不需要分组就删掉这行
    height={600} // 加上高度配置
>
    <ExtColumn text="Company" dataIndex="name" width="150"/>
    <ExtColumn text="Price" width="85" dataIndex="price"/>
    <ExtColumn text="Change" width="100" dataIndex="priceChange"/>
    <ExtColumn text="% Change" dataIndex="priceChangePct"/>
</ExtGrid>

内容的提问来源于stack exchange，提问作者Tobias