ExtJS的工具提示多選組合框的選擇項

Question

我已經做了提示的下拉列表中的項目是這樣的：

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

，現在我什麼提示了選擇的項目，請注意，組合框是多選，我想請參閱懸停時選定項目的正確提示。

我爲x-tagfield-item提供了什麼工具提示。

Answer 1

使用XTemplate的解決方案可能是最好的。但只有在列表呈現時才調用該模板。所以你可以設置工具提示，只要在模板打開的時候使用。

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的 - 我們可以從事件函數中使用的代碼，並把它放到其他一些事件，然後將它選擇的產品清單。