Hiding a grid column with a button

[bladesling]

I would assume it would be fairy easy but I can't seem to get column functions to work. All I want to do is create a button that hides sets of columns on my fairly large table. The problem is, I can't even get one column to hide.

I would prefer to do this by using the dataIndex parameter of the column.



var grid = Ext.create('Ext.grid.Panel', {
store: grid_store,
columnLines: true,
width: 'auto',
title: '<?php echo $title ?>',
renderTo: 'grid',
emptyText: 'No Matching Records',
loadMask: true,
enableLocking: true,
features: [{
ftype: 'summary'
}],
viewConfig: {
stripeRows: true,
getRowClass: function(record, index) {
return record.get('row_class');
}
},
dockedItems: [{
xtype: 'toolbar',
items: [
{
text:'test',
handler : function(){
column = grid.columns[0];
column.hide();
}
}]
}],
columns: <?php echo $grid_columns; ?>
});

[sword-it]

Hi bladesling,

Problem in your grid scope -


dockedItems: [{
xtype: 'toolbar',
items: [
{
text:'test',
handler : function(){
column = grid.columns[0];
column.hide();
}
}]
}],


Try this code -


dockedItems: [{
xtype: 'toolbar',
items: [
{ text:'test',
handler : function(){
column = this.findParentByType('grid').columns[0];
column.hide();
}
}]
}],

For more info see - http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel-method-findParentByType

W (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel-method-findParentByType)orking Sample example http://jsfiddle.net/MjFp3/

[bladesling]

While trying to figure out the difference between my code and your code I discovered adding a locked column to the example breaks it. Is this a bug with Ext JS? Is there a work around for this?

http://jsfiddle.net/MjFp3/1/
(http://jsfiddle.net/MjFp3/1/)

[sword-it]

No it's not a bug, you need to increase your grid width.

[bladesling]

What I was saying is that the button no longer works when the locked column is on the Grid.