Большой объем:Создание гибкой таблицы с возможностью прокрутки в полноэкранной панели вкладок

StackOverflow https://stackoverflow.com/questions/1252452

Вопрос

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

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:

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top