Aswin Ramakrishnan
Aswin Ramakrishnan

Reputation: 3213

Ext JS Display Field in Combo Box's Tooltip

I'm trying to create an override to display a tooltip when the user hovers over a combo list item. My override looks like this:

Ext.override(Ext.form.ComboBox, {
     tpl: '<tpl for=".">',
             '<div ext:qtip="{Name}" class="x-combo-list-item">{Name}</div>',
           '</tpl>'
});

Is there a way I can access the combo box's displayField in the tpl instead of {Name}?

Upvotes: 0

Views: 3163

Answers (1)

Aswin Ramakrishnan
Aswin Ramakrishnan

Reputation: 3213

I should have looked in a couple of threads before asking this question. I found the answer in the thread here (Dumb why I didn't think of doing it this way though). I didn't notice that thread probably because the title was unclear.

This is what I came up with. (Sequence is the way to go, compared to override)

Ext.sequence(Ext.form.ComboBox.prototype, 'render', function (combo) {    
    this.tpl = (this.tpl ? this.tpl : '<tpl for="."><div ext:qtip="{' + this.displayField + '}" class="x-combo-list-item">{' + this.displayField + '}</div></tpl>');

    Ext.QuickTips.init();
    Ext.apply(Ext.QuickTips.getQuickTip(), {
        dismissDelay: 0,
        showDelay: 100
    });
});

I'll leave this thread open just in case anyone else is looking for this and couldn't find the other thread.

Upvotes: 1

Related Questions