PDA

View Full Version : [FIXED] 4.2 bufferedrenderer with grid.reconfigure makes grid to display old data



Qarea
4 Apr 2013, 6:29 AM
I have simple grid
{
xtype: 'grid',
autoScroll: true,
columnLines: true,
flex: 1,
columns: [],
store: new Ext.data.Store({ fields: {} })
}

which is reconfigured to change columns when new data loaded


store = Ext.create('Ext.data.Store', {
fields: fields,
data: data,
});

grid.reconfigure(store, columns);

When I added plugins: 'bufferedrenderer' to grid config to solve performance issues and tested it - I see that sometimes grid is displaying old data (actually - only first column, other columns are empty - may be because new columns set are different in all except first column) - and this happens almost every second time. Tried to play with different plugin options - no changes.

If click on column header to sort it - grid refreshes with correct data. Thinking that problem is some kind of not cleared cache I tried to call reconfigure twice - this solved problem. But it is real bug.
Also, this never reproduced for grid with grouping. reproduced too



store = Ext.create('Ext.data.Store', {
fields: fields,
data: data,
});

grid.reconfigure(store, columns);
grid.reconfigure(store, columns); // solves buffered renderer plugin issue


*EDITED BY SLEMMON


data1 = {
children: [{"id":750,"name":750,"type":"children","features":[224,235,202,78,67,244,245,259,283,39,230,79,154,6,232,200,206,284,247,265]},{"id":547,"name":547,"type":"children","features":[224,231,235,202,78,67,244,245,259,283,39,230,79,154,232,200,206,284,265]},{"id":546,"name":546,"type":"children","features":[224,231,235,202,78,126,86,67,99,82,87,259,283,38,39,230,79,154,232,200,206,284,247,265]},{"id":552,"name":552,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,38,39,230,79,154,232,200,206,284,247,265]},{"id":550,"name":550,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,39,230,79,154,232,200,206,284,247,265]},{"id":472,"name":472,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,38,39,230,79,154,232,200,206,284,247,265]},{"id":656,"name":656,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,211,38,39,230,79,154,6,136,209,232,200,206,284,247,265]},{"id":548,"name":548,"type":"children","features":[224,231,235,202,78,126,86,67,99,82,87,259,283,39,230,79,154,232,200,206,284,247,265]},{"id":549,"name":549,"type":"children","features":[224,231,235,202,78,86,67,244,245,99,82,87,259,283,38,39,230,79,154,232,200,206,284,247,265]},{"id":644,"name":644,"type":"children","features":[224,231,235,202,78,67,244,245,99,259,283,39,230,79,154,232,200,206,284,265]}],
features: {"324":{"id":324,"name":324},"224":{"id":224,"name":224},"231":{"id":231,"name":231},"235":{"id":235,"name":235},"202":{"id":202,"name":202},"78":{"id":78,"name":78},"126":{"id":126,"name":126},"86":{"id":86,"name":86},"67":{"id":67,"name":67},"244":{"id":244,"name":244},"245":{"id":245,"name":245},"99":{"id":99,"name":99},"82":{"id":82,"name":82},"87":{"id":87,"name":87},"259":{"id":259,"name":259},"283":{"id":283,"name":283},"211":{"id":211,"name":211},"39":{"id":39,"name":39},"38":{"id":38,"name":38},"230":{"id":230,"name":230},"79":{"id":79,"name":79},"154":{"id":154,"name":154},"6":{"id":6,"name":6},"136":{"id":136,"name":136},"209":{"id":209,"name":209},"232":{"id":232,"name":232},"200":{"id":200,"name":200},"206":{"id":206,"name":206},"284":{"id":284,"name":284},"247":{"id":247,"name":247},"265":{"id":265,"name":265}}
}


