Extjs 5/6：在标记字段中已选择的项目中选择项目时要触发的事件

Question

我有一个标记字段可以从商店中多选项目。我想检测所有选定项目中的一个，我点击并突出显示所选值之一。

这是小提琴附件

https://fiddle.sencha.com/#fiddle/17or

Answer 1

Dunno，但应该很容易找到：

• 如果您查看生成的标记，请找到所选项目具有类x-tagfield-item-selected。
• 如果您在ExtJS代码库中搜索tagfield-item-selected，请发现tagSelectedCls为Ext.baseCSSPrefix + 'tagfield-item-selected'。

• 如果您在ExtJS代码库中搜索tagSelectedCls，请找到它在xtemplate中使用：

      me.multiSelectItemTpl = new Ext.XTemplate([
          '<tpl for=".">',
              '<li data-selectionIndex="{[xindex - 1]}" data-recordId="{internalId}" class="' + me.tagItemCls + childElCls,
              '<tpl if="this.isSelected(values)">',
              ' ' + me.tagSelectedCls,
              '</tpl>',
  

  有一个函数isSelected：

  isSelected: function(rec) {
      return me.selectionModel.isSelected(rec);
  },
  

• me.selectionModel引用的selectionModel是ExtJS的标准选择模型的机会很高，所以它可能有一个事件selectionchange。我们试试吧：

  var tagfield = Ext.create('Ext.form.field.Tag', {
  ...
  });
  tagfield.selectionModel.on('selectionchange',function() {console.log('selectionchange')});
  

  作品。