GXT (Ext-GWT): problèmes de Mise en page avec ContentPanel

J'ai un ContentPanel qui s'adapte à l'ensemble de la fenêtre. Il a un topComponent, un widget dans le centre, et un bottomComponent.

Je reçois des problèmes de mise en page, lorsque j'essaie d'ajouter des widgets à la topComponent après la ContentPanel a été rendue une fois:

public void onModuleLoad() {

    final Viewport viewport = new Viewport();
    viewport.setLayout(new FitLayout());

    final ContentPanel contentPanel = new ContentPanel(new FitLayout());
    contentPanel.setHeaderVisible(false);

    final LayoutContainer topContainer = new LayoutContainer(
            new FlowLayout());

    final Button buttonOne = new Button("Top:One");
    topContainer.add(buttonOne);

    contentPanel.setTopComponent(topContainer);
    contentPanel.add(new Button("Center"));
    contentPanel.setBottomComponent(new Button("Bottom"));

    viewport.add(contentPanel);
    RootPanel.get().add(viewport);

    //Later, add a second button to the topComponent ...
    Scheduler.get().scheduleDeferred(new ScheduledCommand() {
        @Override
        public void execute() {
            final Button buttonTwo = new Button("Top:Two");
            topContainer.add(buttonTwo); //Doesn't show up at first.

            topContainer.layout(); //Now, buttonTwo shows up. But we have
                            //a new problem: the "Bottom" button disappears...

            contentPanel.layout(true); //This doesn't do anything, BTW.
        }
    });
}

Une chose intéressante à ce sujet est que la mise en page corrige de lui-même, dès que j'ai redimensionner la fenêtre du navigateur. Que puis-je faire pour le faire re-mise en page correctement immédiatement (j'ai essayé d'ajouter plusieurs layout() appels, etc. en plusieurs endroits et de combinaisons, mais je n'ai pas eu de chance jusqu'à présent.)

(Je suis en utilisant GWT 2.1.1 avec GXT 2.2.1.)

Que signifie "arriver problèmes de mise en page"?
Comme les commentaires dans mon code mentionner: Au premier buttonTwo ne s'affiche pas. Puis, quand je l'appelle layout(), il s'affiche. Mais maintenant, le "Bas" bouton disparaît. Dès que j'ai redimensionner la fenêtre manuellement (même juste d'un pixel), la mise en page corrige de lui-même, c'est à dire tous les boutons apparaissent.

OriginalL'auteur Chris Lercher | 2011-04-05

8

Ce qui se passe parce que lorsque vous ajoutez un autre composant à un FlowLayout il redimensionne, augmentant ainsi sa propre hauteur, qui pousse la partie inférieure au-dessous de la zone visible. Il n'y a rien dans le code qui rétrécit le centre de composants, tels que le fond composant reste à sa place d'origine.

Une chose, c'est que vous êtes en utilisant FitLayout pour contentPanel qui contient 3 composants, un FitLayout est utilisée pour les Conteneurs avec un seul composant à l'intérieur, qui est censé remplir son parent.

Vous devez considérer les points suivants:

1) Utilisation RowLayout, ce qui permet un meilleur contrôle sur la manière dont les composants doivent être disposés

2) Décider sur quel composant êtes-vous prêt à placer une barre de défilement verticale, puisque vous êtes l'ajout de composants dynamiquement.

