Постоянно скрыть колонку Ext JS сетки

Question

ExtJS 5

Я использую сетку ExtJs 5. У меня есть кнопка, когда я нажимаю на нее, возрастный столбец будет скрыт, используя нижнюю строку.

Ext.getCmp('grdSample').columnManager.columns[2].setVisible(false); 

Я использую слушателя - beforecellclick только, чтобы получить индекс щелкнули столбца. Но когда я нажимаю на последний столбец (последний столбец = рядом со скрытым столбцом), он по-прежнему показывает исходный индекс столбца. Скрытая колонна все еще получает свое место в сетке.

В CSS - Если мы используем видимость: скрытый, он скрывает компонент или тег, но все же занимает пробел на веб-странице, но если используется отображение: нет, он скрывается, а также не занимает места на веб-странице.

Я хочу, чтобы скрытая колонка не занимала места при индексировании текущего щелкнутого столбца. (Без использования CSS).

Может ли кто-нибудь помочь мне разобраться в этом.

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 
            } 
           ] 
        } 
       ] 
      } 
     ] 
    }); 

Answer 1

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 you get the correct value :) 
    }); 

Здесь работает скрипку: http://jsfiddle.net/Xpe9V/1623/

Answer 2

Может быть излишним, но вы можете создать массив из ваших колонок

var columns= [{dataIndex: 'Name', header: 'Name'}, { dataIndex:'Age', header: 
'Age' }, { dataIndex:'Fee', header: 'Fee'}] 

2) затем удалить столбец из массива по индексу используя метод склеивания javascript и перенастройте сетку

myGrid.reconfigure(myStore, columns);