Facing issue in sessionStorage Proxy implementation in Ext JS Grid view

Question

I just created a Sencha fiddle wherein I have one panel with two grid views inside it. Both Grid views facilitates item selection from left to right and vice-versa. I'm trying to show the selected item from left grid view into right grid view. I'm using sessionStorage proxy to hold data while moving items from left to right grid view. I have to use sessionStorage because my requirement is to persist this selection across the pages.

Sencha fiddle link : https://fiddle.sencha.com/#view/editor&fiddle/2j7u

Although, I'm not getting any error but my implementation is not working. Even the console logs show the correct selection data. But still I'm unable to populate the right grid view.

One thing I noticed is that in browser debugger under Applcation -> SessionStorage, my sessionStorage object is always null. Don't know why but on console it shows the data.

Console logs from fiddle

sessionStorage value from debugger

Any pointers would be highly appreciated!

On a side note, the same implementation was working fine with Ext JS 4.2. But I'm facing issue while migrating to Ext JS 6.5

Thanks, Dhiraj

Further troubleshooting:

Further, I have updated the same fiddle and was successful to make it work further, by commenting out 'suspendEvents' and 'resumeEvents' for my right grid 'store' --> store2 and 'sessionStore' --> sessionStore2 in tropos.selectDevices.addToSelect method. Along-with this I figured out that line 'store2.loadPage(1)' in tropos.selectDevices.updateGridViews method was clearing my grid on loading. I tried to avoid that using 'clearOnPageLoad' config setting for store to false. But it DIDN'T work so I commented this line to make it work. Now, although, it works but my main requirement of PRESERVING user selection is still not met because sessionStorage is still not working.

Updated fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2j7u

Thanks, Dhiraj

Answer 1

Try this code in your addToSelect :

example.selectDevices.addToSelect = function(storeObj){
    var addRecs = [], newRecs = [],
    store2 = Ext.getCmp('grid2').getStore();

    //********************  
    //I just comment all  *sessionStore2* references because is redundand,
    //store2 is the same as sessionStore2 
    //********************

    //sessionStore2 = Ext.data.StoreManager.lookup('currentlySelectedDevices');
    //store2.suspendEvents();
    //sessionStore2.suspendEvents();

    Ext.each(storeObj,function(record){
        var rec = record.copy();
        rec.phantom = true;
        addRecs.push(rec);
        newRecs.push(record.data.hid);
    });
    example.selectDevices.selectedDeviceIds = example.selectDevices.selectedDeviceIds.concat(newRecs);
    store2.add(addRecs);
    //store2.commitChanges();

    for(i=0; i < store2.data.items.length; i++) {
        console.log("addToSelect: Selected Device Serial [" + i + "] from STORE_2: " + store2.data.items[i].data.hid);
    }
    //sessionStore2.add(addRecs);

    //for(j=0; j < sessionStore2.data.items.length; j++) {
    //    console.log("addToSelect: Selected Device Serial [" + j + "] from SESSION_STORAGE_2: " + sessionStore2.data.items[j].data.hid);
    //}
    //sessionStore2.sync();

    store2.sync();
    //sessionStore2.resumeEvents();

    example.selectDevices.updateGridViews();
};

EDIT: You have to mark the record as phantom = true in order the sync work properly