如何在extjs 3.4網格面板中顯示/隱藏列

Question

我已經瀏覽了同一個問題的前幾篇文章，但都沒有解決我的問題。 我有一個隱藏的特定列的網格面板。當組合框選擇更改時，我需要顯示該列。

這裏是我的代碼

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); 
}; 

我在哪裏出了錯？

Answer 1

在 「filed2」 字中的錯字： grid.getColumnModel().findColumnIndex('filed2')

一些recomendations：

• 如果你不想在啓動時顯示列，使用列屬性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')); 
    } 
}