Question

我在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(),
});

现在的样子：

Current

这是我想看到的：

enter image description here

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

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

非常感谢

Answer 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/

Answer 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/

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

2 个答案: