Success! Looks like we've fixed this one. According to our records the fix was applied for a bug in our system in a recent build.
  1. #1
    Ext GWT Premium Member
    Join Date
    Apr 2011
    Posts
    63
    Vote Rating
    0
    gctram is on a distinguished road

      0  

    Default Buffered Store with infinite grid - scrolling issues

    Buffered Store with infinite grid - scrolling issues


    1. The grid and scroll bar does not seem to be in sync when scrolling. I have attached an image (scroll1.jpg) of the Ext infinite scrolling example (modified to restrict max rows to 100). Pls see the rows displayed in grid during the two scrollbar positions.

    2. The bottom of the grid shows different last row each time I scroll to the bottom. (scroll2.jpg)

    Code:
    Ext.Loader.setConfig({enabled: true});
    
    Ext.Loader.setPath('Ext.ux', '../ux/');
    Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.data.BufferStore',
        'Ext.util.*',
        'Ext.grid.PagingScroller'
    ]);
    
    Ext.onReady(function(){
        Ext.regModel('ForumThread', {
            fields: [
                'title', 'forumtitle', 'forumid', 'author',
                {name: 'replycount', type: 'int'},
                {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
                'lastposter', 'excerpt', 'threadid'
            ],
            idProperty: 'threadid'
        });
    
        // create the Data Store
        var store = new Ext.data.BufferStore({
            id: 'store',
            pageSize: 20,
            model: 'ForumThread',
            remoteSort: true,
            proxy: {
                // load using script tags for cross domain, if the data in on the same domain as
                // this page, an HttpProxy would be better
                type: 'scripttag',
                url: 'http://www.sencha.com/forum/remote_topics/index.php',
                extraParams: {
                    total: 100
                },
                reader: {
                    root: 'topics',
                    totalProperty: 'totalCount'
                },
                // sends single sort as multi parameter
                simpleSortMode: true
            },
            sorters: [{
                property: 'lastpost',
                direction: 'DESC'
            }]
        });
    
        function renderTopic(value, p, record) {
            return Ext.String.format(
                '<a href="http://sencha.com/forum/showthread.php?t={2}" target="_blank">{0}</a>',
                value,
                record.data.forumtitle,
                record.getId(),
                record.data.forumid
            );
        }
    
    
        var grid = new Ext.grid.GridPanel({
            width: 700,
            height: 300,
            title: 'ExtJS.com - Browse Forums',
            store: store,
            verticalScrollerType: 'paginggridscroller',
            loadMask: true,
            disableSelection: true,
            invalidateScrollerOnRefresh: false,
            viewConfig: {
                trackOver: false
            },
            // grid columns
            columns:[{xtype: 'rownumberer',width: 40, sortable: false},{
                // id assigned so we can apply custom css (e.g. .x-grid-cell-topic b { color:#333 })
                // TODO: This poses an issue in subclasses of Grid now because Headers are now Components
                // therefore the id will be registered in the ComponentMgr and conflict. Need a way to
                // add additional CSS classes to the rendered cells.
                id: 'topic', 
                text: "Topic",
                dataIndex: 'title',
                flex: 1,
                renderer: renderTopic,
                sortable: false
            },{
                text: "Author",
                dataIndex: 'author',
                width: 100,
                hidden: true,
                sortable: true
            },{
                text: "Replies",
                dataIndex: 'replycount',
                align: 'center',
                width: 70,
                sortable: false
            },{
                id: 'last',
                text: "Last Post",
                dataIndex: 'lastpost',
                width: 130,
                renderer: Ext.util.Format.dateRenderer('n/j/Y g:i A'),
                sortable: true
            }],
            renderTo: Ext.getBody()
        });
        
        // trigger the data store load
        store.guaranteeRange(0, 19);
    });
    Attached Images

  2. #2
    Sencha User
    Join Date
    Dec 2010
    Posts
    22
    Vote Rating
    0
    mvdbergh is on a distinguished road

      0  

    Default


    I've noticed the same behavior.

    Note that when using your example I have to change the BufferedStore to a normal store and set 'buffered' to true (BufferedStore is deprecated).

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    On which browser are you seeing this? From the screenshots, it looks like the world's worst browser, and least equiped to handle dynamic loading and virtual scrolling. Does the problem occur when using good browsers?

    Having said that 4.1.0 has seen a complete overhaul of scrolling, and there should not be any sync problems in 4.1.0 because the scrollbar is the genuine OS scrollbar of the grid view.

  4. #4
    Sencha User
    Join Date
    Dec 2010
    Posts
    22
    Vote Rating
    0
    mvdbergh is on a distinguished road

      0  

    Default


    I'm seeing this error in Firefox 5.0 and Chrome 12.

    ExtJS version 4.0.2.

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    57
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    OK, I would strongly recommend a larger page size than 20!

    It will be attempting to grab a new block of data from the server at almost every twitch of the mouse to keep the scrolling "fed".

    pageSize: 200

    will server you much better.

    I cannot get this example to go wrong using the 4.0.5 codebase. And 4.1.0 will improve this no end. Scrolling will be smooth rather than row by row.

  6. #6
    Sencha User
    Join Date
    Aug 2011
    Posts
    9
    Vote Rating
    0
    dani_bs is on a distinguished road

      0  

    Exclamation Bug in the example too

    Bug in the example too


    REQUIRED INFORMATION


    Ext version tested:
    • Ext 4.0 rev 2


    Browser versions tested against:
    • FF3 (3.6.18) (firebug 1.7.3 installed)


    Description:


    Operating System:
    • WinXP Pro SP3



    Daniele

  7. #7
    Sencha User
    Join Date
    Dec 2011
    Posts
    16
    Vote Rating
    0
    PrashanthShetty is on a distinguished road

      0  

    Default Facing the identical issue

    Facing the identical issue


    Scenario:
    1.Load the bufferred Grid with some data on load of the page say 5 records. Have one Button on the bottom of the Grid.
    2.Load the Grid with different data on click of the button action say some 20 records.
    3.On Click of sorting on any of the header, You will see only 5 records instead of 20 records & sorting hangs after once & you will not be able to sort the data after that.

    @Animal, This i believe is due to scrollbar position- Can you please let us know if there is a fix for the same,

    This is a basic use case, Working on EXTJS for some 3 years by now i never saw such a instable version being released to end users.

    Extjs3 in IE Browser performs relatively Great in performance in Buffered Grid & EXTJS4 has lot of issues, Not sure when the fix is planned to improve the performance in IE Browser.
    Thanks,
    Prashanth

  8. #8
    Touch Premium Member
    Join Date
    Sep 2011
    Posts
    33
    Vote Rating
    0
    d1984 is on a distinguished road

      0  

    Default


    Hi guys,

    I have fixed this issue for 4.0.7 and the infinite grid is now working perfectly for us. Search for the onElScroll method within the Ext.grid.PagingScroller definition in the source code. Search for me.syncScroll = false and change it to true. The code assumes that info at the beginning of the grid doesn't need to be synched because it is cached - this is false.

    This is also why the infinite grid worked perfectly at the bottom of the page when using a large dataset because me.syncScroll is correctly set to true at this point.

    Note: These scrolling issues are still present in 4.1.0 beta 2. The pagingscroller definition seems to have been rewritten significantly too so the above fix cannot be applied. If anyone finds a fix for 4.1.0 please reply to this topic.

  9. #9
    Sencha User
    Join Date
    Aug 2011
    Location
    india
    Posts
    52
    Vote Rating
    0
    amitkumarchauhan is on a distinguished road

      0  

    Default


    Hi d1984,

    1. we are using the same extjs version 4.0.7. but the issue of "scrollbar not sync with the data" still persists .
    please refer the screen shot...while going back to top, u can see it is not showing the first record but there is no scrolling available.
    1.jpg
    and this behavior is random...It does not ends with 14 no only.

    2. Currently we are not able to select the record since disableSelection is set to true, but we need the selection to be enabled.

    3. Can we preserve all the previous data after scrolling i.e. data should not be lost from the store after some
    point of time.

  10. #10
    Sencha User
    Join Date
    Aug 2011
    Location
    india
    Posts
    52
    Vote Rating
    0
    amitkumarchauhan is on a distinguished road

      0  

    Default


    d1984 / Animal ,
    Can you revert back on all 3 issues?

Similar Threads

  1. [INFOREQ] Buffered Ext.data.Store issues
    By stevil in forum Ext:Bugs
    Replies: 37
    Last Post: 14 Jul 2011, 9:55 AM
  2. Buffered scrolling grid inside panel, no scrolling?
    By stijnster in forum Ext: Discussion
    Replies: 3
    Last Post: 6 May 2011, 4:54 AM
  3. Dynamic store for Infinite Scrolling grid
    By gctram in forum Ext: Discussion
    Replies: 0
    Last Post: 2 May 2011, 9:59 AM
  4. Replies: 0
    Last Post: 31 Mar 2011, 11:17 AM

Thread Participants: 7

Tags for this Thread