Javascript Ext JS网格视图中sessionStorage代理实现中面临的问题

我刚刚创建了一个Sencha小提琴，其中有一个面板，里面有两个网格视图。两个网格视图都有助于从左到右选择项目，反之亦然。我正在尝试将所选项目从左栅格视图显示到右栅格视图。我正在使用sessionStorage代理来保存数据，同时将项目从左网格视图移动到右网格视图。我必须使用sessionStorage，因为我的要求是在页面中保留此选择

Sencha fiddle链接：

虽然，我没有收到任何错误，但我的实现不起作用。即使控制台日志也会显示正确的选择数据。但我仍然无法填充正确的网格视图

我注意到的一件事是，在浏览器调试器的application->SessionStorage下，我的SessionStorage对象始终为null。不知道为什么，但在控制台上显示数据

任何提示都将不胜感激

另一方面，相同的实现在ExtJS4.2中运行良好。但我在迁移到ExtJS6.5时遇到了这个问题

谢谢， 迪拉杰

进一步的故障排除：

此外，我还更新了相同的提琴，并成功地使其进一步发挥作用，在tropos.selectDevices.addToSelect方法中为我的右侧网格“store”-->store2和“sessionStore”-->sessionStore2注释了“suspendEvents”和“resumeEvents”。除此之外，我还发现tropos.selectDevices.updateGridViews方法中的“store2.loadPage（1）”行在加载时清除了我的网格。我试图避免使用'clearOnPageLoad'配置将store设置为false。但它不起作用，所以我评论了这一行，使它起作用。现在，虽然它可以工作，但我的主要要求是保留用户选择，但仍然没有得到满足，因为会话存储仍然不起作用

更新小提琴：

谢谢，

---

Dhiraj

在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();
};

example.selectDevices.addToSelect=函数（storeObj）{
var addRecs=[]，newRecs=[]，
store2=Ext.getCmp（'grid2'）.getStore（）；
//********************  
//我只是注释所有的*sessionStore2*引用，因为它是冗余的，
//store2与sessionStore2相同
//********************
//sessionStore2=Ext.data.StoreManager.lookup（'currentlySelectedDevices'）；
//仓库2.吊杆通风孔（）；
//会话存储2.吊杆事件（）；
Ext.each（存储对象、功能（记录）{
var rec=record.copy（）；
rec.phantom=true；
addrec.push（rec）；
newRecs.push（record.data.hid）；
});
example.selectedDevices.selectedDeviceIds=example.selectedDevices.selectedDeviceIds.concat（newRecs）；
存储2.添加（addRecs）；
//store2.commitChanges（）；
对于（i=0；i

---

编辑：您必须将记录标记为phantom=true，以便同步正常工作

@Fabrio:谢谢您的尝试。正如预期的那样，它正在工作，但这不是我可以使用的，因为我无法完全删除会话存储。例如，如果用户执行某些设备选择并关闭面板而不执行提交操作。现在，当他尝试重新打开面板时（再次单击“选择设备”按钮），他之前所做的所有设备选择都将丢失，因为要加载面板，我正在使用sessionStorage代理存储。请参阅加载面板的“example.selectDevices.handleSelectedDevices”函数调用。为了满足我的要求，我必须保留用户选择。@Fabrio:谢谢Fabrio，我错过了幻影魔法！它正在工作。