多选组合框和 tpl - 在 Ext JS 中标记选定条目的问题

Posted 2023-02-26

【中文标题】多选组合框和 tpl - 在 Ext JS 中标记选定条目的问题

【英文标题】：Multiselect Combobox and tpl - Issue on marking selected entries in Ext JS

【发布时间】：2012-11-26 04:40:57

【问题描述】：

我已经通过使用 tpl 为组合框添加了快速提示（工具提示），如下所示，

'<tpl for="."><div ext:qtip="text" class="x-combo-list-item">text</div></tpl>'

但添加后，组合框不会标记（蓝色）所选条目。即，在我添加工具提示之前，可以将所选条目视为已标记或已选中（对我来说为蓝色）。但现在它不起作用（选定的实体没有被选中）。 这是我的代码，

                       
              name          : name,
              hideOnSelect  : false,
              triggerAction : 'all',
              mode          : 'local',
              width         : size,
              tpl           :'<tpl for="."><div ext:qtip="text" class="x-combo-list-item">text</div></tpl>',
              store         : new Ext.data.SimpleStore(
              id                : 0,
              fields            : ['value','text'],
              data          : data
              ),
              listWidth     : 400,
              valueField    : 'value',
              displayField  : 'text'
            

任何帮助都必须感谢...谢谢。

【问题讨论】：

你能详细说明这个问题吗？

我已经更新了问题。

如何更改它以获得我的要求？有人可以回复吗？

【参考方案1】：

displayTpl 也应该可以工作：

           
      name: name,
      hideOnSelect: false,
      triggerAction: 'all',
      mode: 'local',
      width: size,
      store: new Ext.data.SimpleStore(
          id: myCombo,
          fields: ['value','text'],
          data: data
      ),
      listWidth: 400,
      valueField: 'value',
      displayField: 'text',
      displayTpl: '<tpl for="."><div ext:qtip="text">text</div></tpl>'

更新

发现问题！您必须先启动 QuickTips。您的其余代码都很好！这是一个有效的fiddle

Ext.QuickTips.init();
var cb = new Ext.form.ComboBox(
    name: name,
    hideOnSelect: false,
    triggerAction: 'all',
    mode: 'local',
    width: 200,
    store: new Ext.data.JsonStore(
        id: "myCombo",
        fields: ['value', 'text'],
        data: [
             value: 1, text: 'one',
             value: 2, text: 'two',
             value: 3, text: 'three'
        ]
    ),
    listWidth: 250,
    valueField: 'value',
    displayField: 'text',
    renderTo: Ext.getBody(),
    tpl: '<tpl for="."><div ext:qtip="text" class="x-combo-list-item">text</div></tpl>'
);

【讨论】：

不，抱歉没有看到您使用的是 Ext JS 3.4。我只能建议升级（但我知道这并不总是一种选择）

您知道 Ext JS 3.4 中的任何其他解决方案吗？

【参考方案2】：

你能试试这个吗...

                   
          name          : name,
          hideOnSelect  : false,
          triggerAction : 'all',
          mode          : 'local',
          width         : size,
          store         : new Ext.data.SimpleStore(
          id                : myCombo,
          fields            : ['value','text'],
          data          : data
          ),
          listWidth     : 400,
          valueField    : 'value',
          displayField  : 'text',
          listConfig: 
               getInnerTpl: function() 
                 return '<div data-qtip="text">value</div>';
               
           

        

【讨论】：

我已经编辑了我的答案...你可以试试...然后告诉我

没有快速提示一切都很好。这对你有用吗？