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

extjs3

Question

Tengo un panel de cuadrícula que necesito mostrar / ocultar columnas en un panel de cuadrícula dependiendo del 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 actualizo la página, no puedo alternar las columnas según el 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

Puede mostrar / ocultar columnas usando el menú de encabezado de columna; puede elegir qué columna desea que se muestre. De todos modos, si quieres mostrar / ocultar una columna, prueba esto

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

Answer 2

si echas un vistazo a la API ExtJS, en particular, el ColumModel tiene un método setHidden , podría ocultar / mostrar una columna en un GridPanel .

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

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

Answer 3

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 4

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

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

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

Answer 5

Las respuestas de arriba son bastante buenas. Pero déjame darte un consejo.

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

2) Para ocultar / mostrar columnas de la grilla, puede usar el siguiente código

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

o para mostrar

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

Debería resolver ocultar / mostrar cualquier columna en una grilla.

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

}