CODEWITHSUNDEEP
extjs
Giorgio
Giorgio

Reputation: 31

How to programmatically add tooltip to a combobox

I'm trying to add a tip to a combobox during runtime with the code below but it doesn't work:

onStartReport: function (aButton) {
    var lTip = Ext.getCmp('datasources');
    lTip.setTooltip("Information on datasource");
}

I also tried with this, but I get an error:

onStartReport: function (aButton) {
     var tip = Ext.create('Ext.tip.ToolTip', {
     target: 'datasources',
     html: 'Information on datasource'
     });        
}

view classic:

{
    xtype: 'combo',
    itemId: 'datasources',
    name: 'datasources',
    fieldLabel: 'Data sources',
    displayField: 'description',
    valueField: 'id',
    queryMode: 'local',
    value: 0,
    forceSelection: true,
    editable: false,   
    store: {
        data: [
            {id: 0, description: 'OnLine'},
            {id: 1, description: 'History'}
        ],
        fields: [
            {name: 'id', type: 'int'},
            {name: 'description', type: 'string'}               
        ],
        autoLoad: true
    }
}

Upvotes: 0

Views: 502

Answers (1)

Guilherme Lopes
Guilherme Lopes

Reputation: 4760

This method should be fine:

onStartReport: function (aButton) {
    var tip = Ext.create('Ext.tip.ToolTip', {
        target: 'datasources',
        html: 'Information on datasource'
});

The problem is that your component doesn't really have an id, the only config you added was itemId and they are not quite the same, see the documentation. This is also why Ext.getCmp('datasources') is not working.

One way to fix this is to simply change itemId to id and the reference will be found.

If you don't want to add an id to your component, and keep using itemId, you could use the code below: 

onStartReport: function (aButton) {
    var combo = Ext.ComponentQuery.query('#datasources')[0],
        tip = Ext.create('Ext.tip.ToolTip', {
        target: combo.el,
        html: 'Information on datasource'
});

There is also a third option which is to grab the combobox in it's relation to the component/controller that is calling the onStartReport method. I have added an example here: https://fiddle.sencha.com/#view/editor&fiddle/2hap

Upvotes: 1

Related Questions