PDA

View Full Version : [CLOSED] [4.2.0.179] Javascript error when updating a value in a grouped Ext.grid.Panel



wsi
11 Dec 2013, 11:09 AM
REQUIRED INFORMATION
Ext version tested:


Ext 4.2.0.179
Browser:

Chrome 31.0.1650.63 m
Description:

A javascript error Uncaught TypeError: Cannot call method 'is' of null occurs when trying to update a value in a collapsed group in a grid panel.
Steps to reproduce the problem:

Create a store with at least one piece of data.
Create a grid with the grouping feature.
Create a button that updates the first record in the store.
Collapse the first group in the grid.
Click on the button to update the record.
The result that was expected:

No javascript error.
The result that occurs instead:

A javascript error: Uncaught TypeError: Cannot call method 'is' of null
Test Case:


var store = Ext.create('Ext.data.Store', {
fields:['name', 'group'],
groupField: 'group',
data: [
{ "name": "a", "group": "z" },
{ "name": "b", "group": "z" }
],
proxy: "memory"
});


Ext.create('Ext.grid.Panel', {
title: "Grid",
store: store,
columns: [
{ text: 'Name', dataIndex: 'name', flex: 1 }
],
features: [{ftype:'grouping'}],
width: 200,
height: 275,
renderTo: Ext.getBody(),
tbar: {
xtype: "button",
text: "Update Name",
handler: function() {
store.getAt( 0 ).set( "name", "c" );
}
}
});

Possible Workaround:
Adding a check before the Ext.fly() call.


Ext.override( Ext.view.Table, {
getNodeByRecord: function(record, dataRow) {
var result = this.el.getById(this.getRowId(record), true),
itemSelector = this.itemSelector,
fly;

//Check if result is null before trying to do an Ext.fly on it.
if (dataRow === false && result != null ) {
if (!(fly = Ext.fly(result)).is(itemSelector)) {
return fly.up(itemSelector, null, true);
}
}
return result;
},
});

Other Notes:
The same error can be seen with a bufferedrenderer on the grid. If the changed record is outside the buffer, the same javascript error occurs. The same override works in this case.



var store = Ext.create('Ext.data.Store', {
fields:['name'],
proxy: "memory"
});


var data = [];


for( var i = 0; i < 500; ++i ) {
data.push( { name:"a" } );
}


store.loadData( data );


Ext.create('Ext.grid.Panel', {
title: "Grid",
store: store,
columns: [
{ text: 'Name', dataIndex: 'name', flex: 1 }
],
plugins: [{ptype: "bufferedrenderer" }],
width: 200,
height: 275,
renderTo: Ext.getBody(),
tbar: {
xtype: "button",
text: "Update Name",
handler: function() {
store.getAt( 499 ).set( "name", "c" );
}
}
});

evant
11 Dec 2013, 11:23 AM
This issue is already resolved in the 4.2.2 build.

Thanks for the test case.

Also note that the final release of 4.2.0 was build 663, the build you're using is a beta (possibly even an alpha).