GWT: Создание прокручиваемого FlexTable в полноэкранном TabPanel

Question

Я хотел бы создать TabPanel, который занимает всю клиентскую область браузера, и внутри этого, если необходимо, прокручивается FlexTable. Однако у меня возникают проблемы с этим. Я пробовал:

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

Где переполнения авто определяется как:

.overflow-auto { 
    overflow: auto; 
} 

Хотя вкладка панели правильно занимает ширину 100%, он заканчивает масштабирование его высоты к внутренней FlexTable, а не накладывая на него полосы прокрутки. Как я могу сделать клиентскую область tabpanel независимой от размера своего ребенка здесь?

Answer 1

Похоже на GWT 2.0 имеет новую систему компоновки, которая должна делать то, что я хотел: http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#LayoutPanels

Answer 2

Проблема в том, что таблица установлена ​​на 100% ширины/высоты, когда вы устанавливаете ее как дочерний элемент. Если вы это сделаете, переполнение-auto больше не имеет смысла, поскольку вы позволяете таблице flex быть на 100% (от ее содержимого).

переполнение работает только при установке ширины/высоты с использованием пикселей.

Answer 3

Возможно, вам понадобится ScrollPanel внутри этой вкладки, чтобы получить необходимый эффект. ScrollPanel - это контейнер, который принимает только один виджет и при необходимости накладывает на него полосу прокрутки. Я должен отметить, что ScrollPanel, насколько мне известно, зависит от установки на нем явного размера, иначе он будет радостно расширяться с содержимым, которое вы в него вставляете.

Обеспокоенность: однако, существовал давний дефект с любыми прокручиваемыми панелями внутри TabPanel. Последнее, что я видел, все еще было открытым.

http://code.google.com/p/google-web-toolkit/issues/detail?id=1343

Я думаю, что решение, которое вы бы искать здесь поставить FlexTable в какой-либо другой контейнер панели, как VerticalPanel (возможно SimplePanel будет достаточно), а затем положить, что в ScrollPanel и, наконец, засуньте это в TabPanel.

Как я уже отмечал, ScrollPanel вам понадобится, чтобы управлять его высотой вручную. Итак, если вы хотите, чтобы он оставался высотой окна, это будет связано с написанием кода, который проверяет размер браузера и определяет, насколько высок должен ScrollPanel. Вам нужно будет прикрепить обработчик изменения размера к окну, чтобы поймать размеры и исправить ситуацию.

По крайней мере, это ситуация, когда вы избегаете полосы прокрутки браузера для вещей, как я ее вижу прямо сейчас. Если я ошибаюсь, пожалуйста, сообщите мне, поскольку у меня есть код для удаления ...

Answer 4

То, что сработало для меня было похоже на то, что bikesandcode писал:

1. Создать FlexPanel
2. Создать ScrollPanel и добавьте FlexPanel к нему
3. Установите необходимый размер ScrollPanel (с использованием абсолютных CSS единиц)
4. создать SimplePanel и добавить к нему ScrollPanel
5. Добавьте SimplePanel на вкладку Панель

Answer 5

Я использую HorizontalPanel (предоставляется gxt) в качестве родителя для FlexTable и используя метод setAutoHeight (true). Это работает нормально.