javascript - Permanently hide column of Ext JS grid -

extjs 5

i using extjs 5 grid. have button, when click on it, age column hidden using below line.

ext.getcmp('grdsample').columnmanager.columns[2].setvisible(false); 

i using listener - beforecellclick index of clicked column. when click on last column (last column = next hidden column) still show original index of column. hidden column still getting position in grid.

in css - if use visibility: hidden hides component or tag still take space in web page if use display: none, hides doesn't take space in web page.

i want hidden column should not take space while getting indexing of current clicked column. (without using css).

can me sort out.

ext.onready(function () {     var studentstore = new ext.data.jsonstore({         autoload: true,         pagesize: 10,         fields: ['name', 'age', 'fee'],         data: {             items: [                 { "name": 'puneet', "age": '25', "fee": '1000' },                 { "name": 'ankit', "age": '23', "fee": '2000' },                 { "name": 'rahul', "age": '24', "fee": '3000' }             ]         },         proxy: {             type: 'memory',             reader: {                 type: 'json',                 rootproperty: 'items'             }         }     });          var window = new ext.window({         id: 'grdwindow',         width: 400,         title: 'grid samples',         items: [             {                 xtype: 'panel',                 layout: 'fit',                 renderto: ext.getbody(),                 items: [                     {                         xtype: 'button',                         text: 'hide age column',                         handler: function () {                             ext.getcmp('grdsample').columnmanager.columns[2].setvisible(false);                         }                     },                     {                         xtype: 'grid',                         id: 'grdsample',                         height: 300,                         selmodel: ext.create('ext.selection.checkboxmodel',                         {                         }),                         store: studentstore,                         columns: [                             {                                 header: 'name',                                 dataindex: 'name',                             },                             {                                 header: 'age',                                 dataindex: 'age',                             },                             {                                 header: 'fee',                                 dataindex: 'fee'                             }                         ],                         listeners:{                             beforecellclick: function (el, td, cellindex, record, tr, rowindex, e, eopts) {                                 debugger;                             }                         },                             dockeditems:                                 [                                        {                                         xtype: 'pagingtoolbar',                                         store:studentstore,                                         dock:'bottom',                                         displayinfo:true                                     }                                 ]                     }                 ]             }         ]     }); 

    ext.create('ext.grid.panel', {         store: store,         columns: [             {text: "name", flex : 1, dataindex: 'name'},             {text: "age", flex : 1, dataindex: 'age', id : 'colage'},             {text: "fee", flex : 1, dataindex: 'fee'}         ],         listeners : {              'cellclick' : function (me, td, cellindex, record, tr, rowindex, e, eopts ) {                    me.panel.headerct.getheaderatindex(cellindex).dataindex)}} // here correct value :)     }); 

here working fiddle : http://jsfiddle.net/xpe9v/1623/