CODEWITHSUNDEEP
extjsextjs6extjs6-classic
Tato
Tato

Reputation: 195

Extjs tooltip for selected items of multiSelect combobox

I have done tooltip for drop-down list items like this: 

listConfig:   { 
                itemTpl: '<div data-qtip="{description}">{name}</div>'
          };

and now I what tooltip for selected items , note that combobox is multiSelect, and I want to see proper tooltip of selected item on hover.

I what tooltip for x-tagfield-item.

Upvotes: 0

Views: 1807

Answers (1)

pagep
pagep

Reputation: 3629

The solution using XTemplate would be probably the best. But the template is called only only when the list is rendered. So you can set the tooltip using if in the template only when it's opened.

listConfig: {
    itemTpl: new Ext.XTemplate(
        // The template if is called only when it's rendred
        "<tpl if='this.test()'>",
        '<div data-qtip="Not selected">{name}</div>',
        '<tpl else>',
        '<div data-qtip="Selected">{name}</div>',
        '</tpl>', {
            test: function () {
                // debugger
                // TODO Detect if item is selected render different tooltip
                return true;
            }
        }
    )
},

If you want to have dynamic tooltip on the opened list - I solved it using select event and editing the qtip directly in the dom.

onComboboxSelect: function (combo, record, eOpts) {
    var comboId = combo.getId();
    var alltheItems = combo.getStore().getData().items
    var recordId,
        query,
        element;

    // On each change we are going trough the all the values in the combo and set the qtip
    // Beacuse when the item is deselect we do not get it's value in the record object
    alltheItems.forEach(function (value) {
        recordId = value.internalId;
        query = Ext.String.format('#{0}-picker-listEl [data-recordid={1}] div', comboId, recordId);
        element = Ext.dom.Query.select(query)[0];

        // Check if the item is in the selected list
        if (record.some(function (e) {
                return e.internalId == recordId
            })) {
            element.setAttribute('data-qtip', 'Selected');
        } else {
            element.setAttribute('data-qtip', 'Not selected');
        }

    })
},

Working fiddle https://fiddle.sencha.com/#view/editor&fiddle/1lo7

Also instead of the tpl if - we could use the code from the event function and put it into some other event and pass it list of selected items.

enter image description here

Upvotes: 1

Related Questions