GWT: Creazione di un FlexTable scorrevole in un full-schermo TabPanel

Question

Mi piacerebbe creare un TabPanel che occupa l'intera area client browser, e al suo interno che mettere un FlexTable che scorre, se necessario. Tuttavia, sto avendo problemi acheiving questo. Ho provato:

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

Dove troppo pieno-auto è definito come:

.overflow-auto {
    overflow: auto;
}

Anche se il pannello scheda occupa correttamente larghezza 100%, finisce per scalare sua altezza all'interno FlexTable, piuttosto che forzare barre di scorrimento su di essa. Come posso fare l'area client della tabpanel essere indipendente dalle dimensioni del suo bambino qui?

Answer 1

Sembra che GWT 2.0 ha un nuovo sistema di layout che dovrebbe fare quello che volevo: http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#LayoutPanels

Answer 2

Probabilmente si sta andando ad avere bisogno di utilizzare uno ScrollPanel all'interno di quella scheda per ottenere l'effetto desiderato. Uno ScrollPanel è un contenitore che vuole solo un singolo widget e mette una barra di scorrimento su di esso, se necessario. Vorrei sottolineare che lo ScrollPanel fa, per quanto ne so, dipende da impostazione di un formato esplicito su di esso, altrimenti sarà felicemente espandersi con il contenuto che si inserisce in esso.

Un avvertimento, però: C'era un difetto di lunga data con qualsiasi tipo di pannelli scorrevoli all'interno di un TabPanel. Ultima avevo visto che era ancora aperta.

http://code.google.com / p / google-web-toolkit / temi / dettaglio? id = 1343

Credo che la soluzione si sarebbe cercando qui è quello di mettere il FlexTable in qualche altro pannello contenitore come un VerticalPanel (forse un SimplePanel basterebbe), poi mettere che in uno ScrollPanel e infine spingere che in TabPanel.

Come ho notato, però, uno ScrollPanel avrà bisogno di gestire l'altezza manualmente. Quindi, se si vuole che rimanga l'altezza della finestra, questo sta andando a coinvolgere scrivere del codice che controlla la dimensione del browser e capisce quanto è alto lo ScrollPanel deve essere. Avrete bisogno di collegare un gestore di ridimensionamento alla finestra pure per catturare ridimensiona e sistemare le cose poi.

Almeno, questa è la situazione con evitando la barra di scorrimento del browser per cose come la vedo io adesso. Se mi sbaglio, qualcuno, per favore fatemelo sapere come io ho il codice per eliminare ...

Answer 3

Che cosa ha funzionato per me era simile a quello che bikesandcode ha scritto:

1. Crea FlexPanel
2. Crea uno ScrollPanel e aggiungere il FlexPanel ad esso
3. Imposta la dimensione necessaria del ScrollPanel (utilizzando unità CSS assoluti)
4. creare un SimplePanel e aggiungere lo ScrollPanel ad esso
5. Aggiungi il SimplePanel al TabPanel

Answer 4

Il problema è in realtà che la tabella è impostata su 100% larghezza / altezza quando si imposta come un bambino scheda. Se lo fai l'overflow-auto non più ha un senso in quanto si consente al tavolo flex per essere al 100% (del suo contenuto).

trabocco funziona solo se si imposta la larghezza / altezza utilizzando pixel.

Answer 5

Sto usando il HorizontalPanel (fornito da GXT) come il padre per FlexTable e utilizzando il metodo setAutoHeight (vero). Questo raffinato sta lavorando.