Discussion :

[Chen norris]

Bonjour à tous,

Je viens quérir votre aide pour un problème d'affichage d'un bouton dans une barre d'outils seulement dans un certain cas de figure. Mon souci est que quelle que soit la situation mon bouton ne s'affiche pas. J'ai essayé diverses techniques, mais toujours sans succès :

Avec la propriété hidden :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var maToolbar = new Ext.toolbar.Toolbar({
    ...
        hidden: !condition,
        xtype: "button"
});

Via une classe CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var maToolbar = new Ext.toolbar.Toolbar({
    ...
        cls: condition ? "affiche" : "masque",
        xtype: "button"
});

mais je me retrouve systématiquement avec la classe CSS "masque".

En utilisant les méthodes show() / hide() :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
var maToolbar = new Ext.toolbar.Toolbar({
    ...
        itemId: "monBouton",
        xtype: "button"
});
 
...
 
if (condition)
    maToolbar.down("#monBouton").show();
else
    maToolbar.down("#monBouton").hide();

En utilisant la méthode setVisible() :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
var maToolbar = new Ext.toolbar.Toolbar({
    ...
        itemId: "monBouton",
        xtype: "button"
});
 
...
 
maToolbar.down("#monBouton").setVisible(condition);

Rien n'y fait, mon bouton reste toujours invisible. La valeur de condition est pourtant correcte car :

• En debug JS, elle a bien tantôt la valeur true, tantôt la valeur false selon le cas dans lequel je me positionne,
• Avec des console.log, je confirme que la valeur de condition est correcte,
• J'utilise déjà condition pour conditionner le surlignement d'un autre élément de ma page et ça fonctionne très bien.

Le problème ne vient pas non plus des méthodes que j'utilise pour accéder à mon bouton ni non plus des méthodes que j'utilise pour l'afficher ou le masquer puisque si je mets en dur quelque chose du genre maToolbar.down("#monBouton").setVisible(true);, là le bouton s'affiche. Je cible donc a priori bien la bonne instance.

Commençant à être à court de piste pour trouver l'origine de mon problème, je viens demander un peu par ici si vous auriez des idées,
À vot' bon cœur…

[sekaijin]

je ne suis pas sur de saisir ton problème

au moment de la création de ta barre c'est l'attribut hidden (boolean) qui indique si oui ou non le bouton doit être affiché.
mais ça na rien de dynamique. c'est un état fixé à la création.

Pour changer la visibilité en cour d'exécution il faut appeler les méthodes show/hide

je ne sais pas comment tu gère le changement d'état de ta condition.
généralement dans l'objet qui porte la variable condition on crée un événement
on ajoute le mixin observable sur l'objet et on appelle fireEvent à chaque changement d'état.

dans n'importe quelle partie du ton application tu peux utiliser l'event
dans la toolbar ou son contrôleur par exemple tu capte l'évent et tu appelle show/hide

http://docs.sencha.com/extjs/4.2.1/#...til.Observable
https://addyosmani.com/resources/ess...ternjavascript

A+JYT

[Chen norris]

Hello,

Oui, je confirme que c'est bien l'attribut hidden que je positionne avec ma variable condition qui vaut tantôt true, tantôt false selon mon cas. Je parlais de masquage "dynamique" du fait que l'affichage dépend de la page d'où je viens mais effectivement, ce n'est pas exactement du masquage/affichage dynamique dans la mesure où une fois que ma page est chargée, la visibilité de mon bouton ne change pas.
Je ne sais pas si c'est bien explicite alors je vais paraphraser en simplifiant :

• j'arrive sur ma page,
• la variable condition est fixée et ne change plus,
• le bouton s'affiche ou non, en fonction de la valeur de condition,
• tant que je reste sur ma page, condition ne change pas de valeur et la visibilité du bouton ne change pas non plus.

Je m'étais tourné vers la solution de l'attribut hidden car c'est ce qui me semblait (et ce qui me semble toujours) le plus approprié pour gérer l'affichage ou non de mon bouton. Cette solution ne fonctionnant pas, c'est là que j'ai essayé de jouer sur les méthodes show() et hide() pour voir si je m'en sortais mieux, mais je confirme que ça n'est pas ce qui me paraît le plus approprié pour mon cas.

Pour répondre à la problématique de comment est géré condition, c'est en fait une variable :

• qui est à true si je viens d'une page lambda,
• qui est à false si je viens d'une autre page.

Comme elle ne change pas de manière dynamique, je pense pas que la capture d'événement soit à préconiser (les événements sont plutôt utilisés lors d'actions utilisateurs du style "clic sur un bouton", "sélection d'une valeur particulière d'une liste déroulante", …), mais je suppose que tu me donnais cette piste au cas où condition soit une variable qui change d'état.

Merci en tous cas pour tes premières pistes.

[abraxis]

Bonjour,

Il y a aussi les events du type "render" dans lesquels tu pourrais utiliser le méthodes show() et hide() sur ton bouton.

[Chen norris]

Pas bête du tout comme idée. Mais dans la pratique, ça ne donne toujours rien de probant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
    listeners: {
        render: function(me) {
            if (condition) {
                console.info("On affiche");
                me.show();
            }
            else {
                console.info("On masque");
                me.hide();
            }
        }
    },
    xtype: "button"

À l'exécution, j'ai un joli On affiche qui se met dans la console Javascript mais toujours pas de bouton qui apparaît.
Je vais devenir fou, c'est pas possible ^^

[Chen norris]

Petit up de ce sujet que j'avais un peu laissé de côté.

N'ayant plus de piste depuis mon dernier post, je me suis résolu à me tourner vers une solution un peu plus violente : passer par un autre framework. Connaissant très bien JQuery, ma solution a donc été de masquer le bouton comme suit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
if (!condition)
        $("#monBouton").hide();

Ce n'est pas la première fois que je décide de passer par du JQuery pour contourner des problèmes que je rencontre avec ExtJS, ce ne sera sans doute pas la dernière…

Je note en tous cas ce post comme résolu, merci quand même pour votre aide