data2 = {
children: [{"id":585,"name":585,"type":"children","features":[224,231,235,202,78,126,86,67,13,244,245,99,82,87,259,283,39,230,79,154,232,200,206,284,247,265]},{"id":657,"name":657,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,39,230,79,154,232,200,206,284,247,265]},{"id":227,"name":227,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,39,230,31,79,154,232,200,206,284,247,265]},{"id":429,"name":429,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,38,39,230,31,79,154,232,200,206,284,247,265]},{"id":651,"name":651,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,38,39,230,79,154,232,200,206,284,247,265]},{"id":643,"name":643,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,38,39,230,31,79,154,232,200,206,284,247,265]},{"id":543,"name":543,"type":"children","features":[224,231,235,202,78,67,244,245,283,39,230,79,154,232,200,206,284,265]},{"id":409,"name":409,"type":"children","features":[224,231,235,202,78,67,244,245,259,283,39,230,31,79,154,232,200,206,284,265]},{"id":229,"name":229,"type":"children","features":[224,231,235,202,78,67,244,245,99,82,87,259,283,39,230,37,79,154,232,206,284,247,265]},{"id":698,"name":698,"type":"children","features":[224,231,235,202,78,67,99,82,87,259,283,39,230,37,79,154,232,206,284,247,265]},{"id":219,"name":219,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,39,230,79,154,232,200,206,284,247,265]},{"id":223,"name":223,"type":"children","features":[224,231,235,202,78,126,67,99,82,87,259,283,39,230,79,154,232,200,206,284,247,265]},{"id":213,"name":213,"type":"children","features":[224,231,235,202,78,126,42,86,67,53,244,245,99,82,87,259,283,38,39,230,31,79,154,232,200,206,284,247,265]},{"id":248,"name":248,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,39,230,31,79,154,232,200,206,284,247,265]},{"id":689,"name":689,"type":"children","features":[224,231,235,202,78,67,244,245,99,82,87,259,283,39,230,79,154,232,200,206,284,247,265]},{"id":259,"name":259,"type":"children","features":[331,224,231,235,202,78,67,244,245,99,82,87,259,283,39,230,31,79,154,232,200,206,284,247,265]}],
features: {"331":{"id":331,"name":331},"224":{"id":224,"name":224},"231":{"id":231,"name":231},"235":{"id":235,"name":235},"58":{"id":58,"name":58},"202":{"id":202,"name":202},"78":{"id":78,"name":78},"289":{"id":289,"name":289},"126":{"id":126,"name":126},"42":{"id":42,"name":42},"86":{"id":86,"name":86},"67":{"id":67,"name":67},"13":{"id":13,"name":13},"53":{"id":53,"name":53},"244":{"id":244,"name":244},"245":{"id":245,"name":245},"99":{"id":99,"name":99},"82":{"id":82,"name":82},"87":{"id":87,"name":87},"259":{"id":259,"name":259},"283":{"id":283,"name":283},"39":{"id":39,"name":39},"38":{"id":38,"name":38},"230":{"id":230,"name":230},"37":{"id":37,"name":37},"31":{"id":31,"name":31},"79":{"id":79,"name":79},"154":{"id":154,"name":154},"232":{"id":232,"name":232},"200":{"id":200,"name":200},"206":{"id":206,"name":206},"284":{"id":284,"name":284},"247":{"id":247,"name":247},"265":{"id":265,"name":265}}
}


Ext.create('Ext.grid.Panel', {
// xtype: 'grid',
renderTo: Ext.getBody(),
height: 600,
plugins: 'bufferedrenderer',
title: 'Features',
autoScroll: true,
columnLines: true,
flex: 1,
columns: [],
store: new Ext.data.Store({ fields: {} }),
tbar: [
{
text: 'Data 1',
handler: function () {
this.up('panel').setData(data1);
}
},
{
text: 'Data 2',
handler: function () {
this.up('panel').setData(data2);
}
}
],
setData: function (data) {
var i, j, n, b, features, fields, columns, id, name, store;


fields = [
'id',
{
name: 'feature',
sortType: 'asUCText'
}
];


columns = [
{
header: 'Feature',
dataIndex: 'feature',
flex: 1,
minWidth: 200
}
];


for (i in data.children) {
id = 'children_' + data.children[i].id;
name = data.children[i].name;


fields.push(id);
columns.push({
xtype: 'booleancolumn',
text: name,
trueText: '√',
falseText: '',
dataIndex: id,
align: 'center'
});
}


features = [];
for (i in data.features) {
n = features.length;
features[n] = {
'id': data.features[i].id,
'feature': data.features[i].name
};


for (j in data.children) {
b = Ext.Array.indexOf(data.children[j].features, data.features[i].id) !== -1;
features[n]['children_' + data.children[j].id] = b;
}
}


store = Ext.create('Ext.data.Store', {
fields: fields,
data: features
});
store.sort({ property: 'feature', direction: 'ASC' });


this.reconfigure(store, columns);
// this.reconfigure(store, columns); // fixes Ext4.2.0.663 issue with displaying old data
}
});

