ExtJS Grid 分頁工具條無數據顯示：Store 與 Proxy 配置錯誤排查

典型錯誤配置

var store = Ext.create('Ext.data.JsonStore', {
    proxy: {
        type: 'memory', // 錯誤：memory proxy 不支持服務端分頁
        reader: { type: 'json', totalProperty: 50 } // totalProperty 應對應返回 JSON 字段名
    }
});
store.loadPage(1); // memory proxy 會直接讀取內存 data，忽略分頁參數

根因

type: 'memory' 表示數據完全在前端內存，分頁由 `PagingToolbar` 客戶端切片完成，**不發送請求參數** (`page`, `start`, `limit`) 給後端。若後端已分頁返回數據，前端仍需 `memory` proxy 配合 `loadRawData`，但 `PagingToolbar` 需配合 `ajax`/`jsonp`/`rest` proxy 實現服務端分頁。

正確服務端分頁配置

var store = Ext.create('Ext.data.Store', {
    model: 'Node',
    pageSize: 30,
    proxy: {
        type: 'ajax', // 關鍵：發送分頁參數
        url: 'selectLog.do', // 後端接口
        reader: {
            type: 'json',
            rootProperty: 'data', // 返回 JSON 中數組字段名
            totalProperty: 'total' // 返回 JSON 中總記錄數字段名
        }
    },
    autoLoad: true // 自動加載第一頁
});

var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    columns: [ ... ],
    bbar: Ext.create('Ext.toolbar.Paging', {
        store: store,
        displayInfo: true
    })
});

後端返回 JSON 格式規範

{
    "total": 1234,        // 總記錄數，供 totalProperty 讀取
    "data": [             // rootProperty 對應數組
        {"UI_id":1, "UI_Time":"...", ...},
        ...
    ]
}

關鍵檢查點

• Proxy `type` 必須為 `ajax`/`rest`/`jsonp`（服務端分頁）。
• `reader.rootProperty` / `totalProperty` 與後端 JSON 字段名**完全一致**（區分大小寫）。
• 後端接口正確解析 `page`/`start`/`limit` 參數並返回對應切片數據。
• Store `pageSize` 與 `PagingToolbar` `pageSize` 保持一致。