come mostrare/nascondere la colonna in un pannello di griglia extjs 3

Question

Ho un pannello della griglia ho bisogno di mostrare/nascondere le colonne in un pannello della griglia a seconda del valore di una casella di controllo. Se la casella è selezionata ho bisogno di visualizzare la colonna nella griglia e se è deselezionata ho bisogno di nascondere la colonna nella griglia.

Ecco il mio codice

var chkEnableDisplayResponsibilityForAction = '<%=Session["chkEnableDisplayResponsibilityForAction"]%>'; 

var flags = Boolean.parse(chkEnableDisplayResponsibilityForAction); 
var flags1 = !Boolean.parse(chkEnableDisplayResponsibilityForAction) 

var colModel = new Ext.grid.ColumnModel([ 
{ header: "PricePlanID", width: 100, sortable: true, dataIndex: 'PricePlanID', hidden: flags, hideable: flags1 }, 
    ]); 

quando ho aggiorna la pagina io non sono in grado di attivare o disattivare le colonne a seconda del valore della casella di controllo. Ma quando effettuo il login e logout sono in grado di vedere le modifiche nel pannello della griglia. Qualcuno può aiutarmi ad aggiornare i valori delle colonne nel pannello della griglia?

Answer 1

se si dà un'occhiata all'API ExtJS, in particolare il ColumModel esiste un metodo setHidden, si nasconde/mostra una colonna in un GridPanel.

myGrid.getColumnModel().setHidden(0, true); 

si dovrebbe anche associare l'evento onchange tua casella di controllo di modo da poter mostrare o nascondere la colonna

Answer 2

È possibile mostrare/nascondere le colonne utilizzando menu dell'intestazione della colonna - è possibile scegliere quale colonna si desidera avere mostrato. In ogni caso, se si desidera visualizzare/nascondere una colonna, provate questo

myGrid.getColumnModel().setHidden(0, true); 

Answer 3

In Ext JS 4.1, per nascondere una colonna, si utilizza:

grid.columns[0].setVisible(false); 

Sembra getColumnModel() con il suo setHidden () il metodo non fa più parte della griglia: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel

Answer 4

In ExtJS 4 accedere al pannello della griglia e quindi accedere all'attributo colonne che è una matrice di oggetti Colonna.

Da lì è possibile utilizzare i metodi di iterazione dell'array (http://www.diveintojavascript.com/core-javascript-reference/the-array-object) per eseguire un'azione.

Nell'esempio seguente nascondo e mostro alcune delle colonne in base ai loro nomi di intestazione, ma è ovviamente possibile eseguire azioni basate su qualsiasi attributo di colonna.

var grid = Ext.getCmp('my_grid_panel'); 

grid.columns.forEach(function(col) { 
    if((col.text == "Foo") || (col.text == "Bar")) { 
     col.setVisible(true); 
    } else if(col.text == "Baz") { 
     col.setVisible(false); 
    } 
}); 

Answer 5

Le risposte sopra riportate sono piuttosto buone. Ma lascia che ti dia un consiglio.

1) In ExtJS 4.x si consiglia di utilizzare Ext.ComponentQuery `s metodi, invece di Ext.getCmp()

2) Per nascondere/mostrare le colonne della griglia si possibile utilizzare seguente codice

Ext.ComponentQuery.query('grid gridcolumn[dataIndex^="service"]')[0].hide() 

o visualizzare

Ext.ComponentQuery.query('grid gridcolumn[dataIndex^="service"]')[0].show() 

Dovrebbe risolvere nascondere/mostrare qualsiasi colonna in una griglia.

Qui la griglia è la tua rete, forse id o xtipo ecc.

Answer 6

setVisibleColumn  : function(name, flag) { 
    name = Ext.Array.from(name); 
    var column; 

    for (var i = 0; i < name.length; i++) { 
     column = this.getColumn(name[i]); 
     if (column) { 
      flag ? column.show() : column.hide(); 
     } 
    } 

}