EXTJS Combobox tooltip

combobox tool tip

by ainop

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/ext-theme-classic/ext-theme-classic-all.css">

JavaScript

Ext.require([     'Ext.form.field.ComboBox',     'Ext.form.FieldSet',     'Ext.tip.QuickTipManager',     'Ext.data.*' ]);

Ext.onReady(function() {
    Ext.tip.QuickTipManager.init();

    
    Ext.define('SimpleModel', {
        extend : 'Ext.data.Model',
        fields : ['itemID', 'Title', 'Short', 'Type', 'isActive', 'TotalRows']
    });
    
    var states = [{'itemID':'1','Title':'test1','Short':'tooltip-test1','Type':'type1','isActive':'yes','TotalRows':'10'},
                   {'itemID':'2','Title':'test2','Short':'tooltip-test2','Type':'type2','isActive':'yes','TotalRows':'10'}
                   ];
    var store = Ext.create('Ext.data.Store', {
        model: 'SimpleModel',
        data: states
    });
    
    var customTplCombo = Ext.create('Ext.form.field.ComboBox', {
        fieldLabel: 'Select a single state',
        renderTo: Ext.getBody(),
        displayField: 'name',
        width: 320,
        labelWidth: 130,
        store: store,
        queryMode: 'local',

        listConfig: {
            getInnerTpl: function() {
                return '<div data-qtip="{Short}. {Title}">{Title} </div>';
            }
        }
    });
    
});//eof onReady