带有覆盖的extjs 3.4组合工具提示

时间:2017-05-12 09:56:02

标签: extjs combobox

我正在尝试为组合框的选项添加工具提示。 它遵循以下示例正常工作:

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

但是如果我尝试使用ovveride方法将tpl应用于所有组合,则它不起作用:

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

我也尝试将它应用于aftterender方法:

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

这实际上工作正常,但所有组合都不会自动选择默认值。

1 个答案:

答案 0 :(得分:0)

您应该覆盖构造函数

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

这应该有用。