PDA

View Full Version : [FIXED-651] Error when grouping using GroupingView and hideGroupedColumn



pmiller_lamar
18 Jan 2010, 9:34 AM
Using Ext JS 3.1.0, set up a GridPanel using a GroupingView, with the following config values set:

hideGroupedColumn: true
enableGroupingMenu: true
enableNoGroups: true


Now, using the menu on the column header, change the grouping state from having no grouping to being grouped by a field, and note that a script error occurs with the message: "c[e].childNodes[1] is undefined"
This can be repeated by removing grouping and then by grouping by a field again.
We just upgraded from 3.0.3, and we were not seeing this problem in that release.

This error occurs in the getRows method of the GroupingView (in the context of hiding the column by which grouping was just enabled), and seems to stem from the fact that before the view is rendered anew, the getRows method is attempting to access DOM nodes which would only be present had the grouping view (with grouping enabled) already been rendered at that point.

(It seems that in Ext JS 3.1, the enableGrouping field of the view is set at a different point (i.e. earlier?) than it was in 3.0.3, perhaps contributing to this problem(?))

It'd really be swell to have a fix for this! For now, we're just not setting hideGroupedColumn to true on our Grouping Views.

Jamie Avins
18 Jan 2010, 10:04 AM
Can you post a true test case, we need that in order to test it and make sure it works as it should if there was a problem.

Also, have you tried this with the 3.1.1-beta release?

João José Pedrini
4 Feb 2010, 11:18 AM
I have the same problem, to resolve, just remove the property 'hideGroupedColumn' from the object to works fine.

an2ny21
23 Feb 2010, 1:18 AM
i'm also having this problem too. see my code below


var _store = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({
url: "<?php echo url_for('home/populatefriendgrid') ?>"
}),
root: 'data',
totalProperty: 'totalRec',
fields: ['name','status','statusgroup'],
sortInfo: {field: 'statusgroup', direction: 'ASC'},
groupField: 'statusgroup',
autoLoad: true
});

var _grid = new Ext.grid.GridPanel({
store: _store,
enableHdMenu: false,
stripeRows: true,
autoHeight: true,
autoWidth: true,
autoExpandColumn: true,
columns: [
{
header: 'Name',
dataIndex: 'name'
},
{
header: 'Status',
dataIndex: 'status'
}
],
view: new Ext.grid.GroupingView(),
sm: new Ext.grid.RowSelectionModel({singleSelect: true})
});

an2ny21
23 Feb 2010, 2:00 AM
i'm also having this problem too. see my code below


var _store = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({
url: "<?php echo url_for('home/populatefriendgrid') ?>"
}),
root: 'data',
totalProperty: 'totalRec',
fields: ['name','status','statusgroup'],
sortInfo: {field: 'statusgroup', direction: 'ASC'},
groupField: 'statusgroup',
autoLoad: true
});

var _grid = new Ext.grid.GridPanel({
store: _store,
enableHdMenu: false,
stripeRows: true,
autoHeight: true,
autoWidth: true,
autoExpandColumn: true,
columns: [
{
header: 'Name',
dataIndex: 'name'
},
{
header: 'Status',
dataIndex: 'status'
}
],
view: new Ext.grid.GroupingView(),
sm: new Ext.grid.RowSelectionModel({singleSelect: true})
});

already solved this problem somehow with a bit of experiment on my code.
see my code fix below:


var rt = Ext.data.Record.create([
{name: 'name'},
{name: 'status'},
{name: 'statusgroup'}
]);

var _store = new Ext.data.GroupingStore({
reader: new Ext.data.JsonReader({
root: 'data',
totalProperty: 'totalRec'
},
rt
),
url: 'test.json',
sortInfo: {field: 'name', direction: 'ASC'},
groupField: 'status',
autoLoad: true
});

var _grid = new Ext.grid.GridPanel({
store: _store,
enableHdMenu: false,
stripeRows: true,
autoHeight: true,
autoWidth: true,
autoExpandColumn: true,
columns: [
{
header: 'Name',
dataIndex: 'name'
},
{
header: 'Status',
dataIndex: 'status'
},
{
header: 'Status group',
dataIndex: 'statusgroup',
hidden: true
}
],
view: new Ext.grid.GroupingView(),
sm: new Ext.grid.RowSelectionModel({singleSelect: true})
});

mystix
23 Feb 2010, 9:33 AM
@an2ny21: you might want to highlight your changes in red for clarity.

LambyPie
24 Feb 2010, 4:47 AM
Why has this thread been closed? I also still have the issue with ExtJs 3.1.1. The following simplified code demonstrates it:



Ext.onReady(function()
{
// create a reader
var reader = new Ext.data.JsonReader(
{
fields:
[
{name:'type'},
{name:'colour'},
{name:'price'}
]
});

// create a grouping store
var store = new Ext.data.GroupingStore(
{
reader:reader,
data:
[
{type:'car', colour:'red', price:'10'},
{type:'car', colour:'green', price:'10'},
{type:'car', colour:'blue', price:'10'},
{type:'bike', colour:'red', price:'10'},
{type:'bike', colour:'green', price:'10'},
{type:'bike', colour:'blue', price:'10'}
],
sortInfo:{field:'type', direction:'ASC'},
groupField:'type'
});

// create a grid
var grid = new Ext.grid.GridPanel(
{
store:store,
columns:
[
{header:'Type', dataIndex:'type'},
{header:'Colour', dataIndex:'colour'},
{header:'Price', dataIndex:'price'}
],
view:new Ext.grid.GroupingView(
{
hideGroupedColumn:true
}),
autoHeight:true,
renderTo:Ext.getBody()
});
});


If you run this, use the header menu to turn off grouping, then use it again to group by a column you get the error. If you change the hideGroupColumn setting to false then you don't get an error.

LambyPie
24 Feb 2010, 5:21 AM
In the meantime I think I've got a workaround, if you know you want hideGroupedColumn:true then add this listener to your GridPanel object:



listeners:
{
groupchange:function(view,fld)
{
if (fld==null) { view.hideGroupedColumn=false; }
else { view.hideGroupedColumn = true; }
}
}


this will turn off hideGroupedColumn when there is no group field then turn it on again if a new group by field is selected.

LambyPie
24 Feb 2010, 7:04 AM
Update:My workaround only works with ExtJS 3.1.1 as the groupchange event must be new in 3.1.1

evant
22 Mar 2010, 12:58 AM
A fix for this issue is in rev 6335.