CODEWITHSUNDEEP
extjscombobox
alinflames
alinflames

Reputation: 69

extjs 3.4 combo tooltip with override

i'm trying to add a tooltip to the options of a combobox. It works fine following this example:

var comboWithTooltip = new Ext.form.ComboBox({
        tpl: '<tpl for="."><div ext:qtip="{state}. {nick}" class="x-combo-list-item">{state}</div></tpl>',
        store: store,
        displayField:'state',
        typeAhead: true,
        forceSelection: true,
        mode: 'local',
        triggerAction: 'all',
        emptyText:'Select a state...',
        selectOnFocus:true,
        applyTo: 'local-states-with-qtip'
    });

But if i try to apply the tpl to all the combo using the ovveride method it doesn't work:

Ext.override(Ext.form.ComboBox, {    
    triggerAction: 'all',
    forceSelection: true,
    typeAhead: true,
    typeAheadDelay: 200,
    minChars: 3, 
    tpl: '<tpl for="."><div ext:qtip="{text}" class="x-combo-list-item">{text}</div></tpl>';
});

I've also tryed to apply it on aftterender method:

Ext.override(Ext.form.ComboBox, {

    triggerAction: 'all',
    forceSelection: true,
    typeAhead: true,
    typeAheadDelay: 200,
    minChars: 3,   
    afterRender: function(){
    this.tpl = '<tpl for="."><div ext:qtip="{text}" class="x-combo-list-item">{text}</div></tpl>';
        Ext.form.Field.superclass.afterRender.call(this);
    }
});

This actually works fine, but all combos will not select anymore automatycally the default value.

Upvotes: 1

Views: 372

Answers (1)

abeyaz
abeyaz

Reputation: 3164

You should override the constructor

Ext.override(Ext.form.ComboBox, {    
   triggerAction: 'all',
   forceSelection: true,
   typeAhead: true,
   typeAheadDelay: 200,
   minChars: 3,

   constructor: function(config){
       config = config || {};
       config.tpl = this.tpl = '<tpl for="."><div ext:qtip="{text}" class="x-combo-list-item">{text}</div></tpl>';

       Ext.form.ComboBox.superclass.constructor.apply(this, arguments);
   }
});

This should work.

Upvotes: 1

Related Questions