Results 1 to 5 of 5

Thread: Moving a grid showing lots of records that is scrolled blanks out when moved back

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-22404 in 6.5.2.
  1. #1
    Ext JS Premium Member
    Join Date
    Aug 2010
    Posts
    66

    Exclamation Moving a grid showing lots of records that is scrolled blanks out when moved back

    Hi all,

    This is one of those "I'm not 100% sure it's a bug but from what I can see it seems likely it is" situations. ExtJS 6.0.2 under Firefox at minimum.

    Ok, so, what we have is an app where we want to be able to "unpin" a grid, meaning take it out of its existing location in the DOM and put it into a new window, and then "pin" it back where it started when the window is closed. We got that all working without too much trouble but we're now seeing an issue where if there's a good number of records in the grid and you scroll down to the bottom when unpinned, when you pin it back the grid is empty until you manually scroll. Here's trimmed-down and simplified example code to demonstrate:
    Code:
    Ext.define("Record", {
      extend : "Ext.data.Model",
      fields : [ "field1", "field2", "field3", "field4" ]
    });
    
    
    // Store for "unpinnable" grid with 100 random records in it.
    var myStore = Ext.create( "Ext.data.Store", { model : "Record", data : [ ] } );
    var a  = [ ];
    for (var i = 0; i < 100; i++) {
      var r = { };
      for (var j = 1; j < 5; j++) {
        var f = "field" + j;
        r[f] = Math.floor(Math.random() * 899) + 100;
      }
      a.push(new Record(r));
    }
    myStore.loadData(a, true);
    
    
    Ext.onReady(function() {
    
      new Ext.Viewport({ id : "myViewport", items : [
    
        { xtype : "grid", width : 500, height : 100, id : "grid1",
          store : Ext.create( "Ext.data.Store", { model : "Record", data : [ 
            { field1 : "AAA", field2 : "BBB" }
          ] } ),
          columns : [
            { text : "field1", dataIndex : "field1" },
            { text : "field2", dataIndex : "field2" }
          ]
        },
        
        // The "unpinnable" grid.
        { xtype : "grid", width : 500, height : 200, title : " ", id : "grid2", 
          store : myStore, 
          columns : [
            { text : "field1", dataIndex : "field1" },
            { text : "field2", dataIndex : "field2" },
            { text : "field3", dataIndex : "field3" },
            { text : "field4", dataIndex : "field4" },
          ],
          tools : [ 
            { type : "unpin", tooltip : "Pin/Unpin", isPinned : true,
              
              handler : function() {
    
                var toolRef = this;
    
                // If the grid is currently pinned in place then un-pin it.
                if (this.isPinned === true) {
                  
                  this.setType("pin");
                  this.isPinned = false;
                  var win = new Ext.Window({
                    width : 500, height : 300, title : "Test", layout : "fit",
                    id : "grid2UnpinnedWindow", items : [ ], 
                    listeners : { 
                      close : function() {
                        toolRef.setType("unpin");
                        toolRef.isPinned = true;
                        Ext.getCmp("myViewport").moveAfter(
                          Ext.getCmp("grid2"), Ext.getCmp("grid1")
                        );            
                      } 
                    }
                  });
                  win.moveBefore(Ext.getCmp("grid2"));
                  win.show();
    
                // Grid is currently un-pinned so re-pin it by closing host window.
                } else {
                  Ext.getCmp("grid2UnpinnedWindow").close();
                }
    
              }
              
            }      
          ]
        },
        
        { xtype : "grid", width : 500, height : 100, 
          store : Ext.create( "Ext.data.Store", { model : "Record", data : [ 
            { field3 : "CCC", field4 : "DDD" }
          ] } ),
          columns : [
            { text : "field3", dataIndex : "field3" },
            { text : "field4", dataIndex : "field4" }
          ]
        }
    
      ] });
    
    });
    If you execute that and hit the unpin tool on the second grid it gets pulled out into a separate window. Now, immediately hit the window close icon or the tool icon again and it gets re-pinned and note that you can see the records. Now, unpin again but this time scroll all the way down, THEN re-pin it. Now you'll have an empty grid. Now, just grab the scrollbar and move it a little and the records will re-appear.

    From what I can tell, this happens when you scroll far enough when unpinned to cross a buffer boundary so the grid has to render new rows. You don't have to scroll all the way down to cause this problem but you do have to scroll a fair bit, just a little bit doesn't yield the same result, that's why I suspect it has to do with buffering (which, if memory serves, is the default in this version).

    I've tried various things immediately after re-pinning it to "force" the records to come back... I've tried refreshing the grid view, forcing layout on the grid panel... I've tried setFocus() to the last row and then back to the first (I THOUGHT that was working at one point but it wasn't consistent, and it's a hell of a hack anyway!)... I've tried making the parent re-do layout, various events, etc. None of it works. So, I'm thinking bug here because it SEEMS like this should work.

    Anyone have any thoughts? Thanks!

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,253

    Default

    A simpler test case:

    Code:
    Ext.onReady(function() {
        var vp = new Ext.Viewport({
            layout: 'fit',
            items: [{
                xtype: 'grid',
                id: 'grid',
                store: {
                    fields: ['name'],
                    data: (function() {
                        var data = [];
                        for (var i = 0; i < 1000; ++i) {
                            data.push({
                                name: 'Name' + i
                            });
                        }
                        return data;
                    })()
                },
                columns: [{
                    text: 'Name',
                    dataIndex: 'name'
                }],
                tools: [{
                    type: 'unpin',
                    isPinned: true,
                    handler: function() {
                        var toolRef = this;
                        if (this.isPinned) {
                            this.setType('pin');
                            this.isPinned = false;
                            var win = new Ext.Window({
                                id: 'win',
                                width: 500,
                                height: 300,
                                title: 'Test',
                                layout: 'fit',
                                listeners: {
                                    beforeclose: function() {
                                        toolRef.setType('unpin');
                                        toolRef.isPinned = true;
                                        vp.insert(1, Ext.getCmp('grid'));
                                    }
                                }
                            });
                            win.add(Ext.getCmp('grid'));
                            win.show();
                        } else {
                            Ext.getCmp('win').close();
                        }
                    }
                }]
            }]
        });
    });
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Ext JS Premium Member
    Join Date
    Aug 2010
    Posts
    66

    Default

    Confirmed, I see the same issue with Evan's simpler example as well. Thanks!

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    I have added a workaround in https://fiddle.sencha.com/#fiddle/1fek

    DOM scroll position is lost when a node is removed. It has no layout in detached state. So must be restored when re-added. And when buffered rendering is used, there's a bit more to do.

  5. #5
    Ext JS Premium Member
    Join Date
    Aug 2010
    Posts
    66

    Default

    Quote Originally Posted by Animal View Post
    I have added a workaround in https://fiddle.sencha.com/#fiddle/1fek

    DOM scroll position is lost when a node is removed. It has no layout in detached state. So must be restored when re-added. And when buffered rendering is used, there's a bit more to do.
    Thanks Animal. For me, this workaround didn't work under 6.0.2. The fiddle appears to be using a 6.0.3 nightly, so I assume it's dependent on that?

Similar Threads

  1. Replies: 2
    Last Post: 13 Sep 2013, 9:32 AM
  2. [CLOSED-591] scrolled text jumps back
    By eric2008 in forum Sencha Touch 1.x: Bugs
    Replies: 3
    Last Post: 29 May 2012, 1:13 PM
  3. Avoid moving a window when a page is scrolled.
    By Hans Kejser Hansen in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 9 Aug 2010, 12:16 AM
  4. Replies: 2
    Last Post: 29 Jul 2010, 9:09 AM

Posting Permissions

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