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

时间:2014-02-17 17:58:55

标签: extjs extjs3

我已经浏览了同一问题的先前帖子,但没有一个不能解决我的问题。 我有一个特定列隐藏的网格面板。当组合框选择发生变化时,我需要显示该列。

这是我的代码

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 个答案:

答案 0 :(得分:0)

字样中的拼写错误"提交2": 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'));
    }
}