GXT TabPanel с вкладками в верхнем левом и правом верхнем углу

Я новичок в GXT и пытаюсь создать TabPanel, в котором есть вкладки слева и справа (как на картинке 2). Я без проблем могу создать самую простую TabPanel как на картинке 1.

введите здесь описание изображения

В GWT мне удалось таким образом переместить некоторые вкладки вправо:

tabLayoutPanel.getTabWidget(i).getParent().addStyleName("right");

и CSS:

.right {
   float: right;
   margin-right: 6px;
}

Но я не нахожу такой опции, как getTabWidget в GXT TabPanel.

Не могли бы вы помочь мне с этим делом? Заранее спасибо.


tabs tabpanel gxt
person kpater87    schedule 30.01.2013    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вам нужно сделать небольшой хак, чтобы получить доступ к обработчикам вкладок в GXT 3.

class StylableTabPanel extends TabPanel {
    public void applyTabStyles(Widget widget, String styles) {
        findItem(getWidgetIndex(widget)).applyStyles(styles);
    }
}

Потом:

tabPanel = new StylableTabPanel();
HTML shortText = new HTML("Lorem ipsum...");
tabPanel.add(shortText, "Short Text");
HTML longText = new HTML("<b>lorem ipsum dolor sit amet...</b>");
tabPanel.add(longText, "Long Text");
tabPanel.applyTabStyles(longText, "margin-left: 300px;");

К сожалению, вам придется вычислять левое поле вручную, потому что здесь нельзя использовать «float: right»: разработчики GXT решили назначить «width: 1000000px;» к элементу UL, который содержит вкладки. Таким образом, такое плавающее правило просто выталкивает его за правый край вашего контейнера (если у вас нет экрана шириной более 1000000 пикселей;]).

Надеюсь, это поможет.

person domax    schedule 15.03.2013
comment
Я пробовал это, но заголовки вкладок по-прежнему отображались вверху. Не могли бы вы опубликовать полный код? - person yazz.com; 15.04.2013
comment
Вы спасли меня после многих часов работы с этим! Спасибо. Кстати, как вы пришли к решению? Одна вещь, которую я терпеть не могу в отношении GXT, заключается в том, что для меня не очевидно, как модифицировать базовую кодовую базу, чтобы делать то, что я хочу. - person NickO; 06.06.2013
comment
@NickO: Только инструменты разработчика в браузере (я предпочитаю Chrome для разработки) и изучение исходного кода GXT. Если ваша IDE настроена правильно (рекомендую IDEA или Eclipse + Maven), то все необходимые исходники будут под рукой. - person domax; 08.06.2013
comment
Еще одна вещь: из документации о методе applyStyles: Имена атрибутов стиля должны быть в нижнем регистре верблюда, например. backgroundColor:белый; цвет:красный;. Без этого firefox не отображает стили должным образом (в Chrome и IE он работает нормально). - person kpater87; 25.07.2013