GWT: Création d'un FlexTable scrollable dans un plein écran TabPanel

Question

Je voudrais créer un TabPanel qui occupe toute la zone client du navigateur, et à l'intérieur qui a mis un FlexTable qui défile si nécessaire. Cependant, je vais avoir du mal à acheiving cela. J'ai essayé:

public void onModuleLoad() {
    TabPanel test = new TabPanel();
    test.setSize("100%", "100%");

    FlexTable flex = new FlexTable();
    for (int i = 0; i < 100; i++)
        flex.setText(i, 0, "test " + i);

    test.add(flex, "tab");
    flex.setStyleName("overflow-auto");

    test.selectTab(0);
    RootPanel.get().add(test);
    }

Où est définie comme trop-plein-auto:

.overflow-auto {
    overflow: auto;
}

Bien que le panneau de l'onglet occupe correctement une largeur de 100%, il finit par échelle sa hauteur à l'intérieur FlexTable, plutôt que de forcer les barres de défilement sur elle. Comment puis-je faire de l'espace client du tabpanel soit indépendant de la taille de son enfant ici?

Answer 1

Il semble que GWT 2.0 a un nouveau système de mise en page qui devrait faire ce que je voulais: http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#LayoutPanels

Answer 2

Vous allez probablement avoir besoin d'utiliser un ScrollPanel intérieur de cet onglet pour obtenir l'effet que vous voulez. Un ScrollPanel est un conteneur qui prend juste un widget unique et met une barre de défilement sur si nécessaire. Je dois souligner que le fait ScrollPanel, pour autant que je sache, dépendent de définir une taille explicite, sinon il se développera avec bonheur le contenu que vous y mettez.

Une mise en garde cependant: Il y avait un défaut de longue date avec toute sorte de panneaux défilants à l'intérieur d'un TabPanel. Enfin, je l'avais vu était encore ouvert.

http://code.google.com / p / google-web-boîte à outils / questions / détail? id = 1343

Je pense que la solution que vous seriez à la recherche d'ici est de mettre le FlexTable dans un autre panneau de récipient comme un VerticalPanel (peut-être un SimplePanel serait suffisant), puis mettre cela en un ScrollPanel et enfin pousser que dans le TabPanel.

Comme je l'ai noté cependant, un ScrollPanel devra vous gérer la hauteur manuellement. Donc, si vous voulez qu'il reste à la hauteur de la fenêtre, cela va impliquer écrire du code qui vérifie la taille du navigateur et détermine de quelle taille la ScrollPanel doit être. Vous devrez joindre un gestionnaire de redimensionnement à la fenêtre et pour attraper redimensionne et arranger les choses alors.

Au moins, c'est la situation en évitant la barre de défilement du navigateur pour les choses que je vois en ce moment. Si je me trompe, tout le monde, s'il vous plaît laissez-moi savoir que je code pour supprimer ...

Answer 3

Ce qui a fonctionné pour moi était semblable à ce que bikesandcode a écrit:

1. Créer FlexPanel
2. Créer un ScrollPanel et ajoutez le FlexPanel à elle
3. Définissez la taille nécessaire du ScrollPanel (en utilisant des unités CSS absolu)
4. créer un SimplePanel et ajoutez le ScrollPanel à elle
5. Ajoutez le SimplePanel à la TabPanel

Answer 4

Le problème est en fait que la table est fixé à 100% largeur / hauteur lorsque vous définissez comme un enfant onglet. Si vous faites que le trop-plein-auto n'a plus de sens puisque vous permettent la table flex soit 100% (de son contenu).

débordement ne fonctionne que si vous définissez la largeur / hauteur en utilisant des pixels.

Answer 5

J'utilise le HorizontalPanel (fourni par gxt) en tant que parent pour FlexTable et en utilisant la méthode de setAutoHeight (true). Cela fonctionne très bien.