Hybrid View

  1. #1
    Sencha User
    Join Date
    Apr 2010
    Posts
    50
    Vote Rating
    0
    dmanchikalapudi is on a distinguished road

      0  

    Default Add customized ToolButtons to ContentPanel's Header

    Add customized ToolButtons to ContentPanel's Header


    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:

    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 ?

  2. #2
    Sencha User
    Join Date
    Nov 2008
    Location
    Vienna - Austria
    Posts
    870
    Vote Rating
    1
    micgala is on a distinguished road

      0  

    Default


    Have you tried:

    PHP Code:
    contentPanelInstance.setIconStyle("x-tool-printIcon"); 
    Also, please share your x-tool-printIcon definition

    Regards,
    Michel.

  3. #3
    Sencha User
    Join Date
    Apr 2010
    Posts
    50
    Vote Rating
    0
    dmanchikalapudi is on a distinguished road

      0  

    Default


    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 :

    Code:
     .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 ?

  4. #4
    Sencha User
    Join Date
    Apr 2010
    Posts
    50
    Vote Rating
    0
    dmanchikalapudi is on a distinguished road

      0  

    Default


    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.

  5. #5
    Ext User
    Join Date
    Dec 2010
    Posts
    1
    Vote Rating
    0
    shveta_g is on a distinguished road

      0  

    Default Add icon to header of Content Panel

    Add icon to header of Content Panel


    Hi ,

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

    Thanks.

  6. #6
    Sencha User
    Join Date
    Apr 2012
    Location
    Huelva (Spain)
    Posts
    1
    Vote Rating
    0
    madmariscal is on a distinguished road

      0  

    Default Try with this

    Try with this


    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();
    }
    }

Similar Threads

  1. Replies: 0
    Last Post: 14 May 2010, 6:58 AM
  2. [CLOSED] ContentPanel's header text selection
    By ypfamily in forum Ext GWT: Bugs (2.x)
    Replies: 3
    Last Post: 2 Jul 2009, 12:19 PM
  3. Customized header
    By FireGlow in forum Ext GWT: Help & Discussion (1.x)
    Replies: 5
    Last Post: 9 Jun 2009, 11:06 PM

Thread Participants: 3