Pour votre exigence actuelle, le code suivant devrait suffire:
```
public void onModuleLoad() {
final Viewport viewport = new Viewport();
viewport.setLayout(new FitLayout());
//    final ContentPanel contentPanel = new ContentPanel(new FlowLayout());
//    contentPanel.setHeaderVisible(false);
final LayoutContainer topContainer = new LayoutContainer(
new FlowLayout());
final Button buttonOne = new Button("Top:One");
topContainer.add(buttonOne);
//   contentPanel.setTopComponent(topContainer);
final LayoutContainer centerPanel = new LayoutContainer(new FitLayout());
centerPanel.add(new Button("Center"));
//   contentPanel.add(centerPanel);
final LayoutContainer botPanel = new LayoutContainer(new FlowLayout());
botPanel.add(new Button("Bottom"));
//     contentPanel.setBottomComponent(botPanel);
final ContentPanel panel = new ContentPanel();  
panel.setHeaderVisible(false);  
panel.setLayout(new RowLayout(Orientation.VERTICAL));    
panel.add(topContainer, new RowData(1, -1, new Margins(4)));  
panel.add(centerPanel, new RowData(1, 1, new Margins(0, 4, 0, 4)));  
panel.add(botPanel, new RowData(1, -1, new Margins(4)));  
viewport.add(panel, new FlowData(10));  
RootPanel.get().add(viewport);
//Later, add a second button to the topComponent ...
Scheduler.get().scheduleDeferred(new ScheduledCommand() {
@Override
public void execute() {
final Button buttonTwo = new Button("Top:Two");
topContainer.add(buttonTwo); //Doesn't show up at first.
panel.layout(true);
}
});
}
```
Le FitLayout dans mon contentPanel n'a qu'un seul enfant: Le bouton central. Le "topComponent" et "bottomComponent" sont séparés. Eh bien, vous avez modifié le code pour ne pas utiliser "setTopComponent" et "setBottomComponent" - et qui fonctionne, parce qu'il n'utilise pas le topComponent/bottomComponent fonction de ContentPanel. (La solution temporaire j'ai mis en place pour contourner le problème est semblable à la vôtre.) Cependant, je ne veux utiliser le topComponent/bottomComponent fonction, car il est utilisé partout ailleurs dans le code existant du projet, je travaille sur les - et la mise en page doit travailler avec elle, aussi.
Dans votre code-vous dynamiquement ajouter des widgets vers le haut ou le bas composants? Je demande cela parce que en haut et en bas des conteneurs de ne pas participer à disposition après la contentPanel a été rendue. Lorsque vous redimensionner manuellement la fenêtre du navigateur, onResize est appelée, et elle se règle en hauteur. Une chose que vous pouvez essayer, si vous insistez sur l'utilisation de haut et le bas des composants est d'appeler la taille de l'ensemble de la méthode sur le panneau, par dynamiquement l'obtention de la hauteur et la largeur.
Dans le code existant, l'ajout de widgets en haut/bas de la composante n'a pas été nécessaire jusqu'à présent. Mais le GXT documentation ne veut pas dire que vous ne pouvez pas ajouter des widgets de manière dynamique il y, de sorte qu'il a été supposé, que ce serait le travail. Maintenant, avec notre solution de contournement (pas de haut/bas), le style est un peu différent (plus quelques autres petits problèmes). Le style original peut être imité manuellement, mais ce n'est pas très propre solution. / J'ai juste essayé de contentPanel.setSize(contentPanel.getWidth(), contentPanel.getHeight()); - ne fonctionne pas malheureusement. D'autres idées?
Vous pouvez essayer d'obtenir la hauteur et la largeur de la Fenêtre de la classe de gwt. Si vous insistez à l'aide de la topComponent et bottomComponent le centre composant à se rétrécir, essayez de calculer la hauteur disponible pour le centre de composants lorsque vous ajoutez un widget à la partie supérieure et de rétrécir le centre de composant. Fondamentalement, ici, vous aurez à prendre la mise en page dans vos mains.
Je suis de l'acceptation de votre réponse, et je vais rester avec la solution de contournement que nous avions mis en œuvre. Arriver en haut/bas / composant fonctionne correctement avec la variable hauteurs semble être plus complexe que n'importe quoi d'autre. Je souhaite, les GXT documentation nous avait prévenu au sujet de cette limitation. Merci pour votre aide!

OriginalL'auteur Swapnil
1

Ce qui se passe parce que les onRender cas de topComponent est invoquée dans la présente déclaration:
```
contentPanel.setTopComponent(topContainer);
```
Puis, plus tard, vous êtes l'ajout d'un composant: topContainer.add(buttonTwo);. Lorsque vous redimensionnez la fenêtre, le onRender événement est déclenché, et le bouton que vous avez ajouté. La solution à votre problème consiste à déclencher la onRender événement pour topContainer.

Malheureusement, onRender est protégé et, par conséquent, vous ne pouvez pas appeler directement:
http://dev.sencha.com/deploy/gxtdocs/com/extjs/gxt/ui/client/widget/LayoutContainer.html#onRender%28com.google.gwt.user.client.Element,%20int%29

Vous souhaitez utiliser fireEvent pour déclencher par programme au lieu de saisir manuellement le redimensionnement de la fenêtre:
http://dev.sencha.com/deploy/gxtdocs/com/extjs/gxt/ui/client/widget/Component.html#fireEvent%28com.extjs.gxt.ui.client.event.EventType%29

Comment exactement ce que je déclenche l'événement? J'ai essayé fireEvent(Events.Render) et fireEvent(Events.Resize), à la fois sur contentPanel et topContainer. J'ai aussi essayé sur contentPanel.getBottomComponent(). N'a pas fonctionné jusqu'à présent.

OriginalL'auteur Travis Webb
0

une fois que le navigateur est terminée rendu le widget de ne pas rendre cette composante de nouveau, de façon à le faire à nouveau, nous pouvons utiliser
contentPanel.layout()
ou
contentPanel.mise en page(vrai)
il re-rend les widgets selon la nouvelle mise en page.

Malheureusement, contentPanel.layout() et contentPanel.layout(true) ne fait rien dans mon cas.

OriginalL'auteur Ranga

Vous devez vous connecter pour publier un commentaire.