Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-9991 in 4.2.2.
  1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    10
    Vote Rating
    3
    tjonut is on a distinguished road

      0  

    Default Grid with Infinite Scroling in 4.2.1 - Reload Function

    Grid with Infinite Scroling in 4.2.1 - Reload Function


    On your example on infinite scrolling, I tried to add a button to refresh the store ( basically it need to refresh the pages that are on the view ). On ExtJS 4.1.2 I use reload function and it works fine, but on 4.2.1 when I tried to do this ( after two or three calls of reload function ) I get the following error : "Ext.Base.getRange(): PageMap asked for range which it does not have".

    You can test this on your example on http://docs.sencha.com/extjs/4.2.1/e...te-scroll.html.

    *EDIT BY SLEMMON
    Issue observed in Chrome on 4.2.1 and 4.2.0 using the below test case (press the reload button 4x).
    Tested ok in 4.1.3

    Code:
    Ext.define('ForumThread', {
        extend: 'Ext.data.Model',
        fields: [
                'title', 'forumtitle', 'forumid', 'username', {
                name: 'replycount',
                type: 'int'
            }, {
                name: 'lastpost',
                mapping: 'lastpost',
                type: 'date',
                dateFormat: 'timestamp'
            },
                'lastposter', 'excerpt', 'threadid'
        ],
        idProperty: 'threadid'
    });
    
    
    // create the Data Store
    var store = Ext.create('Ext.data.Store', {
        id: 'store',
        model: 'ForumThread',
        remoteGroup: true,
        // allow the grid to interact with the paging scroller by buffering
        buffered: true,
        leadingBufferZone: 300,
        pageSize: 100,
        proxy: {
            // load using script tags for cross domain, if the data in on the same domain as
            // this page, an Ajax proxy would be better
            type: 'jsonp',
            url: 'http://www.sencha.com/forum/remote_topics/index.php',
            reader: {
                root: 'topics',
                totalProperty: 'totalCount'
            },
            // sends single sort as multi parameter
            simpleSortMode: true,
            // sends single group as multi parameter
            simpleGroupMode: true,
    
    
            // This particular service cannot sort on more than one field, so grouping === sorting.
            groupParam: 'sort',
            groupDirectionParam: 'dir'
        },
        sorters: [{
                property: 'threadid',
                direction: 'ASC'
            }
        ],
        autoLoad: true,
        listeners: {
    
    
            // This particular service cannot sort on more than one field, so if grouped, disable sorting
            groupchange: function (store, groupers) {
                var sortable = !store.isGrouped(),
                    headers = grid.headerCt.getVisibleGridColumns(),
                    i, len = headers.length;
    
    
                for (i = 0; i < len; i++) {
                    headers[i].sortable = (headers[i].sortable !== undefined) ? headers[i].sortable : sortable;
                }
            },
    
    
            // This particular service cannot sort on more than one field, so if grouped, disable sorting
            beforeprefetch: function (store, operation) {
                if (operation.groupers && operation.groupers.length) {
                    delete operation.sorters;
                }
            }
        }
    });
    
    
    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 = Ext.create('Ext.grid.Panel', {
        width: 700,
        height: 500,
        collapsible: true,
        title: 'ExtJS.com - Browse Forums',
        store: store,
        loadMask: true,
        selModel: {
            pruneRemoved: false
        },
        multiSelect: true,
        tbar: [{
            text: 'Refresh',
            handler: function () {
                grid.getStore().reload();
            }
        }],
        viewConfig: {
            trackOver: false
        },
        features: [{
                ftype: 'grouping',
                hideGroupedHeader: false
            }
        ],
        // grid columns
        columns: [{
                xtype: 'rownumberer',
                width: 50,
                sortable: false
            }, {
                tdCls: 'x-grid-cell-topic',
                text: "Topic",
                dataIndex: 'title',
                flex: 1,
                renderer: renderTopic,
                sortable: true
            }, {
                text: "Author",
                dataIndex: 'username',
                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,
                groupable: false
            }
        ],
        renderTo: Ext.getBody()
    });
    Last edited by slemmon; 29 May 2013 at 9:34 AM. Reason: Additional test notes

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,805
    Vote Rating
    167
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


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

  3. #3
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,669
    Vote Rating
    110
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      1  

    Default


    I took a deeper look into this.

    From what I can tell, reload seems broken, since it does no real reload but always adds more pages.
    In this example, it breaks when you hit refresh 4 times.

    1) records 0 - 399 (4 pages)

    2) records 0 - 599 (6 pages)

    3) records 0 - 799 (8 pages)

    4) records 0 - 899 (9 pages)

    So it gets increased by 2 pages each time, except the 4th call, where there is just 1 more page, resulting to call the PageMap to get a range of 0, 0 which throws the error.

    As a "workaround", replace reload() with load(), but this defaults to reload the first page unless you manually pass the page number.

    Here are my overrides to show you the mentioned numbers (this is no fix!):
    Code:
        Ext.override(Ext.util.HashMap, {
            getCount: function() {
                console.log('HashMap, getCount', this.length);
                return this.length;
            },
    
            add: function(key, value) {
                 console.log('add', key, value);
    
                var me = this;
    
                // Need to check arguments length here, since we could have called:
                // map.add('foo', undefined);
                if (arguments.length === 1) {
                    value = key;
                    key = me.getKey(value);
                }
    
                if (me.containsKey(key)) {
                    return me.replace(key, value);
                }
    
                me.map[key] = value;
                ++me.length;
                me.generation++;
                if (me.hasListeners.add) {
                    me.fireEvent('add', me, key, value);
                }
                return value;
            }
        });
    
        Ext.override(Ext.data.Store, {
            reload: function(options) {
                var me = this,
                    startIdx,
                    endIdx,
                    startPage,
                    endPage,
                    i,
                    waitForReload,
                    bufferZone,
                    records,
                    count = me.getCount();
    
                if (!options) {
                    options = {};
                }
    
                // If buffered, we have to clear the page cache and then
                // cache the page range surrounding store's loaded range.
                if (me.buffered) {
                    // So that prefetchPage does not consider the store to be fully loaded if the local count is equal to the total count
                    delete me.totalCount;
    
                    waitForReload = function() {
                        if (me.rangeCached(startIdx, endIdx)) {
                            me.loading = false;
                            me.data.un('pageAdded', waitForReload);
                            records = me.data.getRange(startIdx, endIdx);
                            me.fireEvent('load', me, records, true);
                        }
                    };
                    bufferZone = Math.ceil((me.leadingBufferZone + me.trailingBufferZone) / 2);
    
                    console.log('bufferZone', bufferZone);
                    console.log('count', count);
    
                    // Get our record index range in the dataset
                    startIdx = options.start || (count ? me.getAt(0).index : 0);
    
                    console.log('startIdx', startIdx);
    
                    endIdx = startIdx + (options.count || (count ? count : me.pageSize)) - 1;
    
                    console.log('endIdx', endIdx);
    
                    // Calculate a page range which encompasses the Store's loaded range plus both buffer zones
                    startPage = me.getPageFromRecordIndex(Math.max(startIdx - bufferZone, 0));
                    endPage = me.getPageFromRecordIndex(endIdx + bufferZone);
    
                    console.log(startPage, endPage);
    
                    // Clear cache (with initial flag so that any listening BufferedRenderer does not reset to page 1).
                    me.data.clear(true);
    
                    if (me.fireEvent('beforeload', me, options) !== false) {
                        me.loading = true;
    
                        // Wait for the requested range to become available in the page map
                        // Load the range as soon as the whole range is available
                        me.data.on('pageAdded', waitForReload);
    
                        // Recache the page range which encapsulates our visible records
                        for (i = startPage; i <= endPage; i++) {
                            me.prefetchPage(i, options);
                        }
                    }
                } else {
                    return me.callParent(arguments);
                }
            }
        });
    Best regards
    tobiu
    Best regards
    Tobias Uhlig
    __________

    S-CIRCLES Social Network Engine

  4. #4
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    974
    Vote Rating
    108
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    I duplicated it here.
    http://www.sencha.com/forum/showthread.php?265513

    Please note that a store's reload also causes another JavaScript error with a non-buffered store, but with a bufferedrenderer plugin enabled.
    TypeError: Cannot call method 'indexOf' of undefined
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

  5. #5
    Sencha User
    Join Date
    Dec 2011
    Posts
    38
    Vote Rating
    0
    user ext is on a distinguished road

      0  

    Default


    in my case helped following code:
    Code:
     Ext.override(Ext.selection.Model,
     {
         isSelected: function(record)
         {
             if(Ext.isNumber(record))
             {
                 var count=this.store.getTotalCount() || this.store.getCount();
                 if(record>=count) { return false; }
             }
             record = Ext.isNumber(record) ? this.store.getAt(record) : record;
             return this.selected.contains(record);
         }
     }

  6. #6
    Sencha User
    Join Date
    Feb 2008
    Posts
    29
    Vote Rating
    1
    jbd007 is on a distinguished road

      0  

    Default Still broke

    Still broke


    Quote Originally Posted by user ext View Post
    in my case helped following code:
    Code:
     Ext.override(Ext.selection.Model,
     {
         isSelected: function(record)
         {
             if(Ext.isNumber(record))
             {
                 var count=this.store.getTotalCount() || this.store.getCount();
                 if(record>=count) { return false; }
             }
             record = Ext.isNumber(record) ? this.store.getAt(record) : record;
             return this.selected.contains(record);
         }
     }
    I'm still getting the error ... the grid scrolls/displays fine but I get the JS error and I can't 'select' any cells/rows? Any update on a fix for this?

  7. #7
    Sencha User
    Join Date
    Dec 2011
    Posts
    38
    Vote Rating
    0
    user ext is on a distinguished road

      0  

    Default


    Quote Originally Posted by jbd007 View Post
    I'm still getting the error ... the grid scrolls/displays fine but I get the JS error and I can't 'select' any cells/rows? Any update on a fix for this?
    You can check out some more fixes.
    Try these fixes:
    http://www.sencha.com/forum/showthre...oreHasSelected
    http://www.sencha.com/forum/showthre...-PageMap-error
    http://www.sencha.com/forum/showthread.php?256799

  8. #8
    Sencha User
    Join Date
    Feb 2008
    Posts
    29
    Vote Rating
    1
    jbd007 is on a distinguished road

      0  

    Default


    Yeah, none of that helps me ... the second link is the closest to what I'm seeing but that fix (nor the Model override) seem to stop the issue from happening .. I noticed this is still an open bug ... is Sencha trying to fix it?

  9. #9
    Sencha User
    Join Date
    Feb 2008
    Posts
    29
    Vote Rating
    1
    jbd007 is on a distinguished road

      0  

    Default Any updates???

    Any updates???


    Quote Originally Posted by jbd007 View Post
    Yeah, none of that helps me ... the second link is the closest to what I'm seeing but that fix (nor the Model override) seem to stop the issue from happening .. I noticed this is still an open bug ... is Sencha trying to fix it?
    Infinity grids are going to be useless to me if I can't use the cellclick event with them.

  10. #10
    Sencha User
    Join Date
    Feb 2008
    Posts
    29
    Vote Rating
    1
    jbd007 is on a distinguished road

      0  

    Default


    Quote Originally Posted by jbd007 View Post
    Infinity grids are going to be useless to me if I can't use the cellclick event with them.
    Ok, it's been 2 months and NO one else is having a problem with this? If I can't click cells on an infinity grid, what use are they? None of the suggested 'fixes' seem to work?