Results 1 to 8 of 8

Thread: Problem when scrolling at the bottom of a grid with buffered store

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-10226 in a recent build.
  1. #1
    Sencha User
    Join Date
    Oct 2010
    Posts
    4

    Default Problem when scrolling at the bottom of a grid with buffered store

    REQUIRED INFORMATIONExt version tested:
    • Ext 4.2.1 rev 883
    Browser versions tested against:
    • Chrome 27
    • IE8
    • FF20 (firebug 1.11.4)
    • IE 10
    Description:
    • Problem when scrolling at the bottom of a grid with buffered store.
    Steps to reproduce the problem:
    • I started with the official Inifinite Scrolling example. I changed only the proxy of the store to point to a local service of mine. The service I implemented emulates exactly the http://www.sencha.com/forum/remote_topics/index.php. The only difference is that the total number of records must be 2000. If I scroll down at the bottom of the grid I get a javascript error. I imagine that the number has to do something with the error. With other total number i do not get this e.g. 2120
    Code:
        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',
                url: 'http://localhost/test/MyService.aspx',
                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'
            }
    Possible fix:
    • At method scroll() of Ext.view.NodeCache the two lines
    • for (i = 0; i < recCount; i++){
    • should change to
    • for (i = 0; i < newNodes.length; i++)
    *EDIT BY SLEMMON
    Issue observed on 4.2.1 with the below test case:
    Code:
    Ext.Loader.setConfig({
        enabled: true
    });
    Ext.Loader.setPath('Ext.ux', '../ux/');
    Ext.require(['*', 'Ext.ux.ajax.JsonSimlet', 'Ext.ux.ajax.SimManager']);
    Ext.define('BigDataSimlet', {
        extend: 'Ext.ux.ajax.JsonSimlet',
        data: [],
        numFields: 10,
        numRecords: 50 * 1000,
        groupSize: 1,
        getData: function (ctx) {
            var me = this,
                data = me.data,
                groupSize = ctx.params.groupSize || 1,
                group;
            if (data.length != me.numRecords || me.lastNumColumns != me.numFields || groupSize !== me.groupSize) {
                me.currentOrder = null;
                me.lastNumColumns = me.numFields;
                me.groupSize = groupSize;
                data.length = 0;
                for (var r = 0, k = me.numRecords; r < k; r++) {
                    group = Math.floor((r + groupSize) / groupSize);
                    var rec = {
                        id: 'rec-' + r
                    };
                    for (var i = 0; i < me.numFields; i++) {
                        if (groupSize > 1 && i === 0) {
                            rec['field' + i] = group;
                        } else {
                            rec['field' + i] = r;
                        }
                    }
                    data.push(rec);
                }
            }
            return this.callParent(arguments);
        }
    });
    Ext.onReady(function () {
        var viewport = null;
        var simlet = new BigDataSimlet(),
            center, storeCount = 0,
            summaryTypes = ['count', 'min', 'max', 'sum', 'average'],
            summaryTypeNames = ['count', 'min', 'max', 'sum', 'avg'];
        Ext.ux.ajax.SimManager.init({
            delay: 300
        }).register({
            localAjaxSimulator: simlet
        });
    
    
        function createStore(numFields, buffered, groupSize) {
            var fields = [],
                i, storeConfig;
            for (i = 0; i < numFields; ++i) {
                fields.push('field' + i);
            }
            simlet.numFields = numFields;
            storeConfig = {
                storeId: 'infinite-scroll-store-' + (storeCount++),
                remoteSort: buffered,
                // allow the grid to interact with the paging scroller by buffering
                buffered: buffered,
                fields: fields,
                proxy: {
                    // Simulating Ajax.
                    type: 'ajax',
                    url: 'localAjaxSimulator?groupSize=' + groupSize,
                    reader: {
                        root: 'topics',
                        totalProperty: 'totalCount'
                    }
                }
            };
            if (groupSize) {
                storeConfig.remoteGroup = buffered;
                storeConfig.groupField = 'field0';
            }
            return Ext.create('Ext.data.Store', storeConfig);
        }
    
    
        function createGrid(extraCfg) {
            var gridConfig = Ext.apply({
                title: 'Random data (' + simlet.numRecords + ' records)',
                border: false,
                loadMask: true,
                selModel: {
                    pruneRemoved: false
                },
                columnLines: true,
                multiSelect: true,
                tbar: [{
                    text: 'Reload',
                    handler: initializeGrid
                }],
                columns: [{
                    xtype: 'rownumberer',
                    width: 50,
                    sortable: false
                }]
            }, extraCfg);
            if (store.groupField) {
                gridConfig.features = [Ext.create('Ext.grid.feature.Grouping', {
                    showSummaryRow: true,
                    groupHeaderTpl: ['{columnName}: {name:this.groupName}', '<tpl if="rows.length">', ' ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})', '</tpl>', {
                        groupName: function (group) {
                            var rowIdx = (group - 1) * simlet.groupSize;
                            return groupColumnRenderer(rowIdx, null, null, rowIdx, 1);
                        }
                    }],
                    id: 'field0Grouping'
                })];
            }
            return Ext.create('Ext.grid.Panel', gridConfig);
        }
        var store = createStore(10, true),
            grid = createGrid({
                store: store
            });
    
    
        function makeLabel(ns, cls, name) {
            var docs = '../..';
            //docs = '../../../.build/sdk'; // for development/testing        
            return '<a href="' + docs + '/docs/#!/api/' + ns + '.' + cls + '-cfg-' + name + '" target="docs" tabIndex="-1">' + cls + ' ' + name + '</a>';
        }
        var controls = Ext.create('Ext.form.Panel', {
            region: 'north',
            split: true,
            bodyPadding: 5,
            layout: 'form',
            height: 375,
            defaults: {
                labelWidth: 205
            },
            items: [{
                xtype: 'numberfield',
                fieldLabel: 'Ajax latency (ms)',
                itemId: 'latency',
                value: 1000,
                minValue: 0,
                maxValue: 5000
            }, {
                xtype: 'numberfield',
                fieldLabel: 'Dataset row count',
                itemId: 'rowCount',
                value: 50000,
                minValue: 200
            }, {
                xtype: 'numberfield',
                fieldLabel: makeLabel('Ext.grid', 'BufferedRenderer', 'trailingBufferZone'),
                itemId: 'scrollerTrailingBufferZone',
                value: Ext.grid.plugin.BufferedRenderer.prototype.trailingBufferZone,
                maxValue: 100
            }, {
                xtype: 'numberfield',
                fieldLabel: makeLabel('Ext.grid', 'BufferedRenderer', 'leadingBufferZone'),
                itemId: 'scrollerLeadingBufferZone',
                value: Ext.grid.plugin.BufferedRenderer.prototype.leadingBufferZone,
                maxValue: 100,
                listeners: {
                    change: function (fld, newVal, oldVal) {
                        var nfeField = controls.down('#scrollerNumFromEdge');
                        nfeField.maxValue = newVal - 1;
                        if (nfeField.getValue() >= newVal) {
                            nfeField.setValue(newVal - 1);
                        }
                    },
                    buffer: 500
                }
            }, {
                xtype: 'numberfield',
                fieldLabel: makeLabel('Ext.grid', 'BufferedRenderer', 'numFromEdge'),
                itemId: 'scrollerNumFromEdge',
                value: Ext.grid.plugin.BufferedRenderer.prototype.numFromEdge,
                maxValue: Ext.data.Store.prototype.leadingBufferZone - 1
            }, {
                xtype: 'numberfield',
                fieldLabel: 'Num columns',
                itemId: 'numFields',
                value: 10,
                minValue: 1
            }, {
                xtype: 'checkboxfield',
                fieldLabel: makeLabel('Ext.data', 'Store', 'buffered'),
                itemId: 'buffered',
                value: 150,
                listeners: {
                    change: function (cb, checked) {
                        var pageSize = controls.down('#pageSize'),
                            storeTrailingBufferZone = controls.down('#storeTrailingBufferZone'),
                            storeLeadingBufferZone = controls.down('#storeLeadingBufferZone'),
                            purgePageCount = controls.down('#purgePageCount'),
                            scrollToLoadBuffer = controls.down('#scrollToLoadBuffer');
                        if (checked) {
                            pageSize.enable();
                            storeTrailingBufferZone.enable();
                            storeLeadingBufferZone.enable();
                            purgePageCount.enable();
                            scrollToLoadBuffer.enable();
                        } else {
                            pageSize.disable();
                            storeTrailingBufferZone.disable();
                            storeLeadingBufferZone.disable();
                            purgePageCount.disable();
                            scrollToLoadBuffer.disable();
                        }
                    }
                }
            }, {
                xtype: 'numberfield',
                fieldLabel: makeLabel('Ext.data', 'Store', 'pageSize'),
                itemId: 'pageSize',
                value: 150,
                disabled: true
            }, {
                xtype: 'numberfield',
                fieldLabel: makeLabel('Ext.data', 'Store', 'trailingBufferZone'),
                itemId: 'storeTrailingBufferZone',
                value: Ext.data.Store.prototype.trailingBufferZone,
                disabled: true
            }, {
                xtype: 'numberfield',
                fieldLabel: makeLabel('Ext.data', 'Store', 'leadingBufferZone'),
                itemId: 'storeLeadingBufferZone',
                value: Ext.data.Store.prototype.leadingBufferZone,
                disabled: true
            }, {
                xtype: 'numberfield',
                fieldLabel: makeLabel('Ext.data', 'Store', 'purgePageCount'),
                itemId: 'purgePageCount',
                value: Ext.data.Store.prototype.purgePageCount,
                minValue: 0,
                disabled: true
            }, {
                xtype: 'numberfield',
                fieldLabel: makeLabel('Ext.grid', 'BufferedRenderer', 'scrollToLoadBuffer'),
                itemId: 'scrollToLoadBuffer',
                value: Ext.grid.plugin.BufferedRenderer.prototype.scrollToLoadBuffer,
                minValue: 0,
                maxValue: 1000,
                listeners: {
                    change: function (f, newVal, oldVal) {
                        grid.verticalScroller.scrollToLoadBuffer = newVal;
                    }
                },
                disabled: true
            }],
            tbar: [{
                text: 'Reload',
                handler: initializeGrid
            }],
            listeners: {
                boxready: function (panel, width, height) {
                    panel.minHeight = height;
                }
            }
        });
    
    
        function columnRenderer(v, metadata, record, rowIdx, colIdx, store, view) {
            return 'col' + colIdx + ', row ' + v + '0.00';
        }
    
    
        function groupColumnRenderer(v, metadata, record, rowIdx, colIdx, store, view) {
            var groupSize = simlet.groupSize,
                group = Math.floor((rowIdx + groupSize) / groupSize),
                groupStart = (group - 1) * groupSize + 1,
                groupEnd = groupStart + (groupSize - 1);
            return 'rows ' + groupStart + ' to ' + groupEnd;
        }
    
    
        function initializeGrid() {
            var numFields = controls.down('#numFields').getValue(),
                columns = [{
                    xtype: 'rownumberer',
                    width: 50,
                    sortable: false
                }],
                i, rowCount = 2000,
                groupSize = 0,
                buffered = true,
                columnSpec;
            Ext.suspendLayouts();
            store.removeAll();
            grid.destroy();
            store.destroy();
            for (i = 0; i < numFields; ++i) {
                columnSpec = {
                    text: 'Field ' + (i + 1),
                    dataIndex: 'field' + i,
                    renderer: columnRenderer,
                    summaryType: summaryTypes[i % 5],
                    align: 'right',
                    summaryRenderer: function (value, cellValues, record, recordIndex, colIdx, store, view) {
                        cellValues.style = 'text-align:right';
                        return summaryTypeNames[(colIdx - 1) % 5] + ': ' + Ext.util.Format.number(value, '0.00');
                    }
                };
                if (i === 0 && groupSize > 1) {
                    delete columnSpec.summaryType;
                    delete columnSpec.summaryRenderer;
                    columnSpec.width = 150;
                    columnSpec.renderer = groupColumnRenderer;
                }
                columns.push(columnSpec);
            }
            simlet.numRecords = rowCount;
            store = createStore(numFields, buffered, groupSize);
            store.pageSize = 100;
            store.trailingBufferZone = 100;
            store.leadingBufferZone = 300;
            store.data.maxSize = store.purgePageCount = 5;
            grid = createGrid({
                title: 'Random data (' + simlet.numRecords + ' records)',
                store: store,
                columns: columns,
                plugins: [{
                    ptype: 'bufferedrenderer',
                    numFromEdge: controls.down('#scrollerNumFromEdge').getValue(),
                    trailingBufferZone: controls.down('#scrollerTrailingBufferZone').getValue(),
                    leadingBufferZone: controls.down('#scrollerLeadingBufferZone').getValue()
                }]
            });
            Ext.ux.ajax.SimManager.delay = controls.down('#latency').getValue();
            viewport.removeAll();
            viewport.add(grid);
            if (buffered) {
                // Load the first page. It will be diverted through the prefetch buffer.            
                store.loadPage(1);
            } else {
                store.load({
                    limit: rowCount
                });
            }
            Ext.resumeLayouts(true);
        }
        viewport = new Ext.Viewport({
            layout: {
                type: 'fit',
                padding: 5
            },
            items: [grid]
        })
    });
    Last edited by slemmon; 4 Jul 2013 at 8:20 AM. Reason: inline test case

  2. #2
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165

    Default

    Are you seeing the error if you use the infinite-grid-scroller-tuner page from the examples folder in the downloaded SDK? I tried setting the records to 2000 with and without the store being buffered and wasn't seeing the error. Wondered if I was just doing something wrong when trying to recreate the error perhaps.

  3. #3
    Sencha User
    Join Date
    Oct 2010
    Posts
    4

    Default Example that reproduces the error

    Slemmon hello, thank you for your reply.

    Indeed I could not reproduce the error in the example you mention, but then I changed the layout of the page: I removed the border layout and I put only the grid in the viewport. I also hardcoded the parameters of the buffered store:
    rowCount = 2000,
    groupSize = 0,
    buffered = true,
    store.pageSize = 100;
    store.trailingBufferZone = 100;
    store.leadingBufferZone = 300;

    Now the error is reproducable. It may have to do with the parent's (of the grid) layout. I post the modified code. Just hit "Reload" and scroll to bottom.

    Thank you in advance

    Code:
    Ext.Loader.setConfig({enabled: true});
    
    
    Ext.Loader.setPath('Ext.ux', '../ux/');
    
    
    Ext.require([
        '*',
        'Ext.ux.ajax.JsonSimlet',
        'Ext.ux.ajax.SimManager'
    ]);
    
    
    Ext.define('BigDataSimlet', {
        extend: 'Ext.ux.ajax.JsonSimlet',
    
    
        data: [],
        numFields: 10,
        numRecords: 50*1000,
        groupSize: 1,
    
    
        getData: function (ctx) {
            var me = this,
                data = me.data,
                groupSize = ctx.params.groupSize || 1,
                group;
    
    
            if (data.length != me.numRecords || me.lastNumColumns != me.numFields || groupSize !== me.groupSize) {
                me.currentOrder = null;
                me.lastNumColumns = me.numFields;
                me.groupSize = groupSize;
    
    
                data.length = 0;
                for (var r = 0, k = me.numRecords; r < k; r++) {
                    group = Math.floor((r + groupSize) / groupSize);
                    var rec = {
                        id: 'rec-' + r
                    };
                    for (var i = 0; i < me.numFields; i++) {
                        if (groupSize > 1 && i === 0) {
                            rec['field' + i] = group;
                        } else {
                            rec['field' + i] = r;
                        }
                    }
                    data.push(rec);
                }
            }
    
    
            return this.callParent(arguments);
        }
    });
    
    
    Ext.onReady(function() {
            
        var viewport = null;
        var simlet = new BigDataSimlet(),
            center,
            storeCount = 0,
            summaryTypes = ['count', 'min', 'max', 'sum', 'average'],
            summaryTypeNames = ['count', 'min', 'max', 'sum', 'avg'];
    
    
        Ext.ux.ajax.SimManager.init({
            delay: 300
        }).register({
            localAjaxSimulator: simlet
        });
    
    
        function createStore (numFields, buffered, groupSize) {
            var fields = [],
                i, storeConfig;
    
    
            for (i = 0; i < numFields; ++i) {
                fields.push('field' + i);
            }
    
    
            simlet.numFields = numFields;
            storeConfig = {
                storeId: 'infinite-scroll-store-' + (storeCount++),
                remoteSort: buffered,
                
                // allow the grid to interact with the paging scroller by buffering
                buffered: buffered,
                fields: fields,
                proxy: {
                    // Simulating Ajax.
                    type: 'ajax',
                    url: 'localAjaxSimulator?groupSize=' + groupSize,
                    reader: {
                        root: 'topics',
                        totalProperty: 'totalCount'
                    }
                }
            };
            if (groupSize) {
                storeConfig.remoteGroup = buffered;
                storeConfig.groupField = 'field0';
            }
            return Ext.create('Ext.data.Store', storeConfig);
        }
    
    
        function createGrid(extraCfg) {
            var gridConfig = Ext.apply({
                title: 'Random data (' + simlet.numRecords + ' records)',
                border: false,
                loadMask: true,
                selModel: {
                    pruneRemoved: false
                },
                columnLines: true,
                multiSelect: true,
                tbar: [
                    {
                        text: 'Reload',
                        handler: initializeGrid
                    }
                ],
                columns: [{
                    xtype: 'rownumberer',
                    width: 50,
                    sortable: false
                }]
            }, extraCfg);
    
    
            if (store.groupField) {
                gridConfig.features = [
                    Ext.create('Ext.grid.feature.Grouping', {
                        showSummaryRow: true,
                        groupHeaderTpl: [
                            '{columnName}: {name:this.groupName}',
                            '<tpl if="rows.length">',
                                ' ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})',
                            '</tpl>',
                            {
                                groupName: function(group) {
                                    var rowIdx = (group - 1) * simlet.groupSize;
                                    return groupColumnRenderer(rowIdx, null, null, rowIdx, 1);
                            }
                        }],
                        id: 'field0Grouping'
                    })
                ];
            }
    
    
            return Ext.create('Ext.grid.Panel', gridConfig);
        }
    
    
        var store = createStore(10, true),
            grid = createGrid({
                store: store
            });
    
    
        function makeLabel (ns, cls, name) {
            var docs = '../..';
            //docs = '../../../.build/sdk'; // for development/testing
            return '<a href="'+docs+'/docs/#!/api/'+ns+'.'+cls+'-cfg-'+name+'" target="docs" tabIndex="-1">' + cls + ' ' + name + '</a>';
        }
    
    
        var controls = Ext.create('Ext.form.Panel', {
            region: 'north',
            split: true,
            bodyPadding: 5,
            layout: 'form',
            height: 375,
            defaults: {
                labelWidth: 205
            },
            items: [{
                xtype: 'numberfield',
                fieldLabel: 'Ajax latency (ms)',
                itemId: 'latency',
                value: 1000,
                minValue: 0,
                maxValue: 5000
            }, {
                xtype: 'numberfield',
                fieldLabel: 'Dataset row count',
                itemId: 'rowCount',
                value: 50000,
                minValue: 200
            }, {
                xtype: 'numberfield',
                fieldLabel: makeLabel('Ext.grid', 'BufferedRenderer', 'trailingBufferZone'),
                itemId: 'scrollerTrailingBufferZone',
                value: Ext.grid.plugin.BufferedRenderer.prototype.trailingBufferZone,
                maxValue: 100
            }, {
                xtype: 'numberfield',
                fieldLabel: makeLabel('Ext.grid', 'BufferedRenderer', 'leadingBufferZone'),
                itemId: 'scrollerLeadingBufferZone',
                value: Ext.grid.plugin.BufferedRenderer.prototype.leadingBufferZone,
                maxValue: 100,
                listeners: {
                    change: function(fld, newVal, oldVal) {
                        var nfeField = controls.down('#scrollerNumFromEdge');
                        nfeField.maxValue = newVal - 1;
                        if (nfeField.getValue() >= newVal) {
                            nfeField.setValue(newVal - 1);
                        }
                    },
                    buffer: 500
                }
            }, {
                xtype: 'numberfield',
                fieldLabel: makeLabel('Ext.grid', 'BufferedRenderer', 'numFromEdge'),
                itemId: 'scrollerNumFromEdge',
                value: Ext.grid.plugin.BufferedRenderer.prototype.numFromEdge,
                maxValue: Ext.data.Store.prototype.leadingBufferZone - 1
            }, {
                xtype: 'numberfield',
                fieldLabel: 'Num columns',
                itemId: 'numFields',
                value: 10,
                minValue: 1
            }, {
                xtype: 'checkboxfield',
                fieldLabel: makeLabel('Ext.data', 'Store', 'buffered'),
                itemId: 'buffered',
                value: 150,
                listeners: {
                    change: function(cb, checked) {
                        var pageSize = controls.down('#pageSize'),
                            storeTrailingBufferZone = controls.down('#storeTrailingBufferZone'),
                            storeLeadingBufferZone = controls.down('#storeLeadingBufferZone'),
                            purgePageCount = controls.down('#purgePageCount'),
                            scrollToLoadBuffer = controls.down('#scrollToLoadBuffer');
    
    
                        if (checked) {
                            pageSize.enable();
                            storeTrailingBufferZone.enable();
                            storeLeadingBufferZone.enable();
                            purgePageCount.enable();
                            scrollToLoadBuffer.enable();
                        } else {
                            pageSize.disable();
                            storeTrailingBufferZone.disable();
                            storeLeadingBufferZone.disable();
                            purgePageCount.disable();
                            scrollToLoadBuffer.disable();
                        }
                    }
                }
            }, {
                xtype: 'numberfield',
                fieldLabel: makeLabel('Ext.data', 'Store', 'pageSize'),
                itemId: 'pageSize',
                value: 150,
                disabled: true
            }, {
                xtype: 'numberfield',
                fieldLabel: makeLabel('Ext.data', 'Store', 'trailingBufferZone'),
                itemId: 'storeTrailingBufferZone',
                value: Ext.data.Store.prototype.trailingBufferZone,
                disabled: true
            }, {
                xtype: 'numberfield',
                fieldLabel: makeLabel('Ext.data', 'Store', 'leadingBufferZone'),
                itemId: 'storeLeadingBufferZone',
                value: Ext.data.Store.prototype.leadingBufferZone,
                disabled: true
            }, {
                xtype: 'numberfield',
                fieldLabel: makeLabel('Ext.data', 'Store', 'purgePageCount'),
                itemId: 'purgePageCount',
                value: Ext.data.Store.prototype.purgePageCount,
                minValue: 0,
                disabled: true
            }, {
                xtype: 'numberfield',
                fieldLabel: makeLabel('Ext.grid', 'BufferedRenderer', 'scrollToLoadBuffer'),
                itemId: 'scrollToLoadBuffer',
                value: Ext.grid.plugin.BufferedRenderer.prototype.scrollToLoadBuffer,
                minValue: 0,
                maxValue: 1000,
                listeners: {
                    change: function(f, newVal, oldVal) {
                        grid.verticalScroller.scrollToLoadBuffer = newVal;
                    }
                },
                disabled: true
            }],
            tbar: [{
                text: 'Reload',
                handler: initializeGrid
            }],
            listeners: {
                boxready: function(panel, width, height) {
                    panel.minHeight = height;
                }
            }
        });
    
    
        function columnRenderer(v, metadata, record, rowIdx, colIdx, store, view) {
            return 'col' + colIdx + ', row ' + v + '0.00';
        }
    
    
        function groupColumnRenderer(v, metadata, record, rowIdx, colIdx, store, view) {
            var groupSize = simlet.groupSize,
                group = Math.floor((rowIdx + groupSize) / groupSize),
                groupStart = (group - 1) * groupSize + 1,
                groupEnd = groupStart + (groupSize - 1);
                
                return 'rows ' + groupStart + ' to ' + groupEnd;
        }
    
    
        function initializeGrid () {
            var numFields = controls.down('#numFields').getValue(),
                columns = [{
                    xtype: 'rownumberer',
                    width: 50,
                    sortable: false
                }],
                i,
                rowCount = 2000,
                groupSize = 0,
                buffered = true,
                columnSpec;
    
    
            Ext.suspendLayouts();
            store.removeAll();
            grid.destroy();
            store.destroy();
    
    
            for (i = 0; i < numFields; ++i) {
                columnSpec = {
                    text: 'Field ' + (i+1),
                    dataIndex: 'field' + i,
                    renderer: columnRenderer,
                    summaryType: summaryTypes[i % 5],
                    align: 'right',
                    summaryRenderer: function(value, cellValues, record, recordIndex, colIdx, store, view) {
                        cellValues.style = 'text-align:right';
                        return summaryTypeNames[(colIdx - 1) % 5] + ': ' + Ext.util.Format.number(value, '0.00');
                    }
                };
                if (i === 0 && groupSize > 1) {
                    delete columnSpec.summaryType;
                    delete columnSpec.summaryRenderer;
                    columnSpec.width = 150;
                    columnSpec.renderer = groupColumnRenderer;
                }
                columns.push(columnSpec);
            }
    
    
            simlet.numRecords = rowCount;
            store = createStore(numFields, buffered, groupSize);
    
    
            store.pageSize = 100;
            store.trailingBufferZone = 100;
            store.leadingBufferZone = 300;
            store.data.maxSize = store.purgePageCount = 5;
    
    
            grid = createGrid({
                title: 'Random data (' + simlet.numRecords + ' records)',
                store: store,
                columns: columns,
                plugins: [{
                    ptype: 'bufferedrenderer',
                    numFromEdge: controls.down('#scrollerNumFromEdge').getValue(),
                    trailingBufferZone: controls.down('#scrollerTrailingBufferZone').getValue(),
                    leadingBufferZone: controls.down('#scrollerLeadingBufferZone').getValue()
                }]
            });
    
    
            Ext.ux.ajax.SimManager.delay = controls.down('#latency').getValue();
    
    
            viewport.removeAll();
            viewport.add(grid);
    
    
            if (buffered) {
                // Load the first page. It will be diverted through the prefetch buffer.
                store.loadPage(1);
            } else {
                store.load({
                    limit: rowCount
                });
            }
            Ext.resumeLayouts(true);
        }
    
    
        viewport = new Ext.Viewport({
            layout: {
                type: 'fit',
                padding: 5
            },
            items: [
                grid
            ]
        })
    });

  4. #4

    Default

    I think you have exactly the same problem as I have:

    http://www.sencha.com/forum/showthre...-total-records

    Can you confirm the correlation between the page size and the total amount of records?

  5. #5
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165

    Default

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

  6. #6
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    1,018

    Default

    Probably, this problem has the same root.
    http://www.sencha.com/forum/showthread.php?266708

    But I am getting a bit different results, so, reported in a separate thread.
    Object.NET
    Frameworks and Tools for .NET Developers
    --------------------------------------------------
    Ext.NET - Ext JS for ASP.NET - Examples | Twitter
    Bridge.NET - Write C#. Run JavaScript! - Live | Twitter
    --------------------------------------------------

  7. #7
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    France
    Posts
    22

    Default

    I have the same problem, if number of results equals pageSize, I have an error "Uncaught NotFoundError: Failed to execute 'appendChild' on 'Node': The new child element is null." and the grid doesn't finish to load. Is there any solution/workaround?

  8. #8
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    France
    Posts
    22

    Default

    No workaround? :/

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
  •