slemmon
4 Apr 2013, 7:47 AM
I tried whipping up a test case to reproduce the issue. I modified the Buffered Grid Example (http://docs.sencha.com/ext-js/4-2/extjs-build/examples/grid/buffer-grid.html) from the examples page for Ext JS and tried reconfiguring the columns to drive the error, but everything worked as expected for me on FF, Chrome, and Safari.

Any chance you could give me any more details or a test case I can use to demonstrate the error with?
Also, is the error you're seeing on all browsers or does it seem to be an issue across browsers?

Qarea
5 Apr 2013, 3:18 AM
No errors in console, issue reproduced in FF10 FF17 FF20 Opera12 IE10

Attached images
1 open first object, grid displays correct data
2 open second object, grid display is broken. You can also see issue with focus manager frame
3 sorted last grid twice - data displayed correctly

grid has always "feature" column and set of "entity_{id}" columns, grid is reconfigured for each entity

if that is not enough I'll try to maker reproducable example

slemmon
5 Apr 2013, 10:22 AM
If you have a simple example that would be great. I tried to reproduce the issue just from your description and haven't been able to reproduce it myself.

Qarea
5 Apr 2013, 11:46 PM
Reproduced in simple example:


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test extjs project</title>

<link href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all-dev.js"></script>

<script type="text/javascript">
data1 = {
children: [{"id":750,"name":750,"type":"children","features":[224,235,202,78,67,244,245,259,283,39,230,79,154,6,232,200,206,284,247,265]},{"id":547,"name":547,"type":"children","features":[224,231,235,202,78,67,244,245,259,283,39,230,79,154,232,200,206,284,265]},{"id":546,"name":546,"type":"children","features":[224,231,235,202,78,126,86,67,99,82,87,259,283,38,39,230,79,154,232,200,206,284,247,265]},{"id":552,"name":552,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,38,39,230,79,154,232,200,206,284,247,265]},{"id":550,"name":550,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,39,230,79,154,232,200,206,284,247,265]},{"id":472,"name":472,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,38,39,230,79,154,232,200,206,284,247,265]},{"id":656,"name":656,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,211,38,39,230,79,154,6,136,209,232,200,206,284,247,265]},{"id":548,"name":548,"type":"children","features":[224,231,235,202,78,126,86,67,99,82,87,259,283,39,230,79,154,232,200,206,284,247,265]},{"id":549,"name":549,"type":"children","features":[224,231,235,202,78,86,67,244,245,99,82,87,259,283,38,39,230,79,154,232,200,206,284,247,265]},{"id":644,"name":644,"type":"children","features":[224,231,235,202,78,67,244,245,99,259,283,39,230,79,154,232,200,206,284,265]}],
features: {"324":{"id":324,"name":324},"224":{"id":224,"name":224},"231":{"id":231,"name":231},"235":{"id":235,"name":235},"202":{"id":202,"name":202},"78":{"id":78,"name":78},"126":{"id":126,"name":126},"86":{"id":86,"name":86},"67":{"id":67,"name":67},"244":{"id":244,"name":244},"245":{"id":245,"name":245},"99":{"id":99,"name":99},"82":{"id":82,"name":82},"87":{"id":87,"name":87},"259":{"id":259,"name":259},"283":{"id":283,"name":283},"211":{"id":211,"name":211},"39":{"id":39,"name":39},"38":{"id":38,"name":38},"230":{"id":230,"name":230},"79":{"id":79,"name":79},"154":{"id":154,"name":154},"6":{"id":6,"name":6},"136":{"id":136,"name":136},"209":{"id":209,"name":209},"232":{"id":232,"name":232},"200":{"id":200,"name":200},"206":{"id":206,"name":206},"284":{"id":284,"name":284},"247":{"id":247,"name":247},"265":{"id":265,"name":265}}
}

