View Full Version : [4.0.0] Ext.grid.feature.Grouping in tree grid

17 May 2011, 4:43 AM
Adding the grouping feature to a tree grid almost works (which is actually quite impressive), however collapsing the group triggers the following error:

grid is undefined
ext-all-debug.js (line 77961)


collapse: function(groupBd) {
var me = this,
view = me.view,
grid = view.up('gridpanel'),
groupBdDom = Ext.getDom(groupBd);

me.collapsedState[groupBdDom.id] = true;



To reproduce, just add "features: [{ ftype: 'grouping' }]," to the grid config in the tree grid example (http://dev.sencha.com/deploy/ext-4.0.0/examples/tree/treegrid.html).

17 May 2011, 3:16 PM
Hrm... Not sure what it means to enable grouping on a TreeGrid.

Changing the line:

grid = view.up('gridpanel'),


grid = view.up('tablepanel'),

Would make that specific set of code generic enough to run under both tree and grid.

18 May 2011, 12:30 AM
The desired result is actually quite close to what you get when you add the grouping feature in a tree grid now. On the main level it's groups, but with the rows in a group displaying a hierarchy.

One example where it would be useful for instance is a list of projects. These have properties like importance, as well as childs like tasks in the project. What I want the grid to display is a group with all the "very important" projects, where each project row can be expanded to show the tasks in the project.

Your change sounds like an excellent fix! Do you think you could get this into the next update?

18 May 2011, 11:44 AM
Does putting this override into the code you posted above make it work as you want it to? Could you provide us a simple example of how you are using it?

18 May 2011, 11:22 PM
Sure, I've used the TreeGrid Example page for it. The modified treegrid.js file:


Ext.onReady(function() {
//we want to setup a model and store instead of using dataUrl
Ext.define('Task', {
extend: 'Ext.data.Model',
fields: [
{name: 'task', type: 'string'},
{name: 'user', type: 'string'},
{name: 'duration', type: 'string'}

var store = Ext.create('Ext.data.TreeStore', {
model: 'Task',
proxy: {
type: 'ajax',
//the store will get the content from the .json file
url: 'treegrid.json'
folderSort: true,
groupField: 'user'

//Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
var tree = Ext.create('Ext.tree.Panel', {
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: Ext.getBody(),
collapsible: true,
useArrows: true,
rootVisible: false,
store: store,
multiSelect: true,
singleExpand: true,

features: [{ ftype: 'grouping' }],

//the 'columns' property is now 'headers'
columns: [{
xtype: 'treecolumn', //this is so we know which column will show the tree
text: 'Task',
flex: 2,
sortable: true,
dataIndex: 'task'
//we must use the templateheader component so we can use a custom tpl
xtype: 'templatecolumn',
text: 'Duration',
flex: 1,
sortable: true,
dataIndex: 'duration',
align: 'center',
//add in the custom tpl for the rows
tpl: Ext.create('Ext.XTemplate', '{duration:this.formatHours}', {
formatHours: function(v) {
if (v < 1) {
return Math.round(v * 60) + ' mins';
} else if (Math.floor(v) !== v) {
var min = v - Math.floor(v);
return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
} else {
return v + ' hour' + (v === 1 ? '' : 's');
text: 'Assigned To',
flex: 1,
dataIndex: 'user',
sortable: true

One other thing that doesn't work as it should, is the groupField property (probably because the TreeStore class doesn't have it). So, you have to manually activate the grouping using the header menu.

Let me know if you need more information!

19 May 2011, 2:33 AM
Changing the line:

grid = view.up('gridpanel'),


grid = view.up('tablepanel'),

Would make that specific set of code generic enough to run under both tree and grid.

Applying this fix to both the expand() and collapse() functions (line 77936 and 77953 respectively in ext-all-debug for 4.0.0) solves this error! I've also checked the regular grouping example, and it doesn't seem to break either. Nice job!

The only 'problem' left is the ignored groupField propery in an Ext.data.TreeStore.

24 Oct 2012, 3:47 AM

I also tried to combine treegrid and the grouping-feature....

If you add this code to the above example you see the grouped treegrid, without activating it manually...

view = tree.getView(); //Get the view of the treePanel
feature = view.getFeature(0); //Get the grouping feature (in our case it is the only child...)
view2 = feature.view;
store = view2.store;

After that I recognized an other problem... The Tree View throws an error in the collectData function when you try to collapse the treegrid.
To avoid this I had to modify the Ext.tree.View

collectData: function(records) {
var data = this.callParent(arguments),
rows = data.rows,
len = rows.length,
i = 0,
row, record;

for (; i < len; i++) {
row = rows[i];
record = records[i];
if(record != null) {
if (record.get('qtip')) {
row.rowAttr = 'data-qtip="' + record.get('qtip') + '"';
if (record.get('qtitle')) {
row.rowAttr += ' ' + 'data-qtitle="' + record.get('qtitle') + '"';
if (record.isExpanded()) {
row.rowCls = (row.rowCls || '') + ' ' + this.expandedCls;
if (record.isLeaf()) {
row.rowCls = (row.rowCls || '') + ' ' + this.leafCls;
if (record.isLoading()) {
row.rowCls = (row.rowCls || '') + ' ' + this.loadingCls;

return data;

If you add this one line of code it is working....