Add customized ToolButtons to ContentPanel's Header

[dmanchikalapudi]

I am trying to add a printer icon to the header section of a ContentPanel. I defined a style (x-tool-printerIcon with my custom background image) I am trying to add it to the header using the following code:

 contentPanelInstance.getHeader().addTool(new ToolButton("x-tool-printIcon"));

I am unable to see it on the header. I am, however able to trace the correct style using browser's developer toolbar. What am I missing ?

[micgala]

Have you tried:

contentPanelInstance.setIconStyle("x-tool-printIcon"); 

Also, please share your x-tool-printIcon definition

Regards,
Michel.

[dmanchikalapudi]

I need the image for the ToolButton (not for the grid's icon). I tried that too ... but it did not work.. it shows space next to the panel's header title, but do not see an image next to it. My css class definition for x-tool-printIcon is :

 .x-tool-printIcon {
    background-image:url(../images/default/panel/printIcon.gif) !important;
	}

I do not have x-tool-printIcon-over style defined, but I dont think thats an issue .. or is it ? also ... should I follow the "x-tool-..." pattern to for my class names or can it be anything as long as I have same string referenced in my css and java file ?

[dmanchikalapudi]

Ok... I fixed it .... I dont know why, but it seems to be working once I added my class definition to the gxt-all.css file. All my other GXT specific css classes come off another file and work just fine ... but the class thats used inside ToolButton must, for some reason, come off the gxt-all.css file and must be included in the <application>.html file directly.

[shveta_g]

Hi ,

can you please tell , how did you add class definition to gxt-all.css file .

Thanks.

[madmariscal]

I used this code to add a help Toggle Button to hide/show a help panel in a Options ContentPanel.

public class PanelComponentsMenu extends ContentPanel{
public PanelComponentsMenu() {
...
PanelBottomHelp panelBottomHelp = new PanelBottomHelp("Press Options.");
this.setBottomComponent(panelBottomHelp);
this.getHeader().getTools().add(new ButtonShowHelp(panelBottomHelp));
...
}
}

Help Toggle Button Code:

public class ButtonShowHelp extends ToggleButton {
private ContentPanel c = null;
public ButtonShowHelp(ContentPanel contentPanel) {
this.c = contentPanel;
this.setSize(16, 16);
this.setIcon(Resources.ICONS16.helpShow());
this.setToolTip("Press to <b>hide/show</b> help panel.");
this.addSelectionListener(new SelectionListener<ButtonEvent>() {
@Override
public void componentSelected(ButtonEvent ce) {
execute();
}
});
}

private void execute() {
if(this.isPressed()) this.c.collapse();
else this.c.expand();
}
}