comment afficher/masquer la colonne dans un panneau de grille extjs 3

Question

J'ai un panneau de quadrillage dont j'ai besoin pour afficher/masquer les colonnes dans un panneau de grille en fonction de la valeur d'une case à cocher. Si la case est cochée j'ai besoin d'afficher la colonne dans la grille et si elle n'est pas cochée j'ai besoin de cacher la colonne dans la grille.

Voici mon code

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

quand j'actualisez la page je ne suis pas en mesure de basculer les colonnes en fonction de la valeur de la case à cocher. Mais quand je me connecte et que je me déconnecte, je suis capable de voir les changements dans le panneau de la grille. Quelqu'un peut-il m'aider à rafraîchir les valeurs des colonnes dans le panneau de grille?

Answer 1

si jeter un oeil à l'API ExtJS, en particulier le ColumModel il y a une méthode setHidden, il serait cacher/afficher une colonne dans un GridPanel.

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

vous devez également brancher l'événement onchange de votre case à cocher afin que vous pouvez afficher ou masquer la colonne

Answer 2

Vous pouvez afficher/Masquer les colonnes en utilisant le menu d'en-tête de colonne - vous pouvez choisir la colonne que vous voulez avoir montré. Quoi qu'il en soit, si vous voulez afficher/masquer une colonne, essayez cette

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

Answer 3

Ext JS 4.1, pour cacher une colonne, vous utilisez:

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

On dirait getColumnModel() avec son setHidden () La méthode ne fait plus partie de la grille: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panelhttp://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel

Answer 4

Dans ExtJS 4, accédez à votre panneau de grille, puis accédez à l'attribut columns, qui est un tableau d'objets Column. À partir de là, vous pouvez utiliser les méthodes de l'itérateur de tableau (http://www.diveintojavascript.com/core-javascript-reference/the-array-object) pour effectuer une action.

Dans l'exemple ci-dessous, je cache et affiche quelques-unes des colonnes en fonction de leurs noms d'en-tête, mais vous pouvez évidemment effectuer une action basée sur n'importe quel attribut de colonne.

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

Les réponses ci-dessus sont plutôt bonnes. Mais laissez-moi vous donner un conseil.

1) ExtJS 4.x il est recommandé d'utiliser Ext.ComponentQuery `s au lieu de méthodes Ext.getCmp()

2) Pour masquer/afficher les colonnes de la grille vous peut utiliser le code suivant

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

ou pour montrer

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

Il devrait résoudre cacher/montrer n'importe quelle colonne dans une grille.

Ici grille est votre grille, il peut-être id ou 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(); 
     } 
    } 

}