Как перезапустить ComboBox, когда forceSelection установлен в TRUE (ExtJS 4)

Question

У меня есть поле со списком с forceSelection config установлено в true.

Комбинированная коробка не является обязательной. Он может быть пустым.

Если пользователь выберет один из вариантов, а затем повторно запустит поле со списком, он не хочет быть пустым.

В комбинированном поле всегда восстанавливается выбранное ранее значение.

Это смешно. Он должен быть пустым, когда пользователь удаляет значение.

Как решить эту проблему? Есть ли конфигурация, которую я пропустил?

Answer 1

Я решил эту проблему с прослушивателем «change». Пример фрагмента кода

addListener('change', function() { 
    if (this.getValue() === null) { 
    this.reset(); 
    } 
}); 

При удалении выбранного значения значение ComboBox устанавливается равным нулю. Таким образом, вы можете просто проверить это значение &, чтобы восстановить значение ComboBox по умолчанию.

Answer 2

Вы можете заменить forceSelection с помощью allowEmpty: false? На мой взгляд forceSelection делает все, что он должен делать - это заставляет пользователя выбирать что-то из списка. Другой вариант - добавить один дополнительный элемент в список - например, None. Поэтому пользователь может выбрать его.

Answer 3

Я также попал в таком же проблему с комбо, и, к сожалению, самым лучшим решением, которое я придумал было IMG/кнопкой для очистки выбранного значения, то подключение следующих с помощью JQuery:

 $('#imgId').click(function() { 
      var combo = Ext.getCmp('cmpId'); 
      combo.setValue(null); 
      combo.setRawValue(null); 
     }); 

Не идеальный, но я думаю, что он довольно чистый и удобный. Надеюсь, поможет.

Answer 4

Я столкнулся с этой проблемой также.

В комбинированном поле всегда восстанавливается выбранное ранее значение.

Это не так много восстановления значения, как пользователь его повторный выбор после он удаляет значение. Т.е.: с forceSelection: true combobox настаивает на отказе от своего меню, это означает, что когда пользователь возвращается в выпадающее поле для удаления элемента, меню combobox опускается вниз, когда элемент, который был изначально выбран выделенным, затем удаляет значение в combobox и вкладки к следующему, combobox смотрит, чтобы увидеть, какой элемент выделен в выпадающем списке и заполняет его в поле, вуаля, повторно выбранный.

Вместо этого, если пользователь удаляет значение, а затем нажимает клавишу ESC, чтобы закрыть комбо выпадающее меню и затем вкладки к следующему значению не заполнит себя в.

Я полагаю, что это функция, позволяющая управлять только клавиатурой, чтобы вам не нужно было щелкнуть, чтобы выпустить меню.

К счастью, моим пользователям не потребовалось много времени, чтобы понять это и использовать клавишу ESC. Я также добавил конфигурацию preventMark: true для обработки сообщения об ошибке, когда это произошло.

Я полагаю, что если вы действительно не можете этого сделать, вы можете добавить слушателя к change или даже к событию validitychange, который проверяет, является ли поле пустым, а затем сбрасывает меню, если оно есть. Это должно препятствовать повторному выбору при переходе в другое поле таким же образом, как и закрытие клавиши ESC.

Answer 5

Я считаю, что если у вас есть как allowBlank, так и forceSelection, установите значение true, вы действительно должны иметь возможность выбора (или у вас не будет allowBlank, установленного в true).

Вот глобальный MOD для всех списков, чтобы вести себя таким образом.

Ext.onReady(function(){ 

    // Allows no selection on comboboxes that has both allowBlank and 
    // forceSelection set to true  
    Ext.override(Ext.form.field.ComboBox, { 

     onChange: function(newVal, oldVal) 
     { 
      var me = this; 

      if (me.allowBlank && me.forceSelection && newVal === null) 
       me.reset(); 

      me.callParent(arguments); 
     },   

    }); 
}); 

Или же, это MOD также закрывает сборщик и пожары select события с нулем, когда пользователь опустошает поля:

Ext.override(Ext.form.field.ComboBox, { 

    onKeyUp: function(aEvent) { 
     var me   = this, 
      iKey   = aEvent.getKey(); 
      isValidKey = !aEvent.isSpecialKey() || iKey == aEvent.BACKSPACE || iKey == aEvent.DELETE, 
      iValueChanged = me.previousValue != this.getRawValue(); 

     me.previousValue = this.getRawValue(); 

     // Prevents the picker showing up when there's no selection 
     if (iValueChanged && 
      isValidKey && 
      me.allowBlank && 
      me.forceSelection && 
      me.getRawValue() === '') 
     { 
      // Resets the field 
      me.reset(); 

      // Set the value to null and fire select 
      me.setValue(null); 
      me.fireEvent('select', me, null); 

      // Collapse the picker 
      me.collapse(); 
      return; 
     }     
     me.callParent(arguments);   
    }, 

}); 

Answer 6

В 4.2, вы должны просто переопределить метод assertValue выпадающего списка в.

Вместо:

if (me.forceSelection) { 

Вы должны поставить:

if (me.forceSelection && (!Ext.isEmpty(value) || !me.allowBlank)) { 

Answer 7

Да у меня есть один и тот же тип выпадающий список, но я использую Editable = "ложь" и ForceSelection = "истина". Когда я выбираю значение с помощью клавиатуры и нажимаю enter, он выбирает последнее значение.

Answer 8

попробуйте использовать это. заполнить значения lastSelection = [] в пустое значение

 Ext.override(Ext.form.field.ComboBox, { 
     onChange : function(newVal, oldVal) { 
      var me = this; 
      me.lastSelection=[]; 

      me.callParent(arguments); 
     }, 
    }); 

Answer 9

в конфигурации комбо добавить

listeners: { 
    'change': function (combo, newValue) { 
     if (newValue === null) 
      combo.reset(); 
     } 
    } 

PS: идеи от @ aur1mas

Answer 10

Попробуйте

listeners:{change:{fn:function(combo, value){combo.clearValue();}}} 

Answer 11

В качестве базы данных используйте следующее:

Ext.define("Ext.ux.CleanableComboBox", { 
    extend: "Ext.form.ComboBox", 
    xtype: 'c-combobox', 
    initComponent: function() { 
     this.callParent(arguments); 
     if (this.allowBlank) { 
      this.addListener('change', function() { 
       if (!this.getValue() || this.getValue().length === 0) { 
        this.reset(); 
       } 
      }); 
     } 
    } 
})