CODEWITHSUNDEEP
gwtextjscomboboxgxt
Qiou
Qiou

Reputation: 29

GXT 2.3 : Combobox : tooltip on hover

I'm using GWT 2.3.0 and Sencha EXT 2.3.1. I can not upgrade due to software requirements.

I've got a combobox, in a form, with some values. A few of these values cannont be entirely displayer because the width of the combobox is too short. But I'm not allowed to enlarge this field.

Is there a solution to add a tooltip, or show the entire value when you are hovering the value in the list ? Or make the displayed list larger than the display field ?

Thx, Q.

Upvotes: 0

Views: 2031

Answers (1)

the.wizard
the.wizard

Reputation: 1109

Actually it's pretty simple. Sencha Gxt 2.3 Examples has already provide a quite good example on how to add tooltip to combobox. But I will post it again for you in here, so here it goes: 

public void onModuleLoad() {
    VerticalPanel vp = new VerticalPanel();
    vp.setSpacing(10);

    ListStore<State> states = new ListStore<State>();
    states.add(getStates());

    ComboBox<State> combo = new ComboBox<State>();
    combo.setEmptyText("Select a state...");
    combo.setDisplayField("name");
    combo.setTemplate(getTemplate());
    combo.setWidth(150);
    combo.setStore(states);
    combo.setTypeAhead(true);
    combo.setTriggerAction(TriggerAction.ALL);
    vp.add(combo);  

    RootPanel.get().add(vp);
}
private native String getTemplate() /*-{
    return [
            '<tpl for=".">',
            '<div class="x-combo-list-item" qtip="{slogan}" qtitle="State Slogan">{name}</div>',
            '</tpl>' ].join("");
}-*/;

The key is to use a template to render the combobox value with qtip added to each one of the value div. You can read more about it in here If you want to see the result, it will looks like in sencha gxt 2 examples in here, just take a look at the second combobox, it will show you tooltip every time you hover the combobox item. That's it, hope it will help you. Thanks & Regards.

Upvotes: 3

Related Questions