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

【问题标题】：how to show/hide column in a extjs 3.4 grid panel如何在 extjs 3.4 网格面板中显示/隐藏列
【发布时间】：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);
};

我哪里出错了？

【问题讨论】：

标签： extjs extjs3

【解决方案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'));
    }
}

【讨论】：