Большой объем:Создание гибкой таблицы с возможностью прокрутки в полноэкранной панели вкладок
Вопрос
Я бы хотел создать панель вкладок, которая занимает всю клиентскую область браузера, и внутри нее поместить гибкую таблицу, которая при необходимости прокручивается.Однако у меня возникают проблемы с достижением этого.Я пытался:
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 {
overflow: auto;
}
Хотя панель вкладок должным образом занимает 100% ширины, в конечном итоге она масштабирует свою высоту до внутренней гибкой таблицы, а не накладывает на нее полосы прокрутки.Как я могу сделать так, чтобы клиентская область tabpanel была независимой от размера ее дочернего элемента здесь?
Решение 2
Похоже, что в GWT 2.0 появилась новая система компоновки, которая должна делать то, что я хотел: http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#LayoutPanels
Другие советы
Вероятно, вам понадобится использовать панель прокрутки внутри этой вкладки, чтобы получить желаемый эффект.ScrollPanel - это контейнер, который просто берет один виджет и при необходимости помещает на него полосу прокрутки.Я должен отметить, что ScrollPanel, насколько я знаю, зависит от установки для нее явного размера, в противном случае она будет счастливо расширяться вместе с содержимым, которое вы в нее помещаете.
Однако с оговоркой:Существовал давний дефект с любыми прокручиваемыми панелями внутри TabPanel.В последний раз, когда я видел ее, она все еще была открыта.
http://code.google.com/p/google-web-toolkit/issues/detail?id=1343
Я думаю, что решение, которое вы бы искали здесь, состоит в том, чтобы поместить гибкую таблицу в какую-нибудь другую панель контейнера, например VerticalPanel (возможно, будет достаточно SimplePanel), затем поместить ее в ScrollPanel и, наконец, поместить в TabPanel.
Однако, как я уже отмечал, панель прокрутки потребует, чтобы вы вручную регулировали ее высоту.Итак, если вы хотите, чтобы она оставалась высотой окна, это потребует написания некоторого кода, который проверяет размер браузера и определяет, какой высоты должна быть панель прокрутки.Вам также нужно будет прикрепить обработчик изменения размера к окну, чтобы отслеживать изменения размера и затем все исправлять.
По крайней мере, такова ситуация с отказом от полосы прокрутки браузера для вещей, как я вижу это прямо сейчас.Если я ошибаюсь, кто-нибудь, пожалуйста, дайте мне знать, так как у меня есть код для удаления...
То, что сработало у меня, было похоже на то, что написал bikesandcode:
- Создать гибкую панель
- Создайте ScrollPanel и добавьте к ней FlexPanel
- Установите необходимый размер панели прокрутки (используя абсолютные единицы измерения CSS)
- создайте SimplePanel и добавьте к нему ScrollPanel
- Добавьте SimplePanel в панель вкладок
Проблема на самом деле в том, что для таблицы установлено значение 100% width / height, когда вы устанавливаете ее в качестве дочерней вкладки.Если вы сделаете это, автоматическое переполнение больше не будет иметь смысла, поскольку вы разрешаете, чтобы таблица flex составляла 100% (от ее содержимого).
переполнение работает только в том случае, если вы задаете ширину / высоту с помощью пикселей.
Я использую HorizontalPanel (предоставленную gxt) в качестве родительского элемента для FlexTable и использую метод setAutoHeight(true).Это работает нормально.