ExtJS グリッド (バージョン 4.2.1) があります。バッファリングされ、無限スクロールです。これは、REST プロキシを使用するストアによって取り込まれます。
リクエストは次の目的で行われます。
/endpoints.json?_dc=1374783152564&page=1&start=0&limit=30&sort=checkedAt&dir=desc&query=codian
json 応答は次のとおりです (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 でスローされた例外を回避する方法があるかどうか、およびこの動作をトリガーするために私が行っている異常があるかどうか疑問に思っています。どんな洞察も大歓迎です。グリッドは、この 1 つの欠陥を除けば優れた機能を果たします。