ExtJS 5 Grid 條件查詢數據返回但不顯示的排查：rootProperty 配置

現象

• 後端返回 JSON 數據正常，瀏覽器 Network 面板可見。
• Grid 面板無數據渲染，無報錯。

根本原因

Store 的 reader 配置中 rootProperty (Ext JS 5+ 取代 root) 與後端 JSON 實際數組字段名不一致。

後端返回示例

{
    "total": 122,
    "offset": 0,
    "rows": [
        { "id": "1", "name": "張三", "age": 28 },
        { "id": "2", "name": "李四", "age": 32 }
    ]
}

Store 正確配置

Ext.define('MyStore', {
    extend: 'Ext.data.Store',
    model: 'MyModel',
    proxy: {
        type: 'ajax',
        url: '/api/users',
        reader: {
            type: 'json',
            rootProperty: 'rows',  // 必須與 JSON 中數組字段名一致
            totalProperty: 'total' // 分頁總數字段
        }
    },
    autoLoad: true
});

常見字段名對照

調試步驟

1. 打開瀏覽器開發者工具 → Network → XHR → 查看 Response JSON 結構。
2. 在 Console 執行 Ext.getStore('MyStore').getProxy().getReader().rootProperty 確認當前配置。
3. 若不一致，修改 Store 定義或在 load 時動態設置：store.getProxy().getReader().setRootProperty('data')。

進階：動態適配多種返回格式

reader: {
    type: 'json',
    rootProperty: function(response) {
        // 支持 rows / data / list 多種字段
        return response.rows || response.data || response.list || [];
    },
    totalProperty: function(response) {
        return response.total || response.totalElements || response.count || 0;
    }
}

總結

Ext JS 5+ 使用 rootProperty (非 root)，必須與後端 JSON 數組字段名**完全一致**，否則 Store 無法解析數據導致 Grid 空白。