Results 1 to 7 of 7

Thread: [Ext 5.1.0] Locked Infinite scroll breaks when scrolling down fast

    Looks like we cannot reproduce this. Please provide another test case to reproduce this issue.
  1. #1
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,199

    Default [Ext 5.1.0] Locked Infinite scroll breaks when scrolling down fast

    When scrolling down in Chrome very fast from top to bottom, I see errors in the debugger.

    reproducible here:
    http://dev.sencha.com/extjs/5.1.0/ex...te-scroll.html

    cannot read 'isNonData' of undefined.

    Below same situation of something one of our users reported (ExtJs4) - refresh the 'normal' view of a lockedGrid after prefetch. This breaks in Ext4.2 when setting a pageSize of 50 (100 will do). ExtJs 5 seems more stable, but still breaks quickly on isNonData when scrolling a bit up and down.

    Would be nice if this would be more error-proof

    Code:
    Ext.onReady(function(){
    
        Ext.define('MyResource', {
            extend: 'Ext.data.Model',
            fields: [
                { name : 'Name', mapping : 'username' },
                { name : 'Id', mapping : 'threadid', type : 'int'}
            ]
        });
    
        var loadData = new Ext.util.DelayedTask(function () {
            console.log('loaddata');
            grid.normalGrid.view.refresh();
        });
    
        var resourceStore = Ext.create('Ext.data.BufferedStore', {
            model: 'MyResource',
            remoteGroup: true,
            buffered: true,
            leadingBufferZone: 300,
            pageSize: 50,
            proxy: {
                type: 'jsonp',
                url: 'http://www.sencha.com/forum/remote_topics/index.php',
                reader: {
                    rootProperty: 'topics',
                    totalProperty: 'totalCount'
                },
                groupParam: 'sort',
                groupDirectionParam: 'dir'
            },
            autoLoad: true,
            listeners: {
                prefetch : function (store, records, successfull, operation) {
                    loadData.delay(100);
                }
            }
        });
    
        var grid = Ext.create('Ext.grid.Panel', {
            width: 700,
            height: 500,
            store: resourceStore,
            loadMask: true,
            columns:[{
                text: 'Id',
                dataIndex : 'Id',
                width: 50,
                locked : true,
                sortable: false
            }, {
                text : "Author",
                dataIndex : 'Name',
                width : 100,
                sortable : true
            }],
    
            renderTo: Ext.getBody()
        });
    });

  2. #2
    Sencha Premium User SebTardif's Avatar
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    1,296

    Default

    I get this:
    Code:
    Uncaught TypeError: Cannot read property 'childrenArray' of undefined ext-all.js:19 
    Ext.cmd.derive.scroll ext-all.js:19 
    Ext.cmd.derive.onRangeFetched ext-all.js:19 
    store.getRange.callback ext-all.js:19 
    Ext.cmd.derive.onRangeAvailable ext-all.js:19

  3. #3
    Sencha Premium User suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    731

    Default

    yup its a bit messy.

    Capture.jpg

  4. #4
    Sencha Premium User SebTardif's Avatar
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    1,296

    Default

    Sencha, please process this bug report.

  5. #5
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

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

  6. #6
    Sencha Premium User SebTardif's Avatar
    Join Date
    Feb 2011
    Location
    Cambridge, MA
    Posts
    1,296

    Default

    fyi: I have Sencha Paid Support Ticket 20871 about this since January 5th, 2015. The current status is that nobody is working on it.

  7. #7
    Sencha User
    Join Date
    Aug 2012
    Posts
    21

    Default

    Hi all,

    the workaround below seems to work for me so far. There were multiple errors for me before, but none of them occur after I've included this override.

    Directions:
    - Put the code into a file called NodeCache.js in your app's overrides folder
    - Change 'YourApp' in the first line to your application namespace
    - Add a require statement to your Application.js (e.g. 'YourApp.overrides.*')

    FYI, I've only changed the last line (return ...) from the original function in ExtJS 5.1.0.107.

    I hope this works for you too, cheers!

    Code:
    Ext.define('YourApp.overrides.NodeCache', {
        override : 'Ext.view.NodeCache',
        
        /**
         * Appends/prepends records depending on direction flag
         * @param {Ext.data.Model[]} newRecords Items to append/prepend
         * @param {Number} direction `-1' = scroll up, `0` = scroll down.
         * @param {Number} removeCount The number of records to remove from the end. if scrolling
         * down, rows are removed from the top and the new rows are added at the bottom.
         * @return {HtmlElement[]} The view item nodes added either at the top or the bottom of the view.
         */
        scroll: function(newRecords, direction, removeCount) {
            var me = this,
                view = me.view,
                store = view.store,
                elements = me.elements,
                recCount = newRecords.length,
                i, el, removeEnd, newNodes,
                nodeContainer = view.getNodeContainer(),
                fireItemRemove = view.hasListeners.itemremove,
                fireItemAdd = view.hasListeners.itemadd,
                range = me.statics().range;
            // Scrolling up (content moved down - new content needed at top, remove from bottom)
            if (direction === -1) {
                if (removeCount) {
                    if (range) {
                        range.setStartBefore(elements[(me.endIndex - removeCount) + 1]);
                        range.setEndAfter(elements[me.endIndex]);
                        range.deleteContents();
                        for (i = (me.endIndex - removeCount) + 1; i <= me.endIndex; i++) {
                            el = elements[i];
                            delete elements[i];
                            if (fireItemRemove) {
                                view.fireEvent('itemremove', store.getByInternalId(el.getAttribute('data-recordId')), i, el, view);
                            }
                        }
                    } else {
                        for (i = (me.endIndex - removeCount) + 1; i <= me.endIndex; i++) {
                            el = elements[i];
                            delete elements[i];
                            el.parentNode.removeChild(el);
                            if (fireItemRemove) {
                                view.fireEvent('itemremove', store.getByInternalId(el.getAttribute('data-recordId')), i, el, view);
                            }
                        }
                    }
                    me.endIndex -= removeCount;
                }
                // Only do rendering if there are rows to render.
                // This could have been a remove only operation due to a view resize event.
                if (newRecords.length) {
                    // grab all nodes rendered, not just the data rows
                    newNodes = view.bufferRender(newRecords, me.startIndex -= recCount);
                    for (i = 0; i < recCount; i++) {
                        elements[me.startIndex + i] = newNodes.childrenArray[i];
                    }
                    nodeContainer.insertBefore(newNodes, nodeContainer.firstChild);
                    // pass the new DOM to any interested parties
                    if (fireItemAdd) {
                        view.fireEvent('itemadd', newRecords, me.startIndex, newNodes.childrenArray);
                    }
                }
            } else // Scrolling down (content moved up - new content needed at bottom, remove from top)
            {
                if (removeCount) {
                    removeEnd = me.startIndex + removeCount;
                    if (range) {
                        range.setStartBefore(elements[me.startIndex]);
                        range.setEndAfter(elements[removeEnd - 1]);
                        range.deleteContents();
                        for (i = me.startIndex; i < removeEnd; i++) {
                            el = elements[i];
                            delete elements[i];
                            if (fireItemRemove) {
                                view.fireEvent('itemremove', store.getByInternalId(el.getAttribute('data-recordId')), i, el, view);
                            }
                        }
                    } else {
                        for (i = me.startIndex; i < removeEnd; i++) {
                            el = elements[i];
                            delete elements[i];
                            el.parentNode.removeChild(el);
                            if (fireItemRemove) {
                                view.fireEvent('itemremove', store.getByInternalId(el.getAttribute('data-recordId')), i, el, view);
                            }
                        }
                    }
                    me.startIndex = removeEnd;
                }
                // grab all nodes rendered, not just the data rows
                newNodes = view.bufferRender(newRecords, me.endIndex + 1);
                for (i = 0; i < recCount; i++) {
                    elements[me.endIndex += 1] = newNodes.childrenArray[i];
                }
                nodeContainer.appendChild(newNodes);
                // pass the new DOM to any interested parties
                if (fireItemAdd) {
                    view.fireEvent('itemadd', newRecords, me.endIndex + 1, newNodes.childrenArray);
                }
            }
            // Keep count consistent.
            me.count = me.endIndex - me.startIndex + 1;
            return newNodes && newNodes.childrenArray ? newNodes.childrenArray : [];
        }
    });
    Last edited by gruese; 13 May 2015 at 5:49 AM. Reason: removed console output from code (Duh!)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •