GWT: Création d'un FlexTable défilant en plein écran TabPanel

Question

Je voudrais créer un TabPanel qui occupe toute la zone client du navigateur, et à l'intérieur de celui-ci mettre un FlexTable qui défile si nécessaire. Cependant, j'ai de la difficulté à le faire. 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ù overflow-auto est défini comme:

.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 forçant barres de défilement sur elle. Comment puis-je faire en sorte que la zone cliente du tableau de bord soit indépendante de la taille de son enfant?

Answer 1

Il ressemble à 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

Le problème est en fait que la table est définie sur 100% largeur/hauteur lorsque vous le définissez comme un enfant tab. Si vous faites cela, overflow-auto n'aura plus de sens puisque vous autorisez la table flexible à 100% (de son contenu). Le débordement ne fonctionne que si vous définissez la largeur/hauteur en utilisant des pixels.

Answer 3

Vous aurez probablement besoin d'utiliser un ScrollPanel à l'intérieur de cet onglet pour obtenir l'effet que vous voulez. Un ScrollPanel est un conteneur qui prend juste un seul widget et met une barre de défilement dessus si nécessaire. Je devrais noter que le ScrollPanel, pour autant que je sache, dépend de la définition d'une taille explicite, sinon il se développera volontiers avec le contenu que vous y mettez. Une mise en garde, cependant: Il y avait un défaut de longue date avec n'importe quel type de panneaux déroulants à l'intérieur d'un TabPanel. Enfin, j'avais vu que c'était encore ouvert.

http://code.google.com/p/google-web-toolkit/issues/detail?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 dans le TabPanel.

Comme je l'ai noté cependant, un ScrollPanel aura besoin de vous pour gérer la hauteur manuellement. Donc, si vous voulez que cela reste la hauteur de la fenêtre, cela implique d'écrire du code qui vérifie la taille du navigateur et détermine la taille du ScrollPanel. Vous devrez également attacher un gestionnaire de redimensionnement à la fenêtre pour capturer les redimensionnements et corriger les problèmes.

Au moins, c'est la situation avec éviter la barre de défilement du navigateur pour les choses que je vois maintenant. Si je me trompe, n'importe qui, s'il vous plaît laissez-moi savoir que j'ai le code à supprimer ...

Answer 4

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

1. Créer FlexPanel
2. Créer un ScrollPanel et ajoutez les FlexPanel à elle
3. Définissez la taille nécessaire de la ScrollPanel (en utilisant des unités CSS absolues)
4. créer un SimplePanel et ajoutez le ScrollPanel à lui
5. Ajouter le SimplePanel à l'onglet Panneau

Answer 5

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