Results 1 to 8 of 8

Thread: [4.2.1 GA] GridView preserveScrollOnRefresh doesn't work if any row is focused

    You found a bug! We've classified it as EXTJS-10863 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    1,018

    Default [4.2.1 GA] GridView preserveScrollOnRefresh doesn't work if any row is focused

    REQUIRED INFORMATION

    Ext version tested:
    • Ext 4.2.1 GA

    Browser versions tested against:
    • Chrome
    • IE9

    DOCTYPE tested against:
    • <!DOCTYPE html>

    Description:
    • A GridView preserveScrollOnRefresh doesn't work if any row is focused.

    Steps to reproduce the problem:
    • Select any row
    • Scroll to get that row our of view

    The result that was expected:
    • Scroll is immovable

    The result that occurs instead:
    • Scroll moves to show the selected row

    Test Case:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <title>GridView preserveScrollOnRefresh doesn't work if select a row</title>
    
        <link rel="stylesheet" href="../resources/css/ext-all.css" />
        
        <script src="../ext-all-dev.js"></script>
    
        <script>
            var grid;
    
            Ext.onReady(function () {
                var data = [],
                    i;
    
                for (i = 0; i < 50; i++) {
                    data.push({ test: "test" + i});
                }
    
                grid = Ext.create("Ext.grid.Panel", {
                    renderTo: Ext.getBody(),
                    store: {
                        fields: [{
                            name: "test"    
                        }],
                        data: data
                    },
                    columns: [{
                        text: "Test",
                        dataIndex: "test"
                    }],
                    viewConfig: {
                        preserveScrollOnRefresh: true
                    }
                });
    
                setInterval("grid.getView().refresh();", 2000);
            });
        </script>
    </head>
    <body>
    
    </body>
    </html>


    HELPFUL INFORMATION


    Debugging already done:
    • It happens because of a selection model re-focus the selected row in Ext.view.Table's refresh:

    Code:
    if (hasFocus) {
        me.selModel.onLastFocusChanged(null, me.selModel.lastFocused);
    }

    • I understand that the focus will go after refresh and, for example, key navigation will be lost after refresh, but I would expect the preserveScrollOnRefresh is a stronger option.

    Possible fix:

    Code:
    Ext.view.Table.override({
        refresh: function() {
            var me = this,
                hasFocus = me.el && me.el.isAncestor(Ext.Element.getActiveElement());
    
            Ext.view.Table.superclass.refresh.apply(this, arguments);
            //me.callParent(arguments);
            me.headerCt.setSortState();
    
            // Create horizontal stretcher element if no records in view and there is overflow of the header container.
            // Element will be transient and destroyed by the next refresh.
            if (me.el && !me.all.getCount() && me.headerCt && me.headerCt.tooNarrow) {
                me.el.createChild({style:'position:absolute;height:1px;width:1px;left:' + (me.headerCt.getFullWidth() - 1) + 'px'});
            }
    
            if (hasFocus && !me.preserveScrollOnRefresh) {
                me.selModel.onLastFocusChanged(null, me.selModel.lastFocused);
            }
        }
    });
    Object.NET
    Frameworks and Tools for .NET Developers
    --------------------------------------------------
    Ext.NET - Ext JS for ASP.NET - Examples | Twitter
    Bridge.NET - Write C#. Run JavaScript! - Live | Twitter
    --------------------------------------------------

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Sencha User
    Join Date
    Sep 2013
    Posts
    10

    Default

    Is there any update on this issue? Are there plans to fix it?

  4. #4

    Default Working fix

    Hi,

    The fix provided by the submitter doesn't work, at least for me. Perhaps some of my other hacks or overrides is getting on the way. Anyway, if someone else finds this and needs a fix I'm using this override to simply save the last scroll and restore it.

    Code:
    Ext.override(Ext.view.Table, {
    	// Avoid blur of search boxes due to grid selection-focus
    	_ws_lastScrollPosition: null,
    
    
    	refresh: function() {
    		var me = this;
    
    
    		me.callParent(arguments);
    
    
    		if (me.headerCt.up('[store]')) {
    			me.headerCt.setSortState();
    		}
    
    
    		if (me.rendered && me.bufferedRenderer) {
    			me.el.dom.scrollTop = me._ws_lastScrollPosition;
    			me.bufferedRenderer.onViewScroll(null, me.el);
    		}
    
    
    		me.selModel.onLastFocusChanged(null, me.selModel.lastFocused, true);
    	},
    
    
    	onViewScroll: function(e, t) {
    		this._ws_lastScrollPosition = t.scrollTop;
    
    
    		return this.callParent(arguments);
    	}
    });
    Please keep in mind that I'm checking for the buffered renderer and won't work if the bug exists without the plugin... which I believe it does not.

  5. #5
    Sencha User
    Join Date
    Dec 2011
    Posts
    242

    Talking

    It works perfectly for my buffered grid now

  6. #6
    Sencha User
    Join Date
    Mar 2011
    Location
    Arvada, CO
    Posts
    404

    Default

    Thanks alexmipego, that did the trick for me!

  7. #7
    Sencha User
    Join Date
    Mar 2011
    Location
    Arvada, CO
    Posts
    404

    Default

    Actually, I spoke too soon. It looks like alexmipego's fix works for an initial load... so I'll scroll to say page 25 of my grid, do a store.load(), scrollbars are preserved, and I can scroll around to see my data. However, if I look at the call from store.load(), it loads pages 1 and 2, when it should've been pages 25 and 26. The weird thing is, when I started scrolling around, those calls loaded the right pages. Now, the problem becomes if I try to do another store.load(), as Firebug reports loading pages 1 and 2 again, but the loading mask just spins and spins.

    Guess I'll have to start poking around with this one.

  8. #8
    Ext JS Premium Member
    Join Date
    Feb 2009
    Posts
    487

    Default Ext 4.1.x version

    Code:
    Ext.override(Ext.view.Table, {
    	// Avoid blur of search boxes due to grid selection-focus
    	_ws_lastScrollPosition: null,
    
    
    
    
    	refresh: function() {
    		var me = this;
    
    
    
    
    		me.callParent(arguments);
    
    
    
    
    		if (me.headerCt.up('[store]')) {
    			me.headerCt.setSortState();
    		}
    
    
    
    
    		if (me.rendered && me.up('grid').verticalScroller ) {
    			me.el.dom.scrollTop = me._ws_lastScrollPosition;
    			me.up('grid').verticalScroller.onViewScroll(null, me.el);
    		}
    
    
    
    
    		me.selModel.onLastFocusChanged(null, me.selModel.lastFocused, true);
    	},
    
    
    
    
    	onViewScroll: function(e, t) {
    		this._ws_lastScrollPosition = t.scrollTop;
    
    
    
    
    		return this.callParent(arguments);
    	}
    });

Posting Permissions

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