This issue duplicates another issue.
  1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    59
    Vote Rating
    4
    timTaylor is on a distinguished road

      1  

    Default PageMap getRange strange behaviour

    PageMap getRange strange behaviour


    i do have a buffered store (infinite scrolling with >10.000 records).
    so far it works fine as long there are records in the store.
    if there are no records i get the exception
    Code:
    "Uncaught Ext.Base.getRange(): PageMap asked for range which it does not have"
    examining the source
    Code:
            getRange: function(start, end) {
                if (!this.hasRange(start, end)) {
                    Ext.Error.raise('PageMap asked for range which it does not have');
                }
    leads me to the thought, that an empty result from the server - no records - could never have a start or an and.
    is this a bug or is there a workaround for it or is there something i just don't know about the new usage of an infinite scrolling grid?

    please help. stuck with this problem around two weeks now :-(
    new to ExtJS

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,387
    Vote Rating
    201
    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


    Is your buffered grid set up like what you see in this example?
    http://docs.sencha.com/ext-js/4-2/ex...te-scroll.html

    If not, can you post a snippet of how your grid is set up? I'm having trouble reproducing the error you're getting (I'm testing with 4.2).

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    59
    Vote Rating
    4
    timTaylor is on a distinguished road

      1  

    Default


    slemmon, thanks for trying to help me!!
    enclosed you will find all relevant code parts.

    my data model:
    Code:
    Ext.define('AAA.ActivityLogModel',
        {
            extend:'Ext.data.Model',
            fields:[
                {name:'id'},
                {name:'sUser'},
                {name:'sUsergroup'},
                {name:'requestCommand'},
                {name:'moduleId'},
                {name:'moduleAction'},
                {name:'modulePanelId'},
                {name:'modulePanelAction'},
                {name:'postDataArr'},
                {name:'getDataArr'},
                {name:'permId'},
                {name:'permRead'},
                {name:'permNew'},
                {name:'permEdit'},
                {name:'permDelete'},
                {name:'timestamp'},
                {name:'errorArr'}
            ]
        });
    my store:
    Code:
     this._store = Ext.create('Ext.data.Store',
     {
         storeId: 'ActivityLogStore',
         model: 'AAAA.ActivityLogModel',
         autoDestroy: true,
         buffered: true,
         remoteSort: true,
         leadingBufferZone: 300,
         pageSize: 100,
         autoLoad: true,
         proxy: {
             type: 'ajax',
             url: '~activitylogmanager_getAllActivityLogs~',
             reader: {
                 root: 'data[0].sActivityLogsArr',
                 totalProperty: 'data[0].totalcount'
             },
             // sends single sort & single group as multi parameter. for some reason the grid cannot sort on more than one field, so grouping === sorting
             simpleSortMode: true,
             simpleGroupMode: true,
             groupParam: 'sort',
             groupDirectionParam: 'dir',
             // Parameter name to send filtering information in
             filterParam: 'searchString',
    
    
             // The PHP script just use query=<whatever>
             encodeFilters: function (filters)
             {
                 return filters[0].value;
             }
         },
    
    
         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;
                 }
             },
    
    
             beforeload: function ()
             {
                 // remove any selections - otherwise store loading crashes
                 var grid = Ext.getCmp('activityLogmanagergrid');
                 if (grid)
                 {
                     var sm = grid.getSelectionModel();
                     if (sm)
                     {
                         sm.clearSelections();
                     }
                 }
             },
    
    
             // 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;
                 }
             },
             prefetch: function (theStore, records, successful, dataOperation, eOpts)
             {
                 //console.log("onPrefetch");
                 var jsonData = scope._store.proxy.reader.jsonData;
                 scope.config.eventDispatcher.DispatchEvent(AAAA.LoggerEvent.ADD_LOG, 'logMsgArr:');
                 scope.config.eventDispatcher.DispatchEvent(AAAA.LoggerEvent.ADD_LOG, jsonData.logMsgArr, scope.config.instanceName);
                 if (jsonData.errorMsgStr != '')
                 {
                     scope.config.eventDispatcher.DispatchEvent(AAAA.LoggerEvent.ADD_LOG, '@error@' + jsonData.errorMsgStr, scope.config.instanceName);
                 }
                 var count = jsonData.data[0].totalcountUnlimited;
                 scope._moduleStatusbar.setStatus(
                 {
                     text: count + ' @entries@'
                 });
             },
             load: function (store)
             {
                 Ext.getCmp('activityLogmanagergrid').verticalScroller.scrollTo(0);
             }
         }
     });
    my toolbar and statusbar
    Code:
     this._moduleToolbar = {
         xtype: 'toolbar',
         itemId: 'activityLogmanagerToolbar',
         items: [
             {
                 iconCls: 'icon-arrow_refresh',
                 text: '@menu_reload@',
                 itemId: 'btnReload',
                 scope: this,
                 handler: function ()
                 {
                     // reset list display to top to avoid corrupted display
                     //Ext.getCmp('activityLogmanagergrid').store.load();
                     scope.reloadStore();
                 }
             },
             {
                 iconCls: 'icon-cross',
                 text: '@menu_deleteAllActivityLog@',
                 itemId: 'btnDeleteAll',
                 scope: this,
                 handler: this.DeleteAllActivityLog
             },
                 '->',
             {
                 width: 300,
                 fieldLabel: 'Search',
                 labelWidth: 50,
                 xtype: 'searchfield',
                 store: scope._store
             }
         ]
     };
    
    
     this._moduleStatusbar = Ext.create('Ext.ux.StatusBar',
     {
         id: 'activityLogmanagerStatusbar',
         // defaults to use when the status is cleared:
         defaultText: '',
         defaultIconCls: 'default-icon',
         // values to set initially:
         text: '',
         iconCls: 'ready-icon'
     });
    my grid (exactly same setup as in the example)
    Code:
    this._activityLogListPanel = Ext.create('Ext.panel.Panel',
    {
        layout: {
            type: 'fit'
        },
        flex: 1,
        border: false,
        listeners: {
            resize: function ()
            {
                AAAA.ActivityLogManager._activityLogListPanel.doLayout();
            }
        },
        bbar: this._moduleStatusbar,
        items: [
            {
                xtype: "gridpanel",
                id: 'activityLogmanagergrid',
                store: this._store,
                loadMask: true,
                selModel: {
                    pruneRemoved: false
                },
                multiSelect: true,
                columnLines: true,
    
    
                viewConfig: {
                    // infinite scroller config-part
                    trackOver: false
                },
                features: [
                    {
                        ftype: 'grouping',
                        hideGroupedHeader: false
                    }
                ],
                emptyText: 'No Matching Records',
                listeners: {
                    /**
                     * Event: beforeitemdblclick is dispatched on double cklicking a row
                     */
                    beforeitemdblclick: function (thePanel, theRecord)
                    {
                        //console.log('beforeitemdblclick', arguments);
                        scope.OpenDetailWindow(theRecord);
                    },
    
    
                    /**
                     * Event: itemcontextmenu is dispatched on right mousebutton click
                     */
                    itemcontextmenu: function (__this, theRecord, HTMLElementItem, index, eventObject, eOptsObject)
                    {
                        eventObject.stopEvent();
                        //scope._mnuContext.setRecordIndex(index);
                        scope._mnuContext.setDataObj(theRecord);
                        scope._mnuContext.showAt(eventObject.xy);
                    }
                },
                columns: [
                    {
                        xtype: 'rownumberer',
                        width: 50,
                        sortable: false
                    },
                    {
                        text: 'timestamp',
                        dataIndex: 'timestamp',
                        width: AAAA.FieldDimensions.timestamp
                    },
                    {
                        text: 'id',
                        dataIndex: 'id',
                        width: AAAA.FieldDimensions.id
                    },
                    {
                        text: 'sUser',
                        dataIndex: 'sUser'
                    },
                    {
                        text: 'sUsergroup',
                        dataIndex: 'sUsergroup'
                    },
                    {
                        text: 'requestCommand',
                        dataIndex: 'requestCommand'
                    },
                    {
                        text: 'moduleId',
                        dataIndex: 'moduleId'
                    },
                    {
                        text: 'moduleAction',
                        dataIndex: 'moduleAction'
                    },
                    {
                        text: 'modulePanelId',
                        dataIndex: 'modulePanelId'
                    },
                    {
                        text: 'modulePanelAction',
                        dataIndex: 'modulePanelAction'
                    },
                    {
                        text: 'postDataArr',
                        dataIndex: 'postDataArr'
                    },
                    {
                        text: 'getDataArr',
                        dataIndex: 'getDataArr'
                    },
                    {
                        text: 'permId',
                        dataIndex: 'permId'
                    },
                    {
                        text: 'permRead',
                        dataIndex: 'permRead'
                    },
                    {
                        text: 'permNew',
                        dataIndex: 'permNew'
                    },
                    {
                        text: 'permEdit',
                        dataIndex: 'permEdit'
                    },
                    {
                        text: 'permDelete',
                        dataIndex: 'permDelete'
                    },
                    {
                        text: 'errorArr',
                        dataIndex: 'errorArr'
                    }
                ]
            }
        ]
    });
    
    
    /**
     * THE GRID PANEL
     */
    this._gridPanel = Ext.create('Ext.panel.Panel',
    {
        xtype: "panel",
        layout: {
            // stretch the childs to fit
            align: 'stretch',
            type: 'hbox'
        },
    
    
        defaults: {
            autoScroll: true
        },
    
    
        dockedItems: [scope._moduleToolbar],
        items: [
                scope._activityLogListPanel
        ]
    
    
    });
    a "non-empty" request-result example (displays without any problem in the grid):
    Code:
    {
        "success": true,
        "cXerrorArr": [],
        "logMsgArr": [
            {
                "msg": "<pre>classes excluded from logging @ index.php:<\/pre>",
                "classname": null,
                "uservalue": "Array\n(\n    [0] => CXSession\n    [1] => CXDb\n)\n",
                "timestamp": "2013-04-06 07:47:13"
            }
        ],
        "errorMsgStr": "",
        "javascript": "",
        "html": "",
        "data": [
            {
                "totalcountUnlimited": 2,
                "totalcount": 2,
                "sActivityLogsArr": [
                    {
                        "id": "501",
                        "sUser": "{\"id\":1,\"nickname\":\"alex\",\"password\":\"****\",\"active\":0,\"type\":2,\"lastLoginDate\":\"2012-04-15 00:45:00\",\"sUsergroup\":{\"id\":10,\"name\":\"Entwickler\"},\"logActivity\":0}",
                        "sUsergroup": "{\"id\":10,\"name\":\"Entwickler\"}",
                        "requestCommand": "getDesktopModules",
                        "moduleId": "",
                        "moduleAction": "",
                        "modulePanelId": "",
                        "modulePanelAction": "",
                        "postDataArr": "{\"moduleId\":\"boot\",\"alreadyLoadedClassesArr\":\"[]\"}",
                        "getDataArr": "[]",
                        "permId": 0,
                        "permRead": false,
                        "permNew": false,
                        "permEdit": false,
                        "permDelete": false,
                        "timestamp": "2013-04-06 09:47:13",
                        "errorArr": "[]"
                    },
                    {
                        "id": "502",
                        "sUser": "{\"id\":1,\"nickname\":\"alex\",\"password\":\"****\",\"active\":0,\"type\":2,\"lastLoginDate\":\"2012-04-15 00:45:00\",\"sUsergroup\":{\"id\":10,\"name\":\"Entwickler\"},\"logActivity\":0}",
                        "sUsergroup": "{\"id\":10,\"name\":\"Entwickler\"}",
                        "requestCommand": "getDesktopModules",
                        "moduleId": "",
                        "moduleAction": "",
                        "modulePanelId": "",
                        "modulePanelAction": "",
                        "postDataArr": "{\"moduleId\":\"activitylogmanager\",\"alreadyLoadedClassesArr\":\"[\\\"ASDB.CLogger\\\",\\\"ASDB.CDesktopMenu\\\"]\"}",
                        "getDataArr": "[]",
                        "permId": 0,
                        "permRead": false,
                        "permNew": false,
                        "permEdit": false,
                        "permDelete": false,
                        "timestamp": "2013-04-06 09:47:13",
                        "errorArr": "[]"
                    }
                ]
            }
        ]
    }
    a "empty" request-result example (crashes with the exception "Uncaught Ext.Base.getRange(): PageMap asked for range which it does not have"):
    Code:
    {
        "success": true,
        "cXerrorArr": [],
        "logMsgArr": [
            {
                "msg": "<pre>classes excluded from logging @ index.php:<\/pre>",
                "classname": null,
                "uservalue": "Array\n(\n    [0] => CXSession\n    [1] => CXDb\n)\n",
                "timestamp": "2013-04-06 07:54:45"
            },
            {
                "msg": "<pre>searchString: 'foobar'<\/pre>",
                "classname": "CActivityLogSQL",
                "uservalue": "",
                "timestamp": "2013-04-06 07:54:45"
            },
            {
                "msg": "<pre>searchString: 'foobar'<\/pre>",
                "classname": "CActivityLogSQL",
                "uservalue": "",
                "timestamp": "2013-04-06 07:54:45"
            }
        ],
        "errorMsgStr": "",
        "javascript": "",
        "html": "",
        "data": [
            {
                "totalcountUnlimited": 0,
                "totalcount": 0,
                "sActivityLogsArr": []
            }
        ]
    }
    new to ExtJS

  4. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,387
    Vote Rating
    201
    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


    Hi,
    I'm trying to boil down your test case and there's quite a bit of application specific code there.
    Any chance you can recreate the issue you're seeing using just a simple test case?
    I grabbed the code form the infinite grid from the Sencha examples page and passed empty data back to it and wasn't seeing the error, but thought perhaps I'm missing a nuance of what you're doing in your app?

    test JSON
    Code:
    {
        "success": true,
        "totalCount": 2,
        "data": []
    }
    test Code
    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: 'ajax',
            url: 'data/json.json',
            reader: {
                root: 'data',
                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,
        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()
    });

  5. #5
    Sencha User
    Join Date
    Jan 2012
    Posts
    59
    Vote Rating
    4
    timTaylor is on a distinguished road

      0  

    Default


    hi,
    thanks for your effort!! i'll try to implement your example into my app environment.
    on thing i'm surely don't have is some kind of an idProperty in my model.
    new to ExtJS

  6. #6
    Sencha User
    Join Date
    Jan 2012
    Posts
    59
    Vote Rating
    4
    timTaylor is on a distinguished road

      0  

    Default


    ok, adding
    Code:
    idProperty: 'id'
    to my model doesn't fix the problem.
    new to ExtJS

  7. #7
    Ext JS Premium Member corcoranp's Avatar
    Join Date
    Apr 2007
    Location
    Pleasant Grove, AL
    Posts
    25
    Vote Rating
    3
    corcoranp is on a distinguished road

      1  

    Default Same issue...

    Same issue...


    Any luck resolving this problem? I'm getting the same error when there are no records returned from the server?
    Peter M Corcoran

    ExtJs Developer since 2007
    www.corcoranp.com
    http://www.linkedin.com/in/corcoranp

  8. #8
    Sencha User
    Join Date
    Jan 2012
    Posts
    59
    Vote Rating
    4
    timTaylor is on a distinguished road

      0  

    Default


    no, didn't resolve it.
    new to ExtJS

  9. #9
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,387
    Vote Rating
    201
    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


    @timTaylor
    What version of ExtJS are you using?

  10. #10
    Sencha User
    Join Date
    Jan 2012
    Posts
    59
    Vote Rating
    4
    timTaylor is on a distinguished road

      0  

    Default


    Quote Originally Posted by slemmon View Post
    @timTaylor
    What version of ExtJS are you using?
    ext-4.2.0.663
    new to ExtJS