Page 1 of 2 12 LastLast
Results 1 to 10 of 17

Thread: Buffered Store with infinite grid - scrolling issues

    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

    Default 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)

    Ext.Loader.setConfig({enabled: true});
    Ext.Loader.setPath('Ext.ux', '../ux/');
        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{
            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: '',
                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="{2}" target="_blank">{0}</a>',
        var grid = new Ext.grid.GridPanel({
            width: 700,
            height: 300,
            title: ' - 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 Attached Images

  2. #2
    Sencha User
    Join Date
    Dec 2010


    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 User Animal's Avatar
    Join Date
    Mar 2007


    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


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

    ExtJS version 4.0.2.

  5. #5
    Sencha User Animal's Avatar
    Join Date
    Mar 2007


    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

    Exclamation Bug in the example too


    Ext version tested:

    • Ext 4.0 rev 2

    Browser versions tested against:

    • FF3 (3.6.18) (firebug 1.7.3 installed)


    Operating System:

    • WinXP Pro SP3


  7. #7

    Default Facing the identical issue

    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.

  8. #8
    Touch Premium Member
    Join Date
    Sep 2011


    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


    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.
    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


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

Page 1 of 2 12 LastLast

Similar Threads

  1. [INFOREQ] Buffered 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

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