Javascript 永久隐藏Ext JS网格的列

ExtJS 5

我使用的是ExtJS5网格。我有一个按钮，当我点击它时，年龄栏将通过使用下面的行隐藏

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

我正在使用listener-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
                                    }
                                ]
                    }
                ]
            }
        ]
    });

这是工作小提琴：

---

这是一个有用的提琴：

也许有点过分，但您可以创建一个列数组

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

2） 然后使用javascript拼接方法按索引从数组中删除列 并重新配置您的网格

myGrid.reconfigure(myStore, columns);

---

也许有点过分，但您可以创建一个列数组

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

2） 然后使用javascript拼接方法按索引从数组中删除列 并重新配置您的网格

myGrid.reconfigure(myStore, columns);

---

隐藏列后，当单击最后一列（费用）时，它返回索引2。它应该是1。为什么需要单击列的索引？实际上我只需要正确的单元格索引。当我点击这个专栏的时候。基于单击的列数据索引，我有许多任务要实现。例如，何时我将获得正确的单元格索引，以便我可以获得所单击列的正确数据索引。基于数据索引，我想执行一些代码。如果您可以在不获取单元格索引的情况下获取单击列的正确数据索引，那么会更好。@Benoit Cuvelier-您实际获得了我想要的吗？是的，我想，所以您真正需要的是更多的数据索引，而不仅仅是列的索引？隐藏列后，单击最后一列（费用）时，它返回索引2。它应该是1。为什么需要单击列的索引？实际上我只需要正确的单元格索引。当我点击这个专栏的时候。基于单击的列数据索引，我有许多任务要实现。例如，何时我将获得正确的单元格索引，以便我可以获得所单击列的正确数据索引。基于数据索引，我想执行一些代码。如果您可以在不获取单元格索引的情况下获取单击列的正确数据索引，则会更好。@Benoit Cuvelier-您实际获得了我想要的吗？是的，我认为，因此您真正需要的是更多的数据索引，而不仅仅是列的索引？谢谢您的回复。但我认为，解决这个问题的方法是错误的。假设我们动态地隐藏和显示列，那么这个逻辑就会中断，主要的问题是，从专业角度来说，这样做是错误的。谢谢您的回复。但我认为，解决这个问题的方法是错误的。假设我们动态地隐藏和显示列，那么这个逻辑就会中断，主要的问题是，从专业角度来说，这样做是错误的。