永久隐藏Ext JS网格列

我正在使用ExtJs 5 Grid。我有一个按钮，当我点击它时，年龄列将通过使用下面的行隐藏。

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

我使用听众 - beforecellclick只是为了获得点击列的索引。但是当我点击最后一列（最后一列=隐藏列旁边）时，它仍然显示列的原始索引。隐藏的列仍然在网格中获得位置。

在CSS中 - 如果我们使用visibility：hidden，它会隐藏组件或标签，但仍然占用网页空间，但如果使用display：none，它将隐藏以及它不会占用网页空间。

我想隐藏的列不应该占用当前点击列的索引空间。（不使用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 
            } 
           ] 
        } 
       ] 
      } 
     ] 
    });

来源

2015-09-21 Puneet Chawla

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/

来源

2015-09-21 12:23:06

隐藏列后，当点击最后一列（费用）时，它返回索引2.它应该是1. –

为什么你需要点击列的索引？ –

其实我只是需要正确的细胞指数。当我点击这个专栏时。基于点击的列数据索引，我有很多任务要实现。防爆。当我将得到正确的细胞索引，以便我可以得到正确的点击列的数据索引。基于数据索引，我想执行一些代码。如果你可以得到正确的点击列数据索引而不需要获取单元格索引，那么它会好很多。 –

或许矫枉过正，但你可以创建你列的一个阵列

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

2）然后通过指数从阵列中删除列使用javascript splice方法并重新配置您的网格

myGrid.reconfigure(myStore, columns);

来源

2015-09-21 16:20:30 vlad

感谢您的回复。但我认为，解决这个问题是错误的。假设如果我们动态地隐藏和显示列，那么这个逻辑将会破坏，而主要的是专业性的，这样做是错误的。 –

永久隐藏Ext JS网格列

回答

相关问题