多选组合框所选项目的 Extjs 工具提示

Question

我已经为这样的下拉列表项完成了工具提示：

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

现在我选择项目的工具提示，注意组合框是多选的，我想在悬停时看到所选项目的正确工具提示。

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 - 我们可以使用事件函数中的代码并将其放入其他事件中，然后将所选项目列表传递给它。