GXT TabPanel with tabs on the top-left and top-right side

1
votes

I am new in GXT and I'm trying to create TabPanel which has some tabs on the left side and some on the right (like on the picture 2). I can without any problem create the simplest TabPanel like on the picture 1.

enter image description here

In GWT I've managed to move some tabs to the right side in that way:

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

and CSS:

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

But I don't find option like getTabWidget in GXT TabPanel.

Can you please help me with this case? Thanks in advance.

1
tabsgxttabpanel

1 Answers

4
votes

You have to do small hack to get access to tab handlers in GXT 3.

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

Then:

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

Unfortunately, you have to compute left margin manually, because you cannot use "float: right" here: GXT developers decided to assign "width: 1000000px;" to UL element that holds tabs. So such floating rule simply pushes it beyond the right edge of your container (unless you have screen more than 1000000 pixels width ;]).

I hope this helps.