12
votes

Comment montrer / masquer la colonne dans un panneau de grille ExtJS 3

J'ai un panneau de grille, j'ai besoin d'afficher / masquer des colonnes dans un panneau de grille en fonction de la valeur d'une case à cocher. Si la case à cocher est cochée, je dois afficher la colonne dans la grille et si elle est décochée, j'ai besoin de masquer la colonne de la grille.

Voici mon code P>

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

extjs extjs3

3 commentaires

18k vues en deux minutes .....

Extjs 4: Stackoverflow.com/Questtions/6042138/...

Dupliqué possible de ExtJS4 - Quelle est l'équivalent à la colonne de la grille?

6 Réponses :

25
votes

Si vous jetez un coup d'œil à l'API extjs, particulièrement le Colummodel Il y a une méthode sethadden code>, elle masquer / afficherait une colonne dans un gridpanel code>.

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

2 commentaires

La case à cocher est dans une autre page à laquelle un drapeau est défini et en fonction de la valeur de la colonne Drapeau du panneau de grille est visible ou caché.Il fonctionne parfaitement. Merci pour la réponse.

Ceci est obsolète en 4.0+

3
votes

Vous pouvez afficher / masquer des colonnes à l'aide du menu d'en-tête de colonne - Vous pouvez choisir la colonne que vous souhaitez afficher. Quoi qu'il en soit, si vous souhaitez afficher / masquer une colonne, essayez ceci xxx

0 commentaires

13
votes

in EXT JS 4.1, pour masquer une colonne, vous utilisez:

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

1 commentaires

sténographie: grid.columns [0 ]Hide () docs.sencha.com/ext-js/4-1/source/...

2
votes

dans EXTJS 4 Accédez à votre panneau de grille, puis accédez à l'attribut Colonnes qui est une maquette d'objets de colonne.

à partir de là, vous pouvez utiliser les méthodes d'itérateur de tableau ( http://www.diveintojavascript.com/core-javascript-reference/Le-array-Object ) à Effectuer une action. P>

Dans l'exemple ci-dessous, je masque et montrez quelques-unes des colonnes en fonction de leurs noms d'en-tête, mais vous pouvez évidemment effectuer des actions en fonction de tout attribut de colonne. P>

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

1 commentaires

Le seul problème ici étant que, disant qu'il y a six colonnes et que vous souhaitez montrer cinq initialement, puis montrer le sixième uniquement si la case à cocher est cochée. Et dans mon cas avec le code ci-dessus, il affiche les six colonnes [col.hidden = true] fonctionne dans ce cas. Et donc j'ai fini par définir le caché comme vrai pour toutes les colonnes initialement. Et exécuter ce code dans beforerender. Ça marche

1
votes

Les réponses ci-dessus, je pense être assez bonne. Mais laissez-moi vous donner un conseil.

1) dans extjs 4.x strong> Il est recommandé d'utiliser Méthodes forts> `s au lieu de EXT. getcmp () em> p>

2) Pour masquer / afficher des colonnes de la grille Vous pouvez utiliser le code suivant P>

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

0 commentaires

0
votes

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

}

1 commentaires

Pourriez-vous ajouter quelques explications à votre réponse?