Extjs 4.2缓冲存储区引发Uncaught NotFoundError：试图在不存在的上下文中引用Node。 镀铬

Question

here is my store:

Ext.define('NG.store.WhatsNews', {
    extend: 'NG.store.AbstractStore',
    model: 'NG.model.auxClasses.notifications.WhatsNew',
    alias: 'store.whatsnewstore',
    autoLoad:true,
    buffered: true,
    remoteFilter: true,
    remoteGroup: true,
    remoteSort: true,
    pageSize: 50
});

When I scroll the grid down and the buffered view tries to load the new records I get an error ' An attempt was made to reference a Node in a context where it does not exist. '.

Here is the error as I caught it on chrome dev tools.:

I watched the variables and it arrears that the call for :

me.view.bufferRender(newRecords, me.endIndex + 1)

results in an array of nodes that is not in the same length as

recCount = newRecords.length

which causes an error when frag.appendChild(newNodes[i]); is called.

Is that a known issue???

Is there a work around?

UPDATE

I have created the following override:

Ext.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.
    */
    scroll: function (newRecords, direction, removeCount) {
        var me = this,
            elements = me.elements,
            recCount = newRecords.length,
            i, el, removeEnd,
            newNodes,
            nodeContainer = me.view.getNodeContainer(),
            frag = document.createDocumentFragment();

        // Scrolling up (content moved down - new content needed at top, remove from bottom)
        if (direction == -1) {
            for (i = (me.endIndex - removeCount) + 1; i <= me.endIndex; i++) {
                el = elements[i];
                delete elements[i];
                el.parentNode.removeChild(el);
            }
            me.endIndex -= removeCount;

            // grab all nodes rendered, not just the data rows
            newNodes = me.view.bufferRender(newRecords, me.startIndex -= recCount);
            for (i = 0; i < recCount; i++) {
                elements[me.startIndex + i] = newNodes[i];
                frag.appendChild(newNodes[i]);
            }
            nodeContainer.insertBefore(frag, nodeContainer.firstChild);
        }

        // Scrolling down (content moved up - new content needed at bottom, remove from top)
        else {
            removeEnd = me.startIndex + removeCount;
            for (i = me.startIndex; i < removeEnd; i++) {
                el = elements[i];
                delete elements[i];
                el.parentNode.removeChild(el);
            }
            me.startIndex = i;

            // grab all nodes rendered, not just the data rows
            newNodes = me.view.bufferRender(newRecords, me.endIndex + 1);
            for (i = 0; i < newNodes.length ; i++) {
                elements[me.endIndex += 1] = newNodes[i];
                frag.appendChild(newNodes[i]);
            }
            nodeContainer.appendChild(frag);
        }
        // Keep count consistent.
        me.count = me.endIndex - me.startIndex + 1;
    }
});

This prevents the error thrown in chrome but the last record does not show!!!

Anyone with a better idea?

Answer 1

It appears to be a known issue of ExtJS 4.2.1.

http://www.sencha.com/forum/showthread.php?265323

And it was fixed under 4.2.2