data2 = {
children: [{"id":585,"name":585,"type":"children","features":[224,231,235,202,78,126,86,67,13,244,245,99,82,87,259,283,39,230,79,154,232,200,206,284,247,265]},{"id":657,"name":657,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,39,230,79,154,232,200,206,284,247,265]},{"id":227,"name":227,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,39,230,31,79,154,232,200,206,284,247,265]},{"id":429,"name":429,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,38,39,230,31,79,154,232,200,206,284,247,265]},{"id":651,"name":651,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,38,39,230,79,154,232,200,206,284,247,265]},{"id":643,"name":643,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,38,39,230,31,79,154,232,200,206,284,247,265]},{"id":543,"name":543,"type":"children","features":[224,231,235,202,78,67,244,245,283,39,230,79,154,232,200,206,284,265]},{"id":409,"name":409,"type":"children","features":[224,231,235,202,78,67,244,245,259,283,39,230,31,79,154,232,200,206,284,265]},{"id":229,"name":229,"type":"children","features":[224,231,235,202,78,67,244,245,99,82,87,259,283,39,230,37,79,154,232,206,284,247,265]},{"id":698,"name":698,"type":"children","features":[224,231,235,202,78,67,99,82,87,259,283,39,230,37,79,154,232,206,284,247,265]},{"id":219,"name":219,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,39,230,79,154,232,200,206,284,247,265]},{"id":223,"name":223,"type":"children","features":[224,231,235,202,78,126,67,99,82,87,259,283,39,230,79,154,232,200,206,284,247,265]},{"id":213,"name":213,"type":"children","features":[224,231,235,202,78,126,42,86,67,53,244,245,99,82,87,259,283,38,39,230,31,79,154,232,200,206,284,247,265]},{"id":248,"name":248,"type":"children","features":[224,231,235,202,78,126,86,67,244,245,99,82,87,259,283,39,230,31,79,154,232,200,206,284,247,265]},{"id":689,"name":689,"type":"children","features":[224,231,235,202,78,67,244,245,99,82,87,259,283,39,230,79,154,232,200,206,284,247,265]},{"id":259,"name":259,"type":"children","features":[331,224,231,235,202,78,67,244,245,99,82,87,259,283,39,230,31,79,154,232,200,206,284,247,265]}],
features: {"331":{"id":331,"name":331},"224":{"id":224,"name":224},"231":{"id":231,"name":231},"235":{"id":235,"name":235},"58":{"id":58,"name":58},"202":{"id":202,"name":202},"78":{"id":78,"name":78},"289":{"id":289,"name":289},"126":{"id":126,"name":126},"42":{"id":42,"name":42},"86":{"id":86,"name":86},"67":{"id":67,"name":67},"13":{"id":13,"name":13},"53":{"id":53,"name":53},"244":{"id":244,"name":244},"245":{"id":245,"name":245},"99":{"id":99,"name":99},"82":{"id":82,"name":82},"87":{"id":87,"name":87},"259":{"id":259,"name":259},"283":{"id":283,"name":283},"39":{"id":39,"name":39},"38":{"id":38,"name":38},"230":{"id":230,"name":230},"37":{"id":37,"name":37},"31":{"id":31,"name":31},"79":{"id":79,"name":79},"154":{"id":154,"name":154},"232":{"id":232,"name":232},"200":{"id":200,"name":200},"206":{"id":206,"name":206},"284":{"id":284,"name":284},"247":{"id":247,"name":247},"265":{"id":265,"name":265}}
}

Ext.onReady(function(){
// Ext.FocusManager.enable(true);

Ext.create('Ext.grid.Panel', {
// xtype: 'grid',
renderTo: Ext.getBody(),
height: 600,
plugins: 'bufferedrenderer',
title: 'Features',
autoScroll: true,
columnLines: true,
flex: 1,
columns: [],
store: new Ext.data.Store({ fields: {} }),
tbar: [
{
text: 'Data 1',
handler: function () {
this.up('panel').setData(data1);
}
},
{
text: 'Data 2',
handler: function () {
this.up('panel').setData(data2);
}
}
],
setData: function (data) {
var i, j, n, b, features, fields, columns, id, name, store;

fields = [
'id',
{
name: 'feature',
sortType: 'asUCText'
}
];

columns = [
{
header: 'Feature',
dataIndex: 'feature',
flex: 1,
minWidth: 200
}
];

for (i in data.children) {
id = 'children_' + data.children[i].id;
name = data.children[i].name;

fields.push(id);
columns.push({
xtype: 'booleancolumn',
text: name,
trueText: '&radic;',
falseText: '',
dataIndex: id,
align: 'center'
});
}

features = [];
for (i in data.features) {
n = features.length;
features[n] = {
'id': data.features[i].id,
'feature': data.features[i].name
};

for (j in data.children) {
b = Ext.Array.indexOf(data.children[j].features, data.features[i].id) !== -1;
features[n]['children_' + data.children[j].id] = b;
}
}

store = Ext.create('Ext.data.Store', {
fields: fields,
data: features
});
store.sort({ property: 'feature', direction: 'ASC' });

this.reconfigure(store, columns);
// this.reconfigure(store, columns); // fixes Ext4.2.0.663 issue with displaying old data
}
});
});
</script>
</head>

<body>
</body>
</html>

Without bufferedrenderer when you click on each button data successfully loaded and displayed, with plugin - you have to click twice, or uncomment second reconfigure call

slemmon
6 Apr 2013, 10:19 AM
Thanks for the report! I have opened a bug in our bug tracker.

Qarea
18 Apr 2013, 5:16 AM
Also, this never reproduced for grid with grouping.
Actually reproduced too, and causes lots of errors in console

Error: value is undefined

Any news on this bug? Is double call to reconfigure a safe fix?