java - ExtJS 无限网格永远加载(totalProperty == pageSize)

Question

我有一个 ExtJS 网格(版本 4.2.1)。它是缓冲和无限滚动的。它由带有 REST 代理的商店填充。

请求发送至:

/endpoints.json?_dc=1374783152564&page=1&start=0&limit=30&sort=checkedAt&dir=desc&query=codian

json 响应是( chop 为 1 个结果):

{"links":[],
 "count":30,
 "totalCount":30,
 "endpointList":[{
    "links":[{"rel":"self","href":"http://localhost:8080/endpointmanager/endpoints/3"},
             {"rel":"currentStatus","href":"http://localhost:8080/endpointmanager/endpoints/3/status"},
             {"rel":"statusLog","href":"http://localhost:8080/endpointmanager/endpoints/3/statuslog"}],
    "name":"Codian MCU",     
    "managed":false,
    "updateInterval":3,
    "checkedAt":null,
    "timeout":60,
    "deviceType":"Codian MCU",
    "currentStatus":{"links":[],
                   "connected":false,
                   "description":"Unknown Status"}}]}

响应正是我对该查询的期望。 1 页。总共 30 个。

请求下一页返回此响应:

{"links":[],"count":0,"totalCount":30,"endpointList":[]}

这对我来说也不错。

问题出在 ExtJS 上。当我商店的 pageSize == 我的请求返回的 totalCount 属性时，网格旋转；无限加载或直到响应的 totalCount != pageSize。

ExtJS 在此无限加载期间抛出异常 (ext-all-debug.js:104512):

Uncaught Error: NotFoundError: DOM Exception 8

来自 Ext.view.NodeCache.scroll 的周边代码:

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();


    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;


        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);
    }


    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;


        newNodes = me.view.bufferRender(newRecords, me.endIndex + 1);
        for (i = 0; i < recCount; i++) {
            elements[me.endIndex += 1] = newNodes[i];
            frag.appendChild(newNodes[i]);
            Uncaught Error: NotFoundError: DOM Exception 8 (repeated 5 times)
        }
        nodeContainer.appendChild(frag);
    }

    me.count = me.endIndex - me.startIndex + 1;
}

我的网格:

/**
 * TODO Known Defects: If the size of the result set returned by the search
 * filter == pageSize then the grid loads forever. The requests and responses
 * look correct, but an exception is thrown in extjs
 */

Ext.Loader.setPath('Ext.ux', 'resources/js/extjs/examples/ux');
Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.util.*',
'Ext.grid.plugin.BufferedRenderer', 'Ext.ux.form.SearchField' ]);

