Results 1 to 5 of 5

Thread: Facing issue in sessionStorage Proxy implementation in Ext JS Grid view

  1. #1
    Sencha Premium Member
    Join Date
    Nov 2011
    Posts
    19
    Vote Rating
    0
      0  

    Default Answered: Facing issue in sessionStorage Proxy implementation in Ext JS Grid view

    I just created a 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.
    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.
    I 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.
    ExtJS_Issue_1.jpg

    ExtJS_Issue_2.jpg

    Any pointers would 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

  2. In Ext JS 5 some things have changed concerning IDs. To add new records to the store, for each new record you have to set the phantom property to true. Like this:
    Code:
    example.selectDevices.addToSelect = function(storeObj){
        var addRecs = [],
        store2 = Ext.getCmp('grid2').getStore();
    
        Ext.each(storeObj,function(record){
            // don't add existing records
            if (store2.findRecord('did', record.get('did')))
                return;
    
            // mark this record as new
            record.phantom = true;
            
            addRecs.push(record);
        });
    
        store2.add(addRecs);
        store2.sync();
    
        example.selectDevices.updateGridViews();
    };

  3. #2
    Sencha Premium Member richardvd's Avatar
    Join Date
    Jun 2011
    Location
    NL
    Posts
    255
    Answers
    21
    Vote Rating
    71
      0  

    Default

    The right side grid seems to populate just fine after checking one or more items on the left side and then pressing the Select button.

  4. #3
    Sencha Premium Member
    Join Date
    Nov 2011
    Posts
    19
    Vote Rating
    0
      0  

    Default

    Hi Richard,

    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.

    For example, consider a case where user does some device selection and CLOSE the grid panel without submit action. Now, when he tries to reopen the panel (by clicking again the Select Device button) then all the user selection is lost because to load the panel I'm using sessionStorage proxy store. See the 'example.selectDevices.handleSelectedDevices' function call that loads the panel and sessionStorage (key ->currentlySelectedDevices) in my implementation is not storing the data. It is always EMPTY.

    Any pointers shall be helpful.

    Thanks,
    Dhiraj

  5. #4
    Sencha Premium Member richardvd's Avatar
    Join Date
    Jun 2011
    Location
    NL
    Posts
    255
    Answers
    21
    Vote Rating
    71
      0  

    Default

    In Ext JS 5 some things have changed concerning IDs. To add new records to the store, for each new record you have to set the phantom property to true. Like this:
    Code:
    example.selectDevices.addToSelect = function(storeObj){
        var addRecs = [],
        store2 = Ext.getCmp('grid2').getStore();
    
        Ext.each(storeObj,function(record){
            // don't add existing records
            if (store2.findRecord('did', record.get('did')))
                return;
    
            // mark this record as new
            record.phantom = true;
            
            addRecs.push(record);
        });
    
        store2.add(addRecs);
        store2.sync();
    
        example.selectDevices.updateGridViews();
    };

  6. #5
    Sencha Premium Member
    Join Date
    Nov 2011
    Posts
    19
    Vote Rating
    0
      0  

    Default

    Thanks Richard,

    I was missing the phantom magic! It's working now.

Similar Threads

  1. Replies: 4
    Last Post: 22 Jun 2018, 5:43 PM
  2. Replies: 1
    Last Post: 19 Oct 2014, 10:08 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •