ExtJS 4 Grid 行號快速刷新：高效處理大量數據插入刪除

需求場景

• Grid 最大顯示 50 行，帶行號列（RowNumberer）。
• 新數據插入頂部，超過 50 行刪除底部。
• 需要行號即時更新：新行為 1，其餘遞增。

解決方案

1. Store 配置自動修剪

var store = Ext.create('Ext.data.Store', {
    listeners: {
        add: function(store, records) {
            while (store.getCount() > 50) {
                store.removeAt(50); // 刪除多餘尾部行
            }
        }
    }
});

2. 直接操作 DOM 更新行號（避免完整重渲染）

function updateRowNumbers(grid) {
    // 選中所有行號單元格
    Ext.get(grid.el.dom).select('td.x-grid-cell-first div').each(function(el, c, index) {
        if (index > 0) { // 跳過表頭
            el.setHTML(index); // index 從 0 開始，行號 = index
        }
    });
}

3. 在數據操作後調用

// 插入新數據到頂部
store.insert(0, newRecords);
updateRowNumbers(grid);

關鍵優勢

• 不觸發 Grid 的 refresh 或 reconfigure，避免重新計算佈局、失去選中狀態。
• DOM 操作極快，50 行級別毫秒級完成。

注意

若使用 BufferedRenderer 或分頁，需結合 view.refresh() 視情況調用。