View Full Version : How to show/hide column in a extjs 3.4 grid panel

17 Feb 2014, 10:06 AM
I've gone through the previous posts of the same question and none of them couldn't solve my problem.
I have a grid panel with a specific column as hidden. I need to show that column when a combobox selection changes.

Here is my code

Store1 = new Ext.data.JsonStore({
url: 'url',
root: 'rows',
autoLoad: true,
fields: ['field1', 'field2']

Grid1 =
xtype: 'grid',
id: 'grid1',
autoHeight: true,
autoWidth: true,
autoScroll: true,
border: false,
trackMouseOver: false,
frame: true,
store: Store1,
columns: [
{ header: 'Col1', dataIndex: 'field1'},
{ header: 'Col2', dataIndex: 'field2',
renderer: function (value, metaData, record, rowIndex, colIndex, store) {

if (isShow==true) {
value = 100;
else {
return value;

xtype: 'combo',
store: comboStore,
fieldLabel: 'title',
displayField: 'title',
valueField: 'title',
typeAhead: false,
editable: false,
allowBlank: false,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
name: 'combo1',
selectOnFocus: true
, onSelect: function (cmb) {
isShow = true;

// methods
hideCols = function (grid) {
grid.getColumnModel().setHidden(grid.getColumnModel().findColumnIndex('filed2'), true);
showCols = function (grid) { grid.getColumnModel().setHidden(grid.getColumnModel().findColumnIndex('filed2'), false);

Where I went wrong?

20 Feb 2014, 7:28 AM
Using the setHidden method works for me on the column model: