GXT 2.1 - Hidden toolbar don't layout the buttons after it's made visible

Problem:
I have a content panel that has set the accordion layout. The children panels have toolbar as top-component. First child-panel looks ok, but the others are wrong after expand (toolbar buttons are not correctly layout-ed).

Here's the test code:

public void testAccordionWithToolBar() {

    ContentPanel a = new ContentPanel(new AccordionLayout());
    a.setHeaderVisible(false);

    ContentPanel cp;
    cp = createChildPanel("child 1");
    a.add(cp);

    cp = createChildPanel("child 2");
    a.add(cp);

    cp = createChildPanel("child 3");
    a.add(cp);

    Window w = new Window();
    w.setLayout(new FitLayout());
    w.setHeading("Test Accordion");
    w.setSize(300, 300);
    w.add(a);
    w.show();
}

private ContentPanel createChildPanel(String title) {
    ContentPanel cp = new ContentPanel();
    cp.setHeading(title);

    /** add toobar as top-component of the child panel */
    ToolBar tb = new ToolBar();
    tb.setEnableOverflow(false);

    tb.add(new FillToolItem());
    tb.add(new Text("Buttons  "));

    Button b;

    b = new Button();
    b.setIcon(IconHelper.create("resources/images/default/dd/drop-add.gif"));
    tb.add(b);

    b = new Button();
    b.setEnabled(false); /** disabled button */
    b.setIcon(IconHelper.create("resources/images/default/dd/drop-no.gif"));
    tb.add(b);

    b = new Button();
    b.setIcon(IconHelper.create("resources/images/default/dd/drop-yes.gif"));
    tb.add(b);

    cp.setTopComponent(tb);

    return cp;
}

And here's the image with the bad result:



It seems that the problem is when something is collapsed, it gets hidden with display "none".

Actually, there is something wrong with the layout of the toolbar, when is not visible ... not strict related with the "expand" event, because I get wrong buttons when I have a TabPanel and I try to refresh the status (enabled/disabled) of the buttons from the background  TabItem, which is not visible.

 Note: This bad problem is also in GXT 2.0.4 !

Solution:
Don't worry if you have this problem, because -- HOOREY! -- I found the solution:

- First, you need to set:
   toolBar.setEnableOverflow(false);

to make the toolbar "non overflow"-able

- Secondly, you need to set:
   button.setMinWidth(22);

because when it's inserted in the toolbar, after this was rendered, the "insert(c, index)" is looking at the min-width of the button and if nothing is set then the default value (-1) is used, and bad result happens.

So, after you do these 2 things then the correct result is like below, a fully functional toolbar:



Cheers!

No comments:

Post a Comment