Pbm with Icons in Buttons in an initially collapsed ContentPanel

[JetDEV]

Hi,

I meet a problem when trying to add Icons in Buttons in a ContentPanel initially collapsed (that is especially always the case in an AccordionLayout!!!). I've tried several Layouts for my ContentPanels but no success

I use GXT 2.1.0 (with its patch mentionned in thread http://www.extjs.com/forum/showthread.php?p=412673 for GWT 2.0) and GWT 2.0

Here is a sample code:

public class TestButtonIconWindow extends Window {

    public TestButtonIconWindow() {
        
        setHeading("Test Button Icons in Expanded/Collapsed ContentPanels");
        
        //=======  A ContentPanel initially expanded
        ContentPanel expanded = new ContentPanel();
        expanded.setHeading("initially expanded");
        expanded.setCollapsible(true);

        // Buttons
        Button be = new Button("text and icon", Resources.ICONS.album());
        Button be2 = new Button("", Resources.ICONS.album());
        Button be3 = new Button("only text");
        expanded.add(be);
        expanded.add(be2);
        expanded.add(be3);

        // ButtonBar
        Button be4 = new Button("text and icon", Resources.ICONS.album());
        Button be5 = new Button("", Resources.ICONS.album());
        Button be6 = new Button("only text");
        expanded.getButtonBar().add(be4);
        expanded.getButtonBar().add(be5);
        expanded.getButtonBar().add(be6);

        expanded.expand();

        //======= A ContentPanel initially collapsed
        ContentPanel collapsed = new ContentPanel();
        collapsed.setHeading("initially collapsed");
        collapsed.setCollapsible(true);

        // Buttons
        Button bc = new Button("text and icon", Resources.ICONS.album());
        Button bc2 = new Button("", Resources.ICONS.album());
        Button bc3 = new Button("only text");
        collapsed.add(bc);
        collapsed.add(bc2);
        collapsed.add(bc3);

        // ButtonBar
        Button bc4 = new Button("text and icon", Resources.ICONS.album());
        Button bc5 = new Button("", Resources.ICONS.album());
        Button bc6 = new Button("only text");
        collapsed.getButtonBar().add(bc4);
        collapsed.getButtonBar().add(bc5);
        collapsed.getButtonBar().add(bc6);

        collapsed.collapse();

        // Adding ContentPanels to window
        add(expanded);
        add(collapsed);
    }

}

Here are the results:

1. Opening the window for the first time: ButtonIcons_1.png
2. After expanding the ContentPanel initially collapsed: ButtonIcons_2.png
3. The ButtonBar of the ContentPanel initially collapsed: ButtonIcons_3.png

Is it a known issue??? Please Help

[jlobraco]

Has any one determined the cause of this?

[mcniti]

Hi,

we have exactly the same issue. I have reposted this issue in the premium forum http://www.extjs.com/forum/showthread.php?t=91791 .

We have only seen this happening in FF 3.0 and 3.5.

Let's see what happens...

[obdobion]

I have a very simple example and the solution that worked for me.

I have a panel that adds a button and sets the buttons icon style. And I immediately, in onRendor, set the visibility of the button to false. Later in the application I set the visibility to true. And the problem is that the icon does not appear on the button.

My work-around solution is to set the icon style again after setting the visibility to true. The icon then appears.

[mcniti]

Hi obdobion,

thanks for the workaround. I could solve the issue by calling button.setIcon(button.getIcon()); for all buttons in onRender and afterExpand method. It looks a bit ugly because you can still see the wrong position and it is corrected a short moment later afterwards.
It seems like the issue cannot be solved before the button is rendered.

From my perspective it appears to be a bug in GXT.

Thanks again.

[lovkiys]

this behaviour is caused by the 'overflow' feature of Toolbar, when buttons cannot be fitted they got rendered as menu. If you call 'setOverflowEnabled(false), buttons appearance should be consistent regardless of initial visibility state of container.

[renaudgillet]

Hi lovkiys, Where does the method 'setOverflowEnabled' come from??? I've found this method nowhere in GXT? On what Object did you find it please?

Kind regards

Using GXT 2.1.1 it becomes:

ButtonInGXT2.1.1.png