Ext.onReady(function() {

    Ext.QuickTips.init();

    Ext.define('Endpoint', {

        extend : 'Ext.data.Model',
        fields : [ {
            name : 'deviceType',
            type : 'string',
        }, {
            name : 'name',
            type : 'string',
        }, {
            name : 'managed',
            type : 'boolean',
        }, {
            name : 'updateInterval',
            type : 'int',
        }, {
            name : 'timeout',
            type : 'int',
        }, {
            name : 'checkedAt',
            type : 'string',
        }, {
            name : 'currentStatus',
            mapping : 'currentStatus.description',
            type : 'string',
        } ],
    });

    var store = new Ext.create('Ext.data.Store', {
        id : 'store',
        model : 'Endpoint',

        autoLoad : true,
        buffered : true,
        pageSize : 30,
        leadingBufferZone : 5,
        remoteFilter : true,
        remoteSort : true,

        sorters : [ {
            property : 'checkedAt',
            direction : 'desc'
        } ],

        listeners : {
            totalcountchange : onStoreSizeChange
        },

        proxy : {
            type : 'rest',
            url : '/endpointmanager/endpoints.json',
            simpleSortMode : true,
            filterParam : 'query',
            encodeFilters : function(filters) {
                return filters[0].value;
            },
            reader : {
                type : 'json',
                root : 'endpointList',
                totalProperty : 'totalCount',
            },
            writer : {
                type : 'json',
            },
        },
    });

    function onStoreSizeChange() {
        grid.down('#status').update({
            count : store.getTotalCount()
        });
    }

    var grid = Ext
            .create(
                    'Ext.grid.Panel',
                    {

                        store : store,
                        renderTo : 'endpoint-grid',
                        height : 600,
                        forceFit : true,
                        columnLines : true,
                        stripeRows : true,
                        loadMask : true,
                        multiselect : true,
                        viewConfig : {
                            trackOver : false,
                            emptyText : '<h1 style="margin:20px">No matching endpoints found</h1>'
                        },
                        selModel : {
                            pruneRemoved : false
                        },                              

                        columns : [ {
                            xtype : 'checkcolumn',
                            header : 'Managed',
                            dataIndex : 'managed',
                            width : 100,
                            editor : {
                                xtype : 'checkbox',
                                cls : 'x-grid-checkheader-editor'
                            },
                        }, {
                            header : 'Checked At',
                            dataIndex : 'checkedAt',
                            renderer : dateConverter,
                            width : 160,
                        }, {
                            header : 'Device Type',
                            dataIndex : 'deviceType',
                            width : 160,
                        }, {
                            header : 'Name',
                            dataIndex : 'name',
                            width : 160,
                            flex : 1,
                        }, {
                            header : 'Update Interval (sec)',
                            dataIndex : 'updateInterval',
                            width : 160,
                            editor : {
                                xtype : 'numberfield',
                                allowBlank : false,
                                minValue : 10,
                                maxValue : 2600000
                            },
                        }, {
                            header : 'Timeout (sec)',
                            dataIndex : 'timeout',
                            width : 160,
                            editor : {
                                xtype : 'numberfield',
                                allowBlank : false,
                                minValue : -1,
                                maxValue : 3600,
                            }
                        }, {
                            header : 'Status',
                            dataIndex : 'currentStatus',
                            width : 160,
                        } ],

                        dockedItems : [
                                {
                                    xtype : 'toolbar',
                                    dock : 'top',
                                    items : [
                                            {
                                                width : 400,
                                                fieldLabel : 'Search',
                                                labelWidth : 50,
                                                xtype : 'searchfield',
                                                store : store
                                            },
                                            '->',
                                            {
                                                xtype : 'component',
                                                itemId : 'status',
                                                tpl : 'Matching Endpoints: {count}',
                                                style : 'margin-right:5px'
                                            } ]

                                },
                                {
                                    xtype : 'toolbar',
                                    cls : 'listFooter',
                                    dock : 'bottom',
                                    items : [
                                            {
                                                xtype : 'tbfill'
                                            },
                                            {
                                                text : 'remove',
                                                cls : 'gridButton',
                                                iconCls : 'icon-delete',
                                                handler : function() {
                                                    var selection = grid
                                                            .getView()
                                                            .getSelectionModel()
                                                            .getSelection()[0];
                                                    if (selection) {
                                                        store
                                                                .remove(selection);
                                                    }
                                                }
                                            },
                                            '-',
                                            {
                                                text : 'edit',
                                                cls : 'gridButton',
                                                iconCls : 'icon-edit',
                                                handler : function() {
                                                    store
                                                            .insert(
                                                                    0,
                                                                    new Endpoint());
                                                },
                                            },
                                            '-',
                                            {
                                                text : 'inline',
                                                cls : 'gridButton',
                                                iconCls : 'icon-add',
                                                handler : function() {
                                                    store
                                                            .insert(
                                                                    0,
                                                                    new Endpoint());
                                                },
                                            },
                                            '-',
                                            {
                                                text : 'add',
                                                cls : 'gridButton',
                                                iconCls : 'icon-add',
                                                handler : function() {
                                                    window.location = 'endpointManagementAdd';
                                                },
                                            } ],
                                } ],
                    });

    var task = {
        run : function() {
            store.load();
        },
        interval : 30000
    };

    // kick-off refresh task
    Ext.TaskManager.start(task);

});

function dateConverter(data, cell, record, rowIndex, columnIndex, store) {
  if (data == "") {
return;
  }

  var dt = new Date(parseInt(data));

  return dt.toLocaleString();
};

有没有人遇到过这个问题？我想知道是否有办法解决 ExtJS 中抛出的异常，以及我是否正在执行某些异常操作来触发此行为。非常感谢任何见解。除了这个缺陷外，网格工作得很好。

Answer 1

我不确定这是否适合作为“答案”，但目前我没有足够的声誉来添加评论。我在 4.2.1 中遇到了类似的问题，发现它们在 4.2.2 中得到了修复。截至目前，您需要他们的高级支持才能获得该版本，因此这可能对您没有帮助。我没有尝试过旧版本，我正在使用另一个需要 4.2 版本的 Ext JS 的第三方库。

无论如何，我在 Sencha 论坛上发布了一个关于 DOM 异常的问题以及加载指示器的一般奇怪行为。当我发现 4.2.2 解决了我的问题时，我尝试了这种情况，从服务器发回的总计数与数据存储页面大小相同，但无法重现该问题。