You found a bug! We've classified it as EXTJS-10249 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member
    Join Date
    Jun 2009
    Location
    Italy
    Posts
    12
    Vote Rating
    0
    mrjari is on a distinguished road

      0  

    Default Two Infinite Scrolling grids PageMap error

    Two Infinite Scrolling grids PageMap error


    REQUIRED INFORMATION


    Ext version tested:
    • Ext 4.2.0
    Browser versions tested against:
    • Chrome 26 (Windows)
    • IE9
    Description:
    • Two Infinte Scrolling in the same page generate the error: "PageMap asked for range which it does not have"
    Steps to reproduce the problem:
    • Put Two infinite scrolling grids side by side (must have different stores)
    • Let them load
    • Scroll one grid to the middle and let load
    • move the mouse over one grid to the other and back for some times
    • whatch the error
        • "PageMap asked for range which it does not have"

      in the console


    The result that was expected:
    • no thrown error on just mouseover events
    The result that occurs instead: error
        • "PageMap asked for range which it does not have"
    • in the console

    Test Case:

    http://jsfiddle.net/SksyS/2/



    HELPFUL INFORMATION


    Screenshot or Video:
    • See jsfiddle URL based on the infinite scrolling example for a live test case


    Debugging already done:
    • none
    Possible fix:
    • not provided
    Additional CSS used:
    • only default ext-all.css
    Operating System:
    • Windows 7
    *EDIT BY SLEMMON
    Issue observed in 4.2 and 4.2.1. Tested OK in 4.1.3.
    Make sure to scroll Grid A about half-way down and then mouseover both grids to predictably observe the error.
    Inline example:
    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;
                }
            }
        }
    });
    
    
    // create the Data Store
    var store2 = Ext.create('Ext.data.Store', {
        id: 'store2',
        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', {
        flex: 1,
        collapsible: true,
        title: 'ExtJS.com - Browse Forums 1',
        store: store,
        loadMask: true,
        selModel: {
            pruneRemoved: false
        },
        multiSelect: true,
        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
        },{
            text: "Last Post",
            dataIndex: 'lastpost',
            width: 130,
            renderer: Ext.util.Format.dateRenderer('n/j/Y g:i A'),
            sortable: true,
            groupable: false
        }]
    });
    
    
    
    
    var grid2 = Ext.create('Ext.grid.Panel', {
        flex: 1,
        collapsible: true,
        title: 'ExtJS.com - Browse Forums 2',
        store: store2,
        loadMask: true,
        selModel: {
            pruneRemoved: false
        },
        multiSelect: true,
        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
        },{
            text: "Last Post",
            dataIndex: 'lastpost',
            width: 130,
            renderer: Ext.util.Format.dateRenderer('n/j/Y g:i A'),
            sortable: true,
            groupable: false
        }]
    });
    
    
    Ext.widget('viewport', {
        layout: {
            type: 'hbox',
            align: 'stretch'
        },
        items: [grid, grid2]
    });
    Last edited by slemmon; 17 Jun 2013 at 3:08 PM. Reason: additional test notes

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,343
    Vote Rating
    197
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    I see the error when I run the example within JSFiddle, but if I take the code and put it into its own dedicate page I don't get an error with 4.2 or 4.2.1 Beta. Are you seeing this issue in the wild or just in JSFiddle?

  3. #3
    Sencha Premium Member
    Join Date
    Jun 2009
    Location
    Italy
    Posts
    12
    Vote Rating
    0
    mrjari is on a distinguished road

      0  

    Default


    Yes, I see the issue also in the application I'm developing, putting 2 grids side by side; that's why I recreated the problem in jsfiddle, to be sure it's not the context. I thought it's some shared object from the two buffered grids...

  4. #4
    Ext JS Premium Member
    Join Date
    Mar 2009
    Posts
    198
    Vote Rating
    2
    rspaeth is on a distinguished road

      0  

    Default


    I get the same issue when i have a tree panel next to an empty infinite grid. As i mouse from the tree (and the tree has an item selected) to over the grid i get the error. Debugging shows me that the code in processUIEvent has the item from the tree but the target is the grid.

    me = is the view of the infinite grid
    item = the selected item in the tree
    Code:
    record = me.getRecord(item);
    firefox moves on and continues to work. IE8 crashes from the Ext.Raise.

  5. #5
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,343
    Vote Rating
    197
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


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

    *sorry - don't know why I wasn't seeing the issue before when I tested outside of JSFiddle. I did find that if I didn't scroll about half-way down on Grid A that I wasn't getting the error. Don't know if that was a factor before or not, but I was able to reproduce the error predictably this time.

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

      0  

    Default


    Try this:

    Code:
    Ext.override(Ext.view.View, {
        handleMouseOverOrOut: function(e) {
            var me = this,
                isMouseout = e.type === 'mouseout',
                method = isMouseout ? e.getRelatedTarget : e.getTarget,
                nowOverItem = method.call(e, me.itemSelector) || method.call(e, me.dataRowSelector);
    
            // If the mouse event of whatever type tells use that we are no longer over the current mouseOverItem...
            if (!me.mouseOverItem || nowOverItem !== me.mouseOverItem) {
    
                // First fire mouseleave for the item we just left (If it is in this view)
                if (me.el.contains(me.mouseOverItem)) {
                    if (me.mouseOverItem) {
                        e.item = me.mouseOverItem;
                        e.newType = 'mouseleave';
                        me.handleEvent(e);
                    }
                }
    
                // If we are over an item *in this view*, fire the mouseenter
                if (me.el.contains(nowOverItem)) {
                    me.mouseOverItem = nowOverItem;
                    if (me.mouseOverItem) {
                        e.item = me.mouseOverItem;
                        e.newType = 'mouseenter';
                        me.handleEvent(e);
                    }
                }
            }
        }
    });

  7. #7
    Ext Premium Member Jan (HL)'s Avatar
    Join Date
    Aug 2010
    Location
    Germany
    Posts
    111
    Vote Rating
    9
    Jan (HL) will become famous soon enough

      0  

    Default


    After upgrading to Ext JS 4.2, I'm also becoming aware of the PageMap exceptions. Currently, I'm not able to catch the nasty one: Sometimes but not always some grids will errored (re)loading. So I'm looking for issues like that one.. I found this one.

    However, I have not multiple grids parallel displayed, but a TabPanel component with (a lot of) components where (infinite buffered) grids stayed.

    Should this be covered, too? Nevertheless I will check it our next monday.

    Also there is another thread regarding that exception at http://www.sencha.com/forum/showthre...464&viewfull=1 Is that the same or another issue and patch? Someone (http://www.sencha.com/forum/showthre...l=1#post979464) has provided a solution which seems to handle a completely different issue..?

  8. #8
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    975
    Vote Rating
    110
    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


    Quote Originally Posted by Animal View Post
    Try this:

    Code:
    Ext.override(Ext.view.View, {
        handleMouseOverOrOut: function(e) {
            var me = this,
                isMouseout = e.type === 'mouseout',
                method = isMouseout ? e.getRelatedTarget : e.getTarget,
                nowOverItem = method.call(e, me.itemSelector) || method.call(e, me.dataRowSelector);
    
            // If the mouse event of whatever type tells use that we are no longer over the current mouseOverItem...
            if (!me.mouseOverItem || nowOverItem !== me.mouseOverItem) {
    
                // First fire mouseleave for the item we just left (If it is in this view)
                if (me.el.contains(me.mouseOverItem)) {
                    if (me.mouseOverItem) {
                        e.item = me.mouseOverItem;
                        e.newType = 'mouseleave';
                        me.handleEvent(e);
                    }
                }
    
                // If we are over an item *in this view*, fire the mouseenter
                if (me.el.contains(nowOverItem)) {
                    me.mouseOverItem = nowOverItem;
                    if (me.mouseOverItem) {
                        e.item = me.mouseOverItem;
                        e.newType = 'mouseenter';
                        me.handleEvent(e);
                    }
                }
            }
        }
    });
    @Animal, thank you for the fix, but it turns out that it causes another issue.
    https://fiddle.sencha.com/#fiddle/3s1

    Please put the mouse in the column's header, then move the mouse to the first row => the row doesn't highlight.
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter