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
    10
    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
    4,769
    Vote Rating
    164
    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


    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
    10
    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
    1
    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
    4,769
    Vote Rating
    164
    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.

    *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,483
    Vote Rating
    35
    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
    972
    Vote Rating
    105
    Daniil is a glorious beacon of light Daniil is a glorious beacon of light Daniil is a glorious beacon of light Daniil is a glorious beacon of light Daniil is a glorious beacon of light Daniil is a glorious beacon of light

      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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar