GWT: Erstellen einer scrollbaren Flextable in einem Vollbild-TabPanel

Question

Ich mag eine TabPanel erstellen, die den gesamten Browser-Client-Bereich einnimmt, und im Innern, dass eine Flextable setzen, dass scrollt, wenn nötig. Aber ich habe diese Probleme Acheiving. Ich habe versucht:

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

Wo Überlauf-Auto ist wie folgt definiert:

.overflow-auto {
    overflow: auto;
}

Obwohl das Registerfeld richtig 100% Breite einnimmt, so endet er seine Höhe in das Innere Flextable Skalierung, anstatt Scrollbalken auf sie zu zwingen. Wie kann ich den Client-Bereich des TabPanel hier von der Größe seines Kind unabhängig sein?

Answer 1

Es sieht aus wie GWT 2.0 ein neues Layout-System, das tun soll, was ich wollte: http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#LayoutPanels

Answer 2

Sie gehen zu müssen, wahrscheinlich eine Scroll innerhalb dieser Registerkarte verwenden, um den gewünschten Effekt zu erhalten. Ein Scroll ist ein Container, der nur ein einziges Widget nimmt und legt eine Scrollbar auf sie, wenn nötig. Ich sollte anmerken, dass die Scroll der Fall ist, soweit ich weiß, sind abhängig von einer expliziten Größe auf sie einstellen, sonst ist es glücklich mit dem Inhalt erweitern werden Sie in sie.

Ein Nachteil jedoch: Es war ein langjähriger Defekt mit jeder Art von scrollbaren Platten innerhalb eines TabPanel. Zuletzt hatte ich gesehen, es war noch offen.

http://code.google.com / p / google-web-Toolkit / Themen / detail? id = 1343

Ich denke, die Lösung, die Sie hier suchen würden ist die Flextable in einen anderen Container-Panel wie ein VerticalPanel (möglicherweise ein Simple wäre genug) zu setzen, dann ist das eine Scroll setzt in und schließlich schiebt, dass in den TabPanel.

Wie ich allerdings festgestellt, ein Scroll benötigen Sie die Höhe manuell zu verwalten. Also, wenn Sie es wollen, dass die Höhe des Fensters bleiben, das wird zu beteiligen, einige Code zu schreiben, der den Browser Größe überprüft und findet heraus, wie groß die Scroll sein muss. Sie müssen ein Resize-Handler an das Fenster befestigen als auch komprimiert die Größe zu fangen und zu beheben Dinge dann.

Mindestens, das ist die Situation, die Browser-Scrollbar für Dinge mit zu vermeiden, wie ich es jetzt zu sehen. Wenn ich falsch ist, jemand, lass es mich wissen, wie ich Code zu löschen ...

Answer 3

Was für mich gearbeitet wurde ähnlich wie bikesandcode schrieb:

1. Erstellen FlexPanel
2. eine Scroll erstellen und fügen Sie den FlexPanel es
3. Stellen Sie die benötigte Größe des Scroll (mit absoluten CSS-Einheiten)
4. eine Simple erstellen und fügen Sie den Scroll es
5. Fügen Sie die Simple zum TabPanel

Answer 4

Das Problem ist eigentlich, dass die Tabelle zu 100% Breite / Höhe eingestellt ist, wenn Sie es als Registerkarte Kind eingestellt. Wenn Sie das tun, dass der Überlauf-Auto hat keine Bedeutung mehr, da Sie ermöglichen die Flextabelle 100% zu sein (des Inhalts).

Überlauf funktioniert nur, wenn Sie die Breite / Höhe eingestellt mit Pixel.

Answer 5

Ich bin mit dem HorizontalPanel (von gxt zur Verfügung gestellt) als Mutter für Flextable und die setAutoHeight (true) Methode verwendet wird. Dies funktioniert gut.