Results 1 to 4 of 4

Thread: Button with icon and tooltip in a grid cell

  1. #1

    Default Button with icon and tooltip in a grid cell

    Hello everyone. I'm having this problem for couple of days for now and haven't been able to solve it. Here is the problem itself:

    I am using GXT version 3.1 Beta. I want to have a button with a tooltip and an icon in a grid cell. Also button's icon depends on the grid's row data object, for example if this object's some boolean field is true this icon must be "active.png", otherwise "some passive.png". I've found a solution by using AbstractCell class, whose "render" method does the job. But the button(in fact html block) which is rendered is built from my custom html template and so isn't quite like the real GXT button. Of course, I'm using some css styles to decorate the button's border, hover, but still, it isn't quite like the real button. Also, in this case the tooltip is included in my custom html template and works well.
    So, another way to go is to use ButtonCell class. In the "render" method I'm setting the icon I want to appear using the "setIcon" method, then I set handler for the button using "addSelectHandler" method and after that I call "super.render". Everything works quite well, but the problem is in tooltip. ButtonCell class doesn't have such method to set it's tooltip. So, I have to append some html code manually to the sb(SafeHtmlBuilder). I'm doing this like so:

    setIcon(getMyIcon());
    addSelectHandler(myHandler);
    sb.appendHtmlConstant("<span qtip='Test tooltip'></span>");
    super.render(context, null, sb);
    sb.appendHtmlConstant("</span>");

    After that the tooltip works just fine, but when I click on the produced button's icon, there is no response. Also, if I click on that narrow rectangle shaped space between the button's icon and button's outline, selection works fine ("onSelect" method is called). Clearly, icon isn't able to recognize the click.
    Please, help me! Thanks beforehand.

  2. #2
    Sencha User
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,737

    Default

    Can you post the full code for your cell? Its hard to guess what might be different without a little more detail.

  3. #3

    Default Here is my code for ButtonCell

    ButtonCell<Boolean> cell = new ButtonCell<Boolean>() {
    @Override
    public void render(Context context, Boolean value, SafeHtmlBuilder sb) {
    MyObject o = store.get(context.getIndex());
    setIcon(o.isActive() ? MyRegistry.getIcons().active() :MyRegistry.getIcons().inActive());
    sb.appendHtmlConstant("<span qtip='Test tooltip'></span>");
    super.render(context, null, sb);
    sb.appendHtmlConstant("</span>");
    }
    };
    cell.addSelectHandler(new SelectEvent.SelectHandler() {
    @Override
    public void onSelect(SelectEvent event) {
    MyObject o = store.get(context.getIndex());
    o.setActive(!o.isActive());
    store.update(o);
    }
    });
    statusColumn.setCell(cell);

    The tooltip works fine, but when I click on the button's icon, the click handler isn't called. However that narrow space between the icon and the button's outline is able to recognize click events.

  4. #4
    Sencha User
    Join Date
    Mar 2014
    Posts
    6

    Default Button with icon and tooltip in a grid cell

    Hi,

    The tooltip is NOT showing in following code, what i am doing wrong here ?
    Code:
    ColumnConfig<Client, String> clientId = new ColumnConfig<Client, String>(
                        ((ClientProperties) p).getGridId(), 75, "");
                        clientId.setColumnTextClassName(CommonStyles.get().inlineBlock()); 
                        clientId.setColumnTextStyle(btnPaddingStyle); 
                        TextButtonCell btn=new TextButtonCell()      {
                            @Override
                              public void render(Context context, String value, SafeHtmlBuilder sb) {
                              Client p = store.get(context.getIndex());
                              setIcon(!p.isSelectedAsFavourite() ? Resources.IMAGES.add() :Resources.IMAGES.minus());
                              if ( p.isSelectedAsFavourite()){
                               sb.appendHtmlConstant("<span qtip='Add To Favourites'>");
                              }else{
                                 sb.appendHtmlConstant("<span qtip='Remove From Favourites'>");
                              }
                              super.render(context,null, sb);
                              sb.appendHtmlConstant("</span>");
                              
                             
                              
                              }
                              };

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •