如何在 extjs 3.4 网格面板中显示/隐藏列

Posted 2023-02-26

【中文标题】如何在 extjs 3.4 网格面板中显示/隐藏列

【英文标题】：how to show/hide column in a extjs 3.4 grid panel

【发布时间】：2014-02-17 17:58:54

【问题描述】：

我已经浏览了相同问题的前几篇文章，但没有一篇文章无法解决我的问题。 我有一个隐藏特定列的网格面板。当组合框选择发生变化时，我需要显示该列。

这是我的代码

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 
                                    hideCols(Ext.getCmp('grid1'));
                                
                                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;
                    showCols(Ext.getCmp('grid1'));
                

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

我哪里出错了？

【参考方案1】：

“filed2”一词的拼写错误： grid.getColumnModel().findColumnIndex('filed2')

一些建议：

如果您不想在启动时显示列，请使用列属性hidden:true。不改变渲染器中的可见性，它的性能很低。

您的列配置将是：

header: 'Col2',
dataIndex: 'field2',
hidden: true,
renderer: function (value, metaData, record, rowIndex, colIndex, store) 
    return 100;

不要使用onSelect属性，它是私有方法。

使用事件订阅：

name: 'combo1',
selectOnFocus: true,
listeners: 
    select: function(cmb)
        showCols(Ext.getCmp('grid1'));