ExtJS ComboBox - 选择所有项目时在字段中显示“任何”答案

【问题标题】：ExtJS ComboBox - displaying "Any" in the the field when All Items are selectedExtJS ComboBox - 选择所有项目时在字段中显示“任何”
【发布时间】：2014-05-15 10:56:17
【问题描述】：

我在 ExtJS 中有一个 ComboBox 组件，我将其用作过滤器。

用户可以选择多个项目（multiSelect : true）。选择值后，它们会正确显示在字段中。未选择任何项目时，将显示 emptyText 属性中的值。

现在，有没有一种简单的方法可以在选择所有选项时为案例定义文本？ allSelectedText 之类的？

这是对 ComboBox 的简单定义：

Ext.create('Ext.form.ComboBox', {
    multiSelect: true,
    fieldLabel: "Select item",
    emptyText: "Please select",
    store: Ext.create('Ext.data.Store', {
        fields: ['abbr', 'name'],
        data: [
            {"id": "1","name": "Item 1"}, 
            {"id": "2","name": "Item 2"},
            {"id": "3","name": "Item 3"}
        ]}),
    queryMode: 'local',
    displayField: 'name',
    valueField: 'id',
    renderTo: Ext.getBody(),
});

这就是现在的样子：

这是我希望看到的：

我已经设法与标签（字段旁边）进行交互，但我找不到简单的方法来更改输入元素的内容。

这里是 jsFiddle：http://jsfiddle.net/84dj8/

非常感谢

【问题讨论】：

标签： javascript extjs combobox selection extjs4.1

【解决方案1】：

没有简单的方法可以做到这一点，但可以创建一个小的解决方法：

listeners: {
    'select': function(cmp, rec){
        var store = cmp.getStore(),
            values = cmp.getValue();

        if(store.getCount() == values.length) {
            cmp.setValue('All');                  
        }
    }
}

http://jsfiddle.net/84dj8/1/

【讨论】：

非常感谢帕维尔。但是，它会更改字段的值，从而导致触发其他事件，例如更改。此外，在您选择最后一项后，下拉列表中的项目不会被选中。
不客气。确实，此操作会触发其他事件。可能可以使用linksuspendEvent/resumeEvent 函数创建解决方法。
对不起，上一条信息发错了。如果在suspendEvent 和resumeEvent 之间写入setValue 函数，可能不会触发changeEvent。对于选择问题，您需要手动遍历列表中的所有值并将“选定”类添加到每个元素。

【解决方案2】：

在这上面花了很长时间 - 这是一个简单的解决方案

Ext.define('AnySelectedCombo', {
   extend: 'Ext.form.ComboBox',
   alias: 'widget.anyselectedcombo',
   cls: "cst-filter",
   allSelectedText: "All", // default

   getDisplayValue : function() {
      // Check if all items are selected
      if (this.getStore() && this.value && (this.value.length > 0) && (this.getStore().getCount() == this.value.length)) {
        return this.allSelectedText;
      }
      // Otherwise return as normally
      return this.callParent(arguments);
   }
});

这里是 JS 小提琴：http://jsfiddle.net/84dj8/9/

【讨论】：