GWT: Criando um FlexTable rolagem em um TabPanel em tela cheia

Question

Eu gostaria de criar um TabPanel que ocupa toda a área de cliente do navegador, e dentro de que colocar um FlexTable que rola, se necessário. No entanto, estou tendo problemas para atingir este. Eu tentei:

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

Onde overflow-auto é definida como:

.overflow-auto {
    overflow: auto;
}

Embora o painel de guia ocupa adequadamente% largura de 100, acaba por escalar sua altura para o interior FlexTable, ao invés de forçar as barras de rolagem em cima dele. Como posso fazer a área do cliente do TabPanel ser independente do tamanho de sua criança aqui?

Answer 1

Parece que GWT 2.0 tem um novo sistema de layout que deve fazer o que eu queria: http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#LayoutPanels

Answer 2

Você provavelmente vai precisar usar um dentro ScrollPanel desse guia para obter o efeito desejado. A ScrollPanel é um recipiente que só tem um único widget e coloca uma barra de rolagem nele se necessário. Devo observar que o ScrollPanel faz, tanto quanto eu sei, depende de definir um tamanho explícito sobre ela, caso contrário ele será feliz se expandir com o conteúdo que você colocar nele.

Uma ressalva, no entanto: Houve um defeito de longa data com qualquer tipo de painéis de rolagem dentro de um TabPanel. A última vez que tinha visto ele ainda estava aberta.

http://code.google.com / p / google-web-toolkit / questões / detalhes? id = 1343

Eu acho que a solução que você estaria procurando aqui é colocar o FlexTable em algum outro painel de recipiente como um VerticalPanel (possivelmente um SimplePanel seria suficiente), em seguida, colocar isso em um ScrollPanel e, finalmente enfiar isso no TabPanel.

Como eu disse, porém, um ScrollPanel precisará gerenciar a altura manualmente. Então, se você quiser que ele permaneça a altura da janela, isso vai envolver a escrever algum código que verifica o tamanho do navegador e descobre o quão alto o ScrollPanel precisa ser. Você precisará anexar um manipulador de redimensionamento da janela, assim como para redimensiona de captura e corrigir as coisas depois.

Pelo menos, essa é a situação com evitando a barra de rolagem do navegador para as coisas como eu vejo isso agora. Se eu estiver errado, alguém, por favor, deixe-me saber como eu tenho o código para apagar ...

Answer 3

O que funcionou para mim foi semelhante ao que bikesandcode escreveu:

1. Criar FlexPanel
2. Criar um ScrollPanel e adicione o FlexPanel a ele
3. Defina o tamanho necessário do ScrollPanel (usando unidades CSS absolutos)
4. criar um SimplePanel e adicione o ScrollPanel a ele
5. Adicione o SimplePanel ao TabPanel

Answer 4

O problema é, na verdade, que a tabela está definida para 100% largura / altura quando você defini-lo como uma criança guia. Se você fizer isso o overflow-auto não mais tem sentido desde que você permitir que a mesa flex para ser 100% (dos seus conteúdos).

estouro só funciona se você definir a largura / altura usando pixels.

Answer 5

Eu estou usando o HorizontalPanel (fornecido pelo gxt) como o pai para FlexTable e usando o método setAutoHeight (true). Esta multa está funcionando.