ExtJs 3.4 : Set tool tip for combo box

问题:

I have an ExtJs combo box as following. I am using ExtJS 3.4. I need to set hover text for this combo box. i.e. when user hover over this combo box, message text should appear.

new Ext.form.ComboBox({
        store : driverStore,
        displayField : 'dName',
        valueField : 'dName',
        fieldLabel : 'Driver Name',
        id : 'drivercombo',
        allowBlank : false,
        typeAhead : true,
        forceSelection : true,
        mode : 'local',
        triggerAction : 'all',
        selectOnFocus : true,
        editable : false,
        hidden : false,
        disabled : true,
        minChars : 1,
        hideLabel : true,
        style : 'marginleft:10px',
        //width : 147,
        emptyText : 'Driver Name',
        flex : 1
    });

I know there is a way to set this tool tip messages for combo box items of the drop down menu. But I don't want it. I want a tool tip for my combo box.

How should I do that ?

回答1:

You can create Ext.ToolTip in listener for combobox render event and as tooltip target you can define combobox element.

var combo = new Ext.form.ComboBox({
    mode: 'local',
    renderTo: Ext.getBody(),
    store: new Ext.data.ArrayStore({
        id: 0,
        fields: [
            'myId',
            'displayText'
        ],
        data: [[1, 'item1'], [2, 'item2']]
    }),
    listeners: {
        render: function(c) {
          new Ext.ToolTip({
            target: c.getEl(),
            html: 'Tooltip content'
          });
        }
    },    
    valueField: 'myId',
    displayField: 'displayText'
});  

Fiddle with example: https://fiddle.sencha.com/#fiddle/2q6

回答2:

Put this in the Listener of combo box it worked at my side.

Ext.onReady(function() {

Ext.QuickTips.init();
    var combo = new Ext.form.ComboBox({
        mode: 'local',
        renderTo: Ext.getBody(),
        store: new Ext.data.ArrayStore({
            id: 0,
            fields: ['id', 'displaytext'],
            data: [
                [1, 'Vinayak']
            ]
        }),
        listeners: {
            render: function(c) {
                 Ext.QuickTips.register({ target: this.getEl(), 
                 text: 'Tooltip Data' });
            }
        },
        valueField: 'id',
        displayField: 'displaytext'
    });

});

You have to write

Ext.QuickTips.init(); on Ext.Ready