處理Extjs的gridpanel修改一條記錄並重新加載store之后，已選項model的record並沒有改變的問題

昨天做項目發現一個問題，當修改了grid中的一條選中記錄，保存並刷新store之后再次點開或者讀取該選中行record發現還是修改之前的值，但是當鼠標選中其它行並再次回到剛剛修改的記錄之后，點開或者讀取record發現是修改后的數據，后台數據在修改保存后已刷新，界面顯示也是最新數據，但是該條record在不更改已選項的情況下依然是之前的數據，在網上找到了一個解決辦法並學習下別人的思路。

 

文章地址：http://blog.csdn.net/jaune161/article/details/18220257  轉載請注明出處！

 

在項目開發中遇到這樣一個問題，點擊Grid中的一條記錄並修改，修改完后保存並且刷新表格，后台已保存成功，並且前台grid中的值也已經改變。這時候被修改的記錄還處於選中狀態，然后再次點修改，發現表單中的值還是原來的值，但是在選擇另外一條記錄后，再次選擇這條記錄並修改時發現值已改變。

 

如圖：這是原記錄，現在我們在角色說明后面加幾個*號，測試

保存后，原來被修改的記錄還處於選擇狀態，然后我點擊修改按鈕，發現Form中的值還是修改前的值。

注：表單是通過loadRecord的方式加載的值，在每次賦值前都執行了reset(true)方法，所以不是Form緩存的問題

當我們選擇另外一條記錄，然后再此選擇這條記錄是值又變成了修改后的值

經過分析我覺得可能是grid中的SelectionModel中的記錄並沒有改變，所以才會到這這樣的情況，正常流程應該是store重新加載后，需要更新SelectionModel中選中的記錄。

於是查看Ext.selection.Model的源碼，找到為store綁定事件的方法getStoreListeners，方法內容如下。

getStoreListeners: function() {  var me = this; return { add: me.onStoreAdd, clear: me.onStoreClear, bulkremove: me.onStoreRemove, update: me.onStoreUpdate, load: me.onStoreLoad, idchanged: me.onModelIdChanged, refresh: me.onStoreRefresh }; },

發現監聽了store的load事件，於是猜想問題應該出在onStoreLoad方法上。於是找到這個方法

 

 

 /**  * @abstract * @private */ onStoreLoad: Ext.emptyFn,

發現Ext對這個方法的聲明是abstract，這個方法是一個空的方法。由此發現Ext的SelectionModel並沒有對store重新加載后進行任何的處理。所以我們就自己處理，重寫Ext.selection.Model的onStoreLoad方法，在這個方法中更新選中的記錄，代碼如下

 

 

/**
 * 處理Grid重新加載過后selectionModel中的記錄不更新的問題
 * me.selected中存放的是選中的記錄的集合
 */
Ext.override(Ext.selection.Model,{
    onStoreLoad:function(store, records, successful, eOpts){
        var me = this,
            length = me.selected.getCount( );

        //如果沒有選中的記錄，則不需要進行任何的操作
        if(length===0)return;

        //遍歷selected並更新其中的記錄
        me.selected.eachKey(function(key,item){
            var model = store.getById(key);

            //如果獲取到了model就更新，否則從selected中移除
            if(model){
                me.selected.add(model);//add時會覆蓋掉原來的值
            }else{
                me.selected.removeAtKey(key);
            }
        })

    }
});

 

加上上面的代碼后問題解決。