Extjs用于multiSelect组合框的选定项目的工具提示

Question

我已经为下拉列表项做了工具提示，如下所示：

each

现在我选择项目的工具提示，请注意，combobox是multiSelect，我希望在悬停时看到所选项目的正确工具提示。

我是x-tagfield-item的工具提示。

Answer 1

使用XTemplate的解决方案可能是最好的。但仅在呈现列表时才调用模板。因此，您只能在模板打开时使用if设置工具提示。

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

如果你想在打开的列表上有动态工具提示 - 我使用select事件解决了它并直接在dom中编辑了qtip。

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

    })
},

工作小提琴https://fiddle.sencha.com/#view/editor&fiddle/1lo7

而不是tpl if - 我们可以使用事件函数中的代码并将其放入其他事件并传递给所选项目列表。