cómo mostrar/ocultar columna en un panel de cuadrícula extjs 3

Question

Tengo un panel de cuadrícula que necesito mostrar/ocultar columnas en un panel de cuadrícula según el valor de una casilla de verificación. Si la casilla de verificación está marcada, necesito mostrar la columna en la cuadrícula y, si no está marcada, necesito ocultar la columna en la cuadrícula.

Aquí está mi código

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

cuando actualice la página no soy capaz de alternar las columnas en función del valor de la casilla de verificación. Pero cuando inicio sesión y cierro sesión, puedo ver los cambios en el panel de la cuadrícula. ¿Alguien puede ayudarme a actualizar los valores de columna en el panel de la cuadrícula?

Answer 1

si echar un vistazo a la API de ExtJS, particularmente la ColumModel hay un método setHidden, sería ocultar/mostrar una columna en una GridPanel.

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

también debe enlazar el evento onchange de la casilla de verificación para que pueda mostrar u ocultar la columna

Answer 2

Puede mostrar columnas/ocultar utilizando el menú de cabecera de la columna - se puede elegir qué columna que desea tener mostrado. De todos modos, si desea mostrar/ocultar una columna, probar este

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

Answer 3

En Ext JS 4.1, para ocultar una columna, se utiliza:

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

Parece que getColumnModel() con su setHidden () método ya no forma parte de la cuadrícula: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel

Answer 4

En ExtJS 4 obtenga acceso a su panel de cuadrícula, y luego acceda al atributo columns que es una matriz de objetos Column.

Desde allí puede usar los métodos del iterador de matriz (http://www.diveintojavascript.com/core-javascript-reference/the-array-object) para realizar una acción.

En el siguiente ejemplo, oculto y muestro algunas de las columnas en función de sus nombres de encabezado, pero obviamente puede realizar una acción basada en cualquier atributo de columna.

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

Las respuestas anteriores, creo que son bastante buenas. Pero déjame darte un consejo.

1) En ExtJS 4.x se recomienda utilizar Ext.ComponentQuery `s métodos en lugar de Ext.getCmp()

2) Para ocultar/mostrar columnas de la cuadrícula que utilice el código siguiente

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

o para mostrar

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

Debe resolver ocultar/mostrar cualquier columna en una cuadrícula.

Aquí cuadrícula es su cuadrícula, tal vez id o xtype etc.

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

}