PDA

View Full Version : Is there a way to get grouped headers from a grid?



da_b0uncer
2 Oct 2013, 2:03 AM
All the methods of the headerCt seem to return leaf headers only, but I need to traverse all headers, including the grouped ones.

ettavolt
2 Oct 2013, 10:06 AM
You may want to use traverse methods of a Container - headerCt inherits from it.

da_b0uncer
17 Oct 2013, 1:19 AM
The main header seems to have no items I could traverse :\

gholyoak
17 Oct 2013, 1:35 AM
I have a similiar issue.
I can derive the group headers from a grid when using 4.2.0.663 but when trying to update to 4.2.1.883 I can no longer get to them.

Using the following code extract ...

In 4.2.0.663 I get an array of 5 column objects, 0,1 & 3 are non grouped and 2 & 4 are grouped (the child columns are in the .items)

In 4.2.1.883 I get an array of 9 column objects, all at the child level and Im struggling to find the Grouped Header text for a child column.

Any ideas ?.




Ext.onReady(function(){

var g = new Ext.grid.Panel(

{id:'testGrid',
enableLocking:true,
renderTo:Ext.getBody(),
height:350,
features:[{ftype:'grouping'}],
columns:[{
text : 'Company',
sortable : false,
dataIndex: 'company',
//locked:true,
width:120,
sortable:true
}, {
text : 'Another Locked',
//locked:true,
width : 115,
sortable : true
}, {
sortable:true,
text: 'Stock Price',
columns: [{
text : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
}, {
text : 'Change',
width : 80,
sortable : true,
renderer : function(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
},
dataIndex: 'change'
}, {
text : '% Change',
width : 100,
sortable : true,
renderer : function(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
},
dataIndex: 'pctChange'
}]
}, {
text : 'Last Updated',
width : 115,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}, {
sortable:true,
text: 'Stock Price2',
columns: [{
text : 'Price2',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
}, {
text : 'Change2',
width : 80,
sortable : true,
renderer : function(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
},
dataIndex: 'change'
}, {
text : '% Change2',
width : 100,
sortable : true,
renderer : function(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
},
dataIndex: 'pctChange'
}]
}],
listeners:{
containercontextmenu:{
//scope:this,
fn:function(gridView,event,opts){
//get grid
var grid=gridView.ownerCt;

console.dir(grid.columns);

}
},
}

});

g.show();

});

da_b0uncer
17 Oct 2013, 1:52 AM
oh btw. I have locked columns, too.

da_b0uncer
17 Oct 2013, 1:56 AM
somehow a query('container') on the headerCt did the trick.

It found all top level columns, the normal ones and the grouped ones.

gholyoak
17 Oct 2013, 4:30 AM
Yep - Worked for me too !