GWT: Creación de una FlexTable desplazable en una pantalla completa TabPanel

Question

Me gustaría crear un TabPanel que ocupa toda el área cliente de navegador, y en su interior que ponen a una FlexTable que se desplaza en caso de necesidad. Sin embargo, estoy teniendo problemas para acheiving esto. He intentado:

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

Donde desbordamiento-auto se define como:

.overflow-auto {
    overflow: auto;
}

A pesar de que el panel de pestañas ocupa adecuadamente ancho de 100%, termina escalar su altura a la FlexTable interior, en lugar de forzar las barras de desplazamiento sobre ella. ¿Cómo puedo hacer que el área de cliente de la TabPanel sea independiente del tamaño de su niño aquí?

Answer 1

Parece que GWT 2.0 tiene un nuevo sistema de diseño que deben hacer lo que quería: http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#LayoutPanels

Answer 2

Usted probablemente va a tener que utilizar un ScrollPanel dentro de esa pestaña para obtener el efecto deseado. Un ScrollPanel es un contenedor que sólo se necesita un único widget y pone una barra de desplazamiento en ella si es necesario. Debo señalar que el ScrollPanel hace, por lo que yo sé, depende de la configuración de un tamaño explícita en él, de lo contrario, estará feliz de ampliar el contenido que incluya en él.

Una advertencia, sin embargo: Hubo un defecto de muchos años con cualquier tipo de paneles desplazables dentro de un TabPanel. La última vez que lo había visto todavía estaba abierta.

http://code.google.com / p / google-web-toolkit / temas / detalle? id = 1343

Creo que la solución que estaría buscando aquí es poner el FlexTable en algún otro panel contenedor como un VerticalPanel (posiblemente un SimplePanel sería suficiente), a continuación, poner esto en un ScrollPanel y finalmente empujar que en el TabPanel.

Como he señalado, sin embargo, un ScrollPanel se necesita para gestionar la altura de forma manual. Por lo tanto, si quieres que siga siendo la altura de la ventana, esto va a implicar escribir un código que comprueba el tamaño del navegador y se da cuenta de lo alto que la ScrollPanel tiene que ser. Tendrá que adjuntar un controlador de cambio de tamaño para la ventana, así que coger Cambia el tamaño y arreglar las cosas entonces.

Al menos, esa es la situación con evitar la barra de desplazamiento del navegador para cosas como lo veo ahora. Si estoy equivocado, nadie, por favor hágamelo saber como tengo código para eliminar ...

Answer 3

Lo que funcionó para mí fue similar a lo que bikesandcode escribió:

1. Crear FlexPanel
2. Crear un ScrollPanel y añadir la FlexPanel a ella
3. Ajuste el tamaño necesario de la ScrollPanel (usando unidades CSS absolutos)
4. crear un SimplePanel y añadir la ScrollPanel a ella
5. Agregue el SimplePanel a la TabPanel

Answer 4

El problema en realidad es que la tabla se establece en 100% anchura / altura cuando se configura como un niño pestaña. Si haces que el desbordamiento de auto-no más tiene sentido ya que permite que la mesa sea flexible al 100% (de su contenido).

desbordamiento sólo funciona si se establece la anchura / altura usando píxeles.

Answer 5

Estoy utilizando el HorizontalPanel (proporcionado por GXT) como el padre de FlexTable y utilizando el método setAutoHeight (verdadero). Esta multa se encuentra trabajando.