I have an ExtJS grid (Version 4.2.1). It is buffered and infinite scrolling. It is populated by a store with a REST proxy.
The request is made to:
/endpoints.json?_dc=1374783152564&page=1&start=0&limit=30&sort=checkedAt&dir=desc&query=codian
The json response is (truncated to 1 result):
{"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"}}]}
The response is exactly what I expect for this query. 1 page. 30 totalCount.
Requesting the next page returns this response:
{"links":[],"count":0,"totalCount":30,"endpointList":[]}
This looks good to me as well.
The issue is with ExtJS. When my store's pageSize == the totalCount property returned by my request the grid spins; loading infinitely or until the response's totalCount != pageSize.
ExtJS throws an exception during this infinite load (ext-all-debug.js:104512):
Uncaught Error: NotFoundError: DOM Exception 8
Surrounding code from 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;
}
My grid:
/**
* 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();
};
Has anyone encountered this problem before? I am wondering if there is a way to work around the exception thrown in ExtJS and whether or not there is something abnormal which I am doing to trigger this behavior. Any insight much appreciated. The grid works excellent aside from this one defect.
