Cómo volver a vaciar ComboBox cuando forceSelection se establece en TRUE(ExtJS 4)

filter store extjs

Question

Tengo un cuadro combinado con forceSelection config está configurado como verdadero.

El cuadro combinado es opcional. Puede estar vacio

Si el usuario elige una de las opciones y luego vuelve a vaciar el cuadro combinado, no quiere estar vacío.

El cuadro combinado siempre restaura el valor seleccionado previamente.

Es ridículo. Debe estar vacío cuando el usuario elimine el valor.

¿Cómo resolver este problema? ¿Hay una configuración que me perdí?

Answer 1

¿Podría reemplazar forceSelection con allowEmpty: false? En mi opinión, forceSelection está haciendo completamente lo que debería hacer: obliga al usuario a seleccionar algo de la lista. Otra opción es agregar un elemento adicional en la lista, como Ninguno, por ejemplo. Así que el usuario podría seleccionarlo.

Answer 2

Creo que si tiene ambos conjuntos allowBlank y forceSelection en true, realmente debería poder tener ninguna selección (o no tendría el conjunto allowBlank en true).

Aquí hay un MOD global para que todos los cuadros combinados se comporten de esa manera.

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

    });
});

O alternativamente, este MOD también cierra el selector y dispara el evento de select con un valor nulo cuando el usuario vacía el campo:

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 3

En 4.2, solo debe anular el método assertValue del cuadro combinado.

En lugar de:

if (me.forceSelection) {

Debes poner:

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

Answer 4

He resuelto este problema con el oyente ''cambio''. Fragmento de código de ejemplo

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

Cuando elimina el valor seleccionado, el valor ComboBox se establece en nulo. Por lo tanto, simplemente puede verificar ese valor y restaurar el valor de ComboBox a uno predeterminado.

Answer 5

Me encontré con este problema también.

El cuadro combinado siempre restaura el valor seleccionado previamente.

No es tanto restaurar el valor como el usuario lo está reseleccionando después de que elimine el valor. Es decir: con forceSelection: true el cuadro combinado insiste en bajar su menú, esto significa que cuando un usuario regresa al cuadro combinado para eliminar un elemento, el menú del cuadro combinado cae con el elemento seleccionado originalmente resaltado, luego el usuario elimina el valor en el cuadro combinado y las pestañas al siguiente, el cuadro combinado mira para ver qué elemento está resaltado en la lista desplegable y lo llena en el campo, listo, reseleccionado.

En cambio, si el usuario elimina el valor, luego presiona la tecla ESC para cerrar el menú desplegable combinado y luego las pestañas a la siguiente, el valor no se completará.

Supongo que esta es una función para habilitar el control solo del teclado para que no tenga que hacer clic para desplegar el menú.

Afortunadamente, los usuarios no tardaron mucho en comprender esto y hacer uso de la tecla ESC. También agregué la configuración preventMark: true para manejar el mensaje de error cuando esto ocurrió.

Supongo que si realmente no puede tener esto, podría agregar un oyente al change o incluso al evento validitychange que verifica si el campo ahora está vacío y luego colapsa el menú si lo está. Esto debería evitar que vuelva a seleccionar cuando se mueva a otro campo de la misma manera que cerrarlo con la tecla ESC.

Answer 6

Prueba esto

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

Answer 7

Sí, tengo el mismo tipo de cuadro combinado, pero uso Editable = "false" y ForceSelection = "true". Cuando selecciono el valor con el teclado y presiono enter, selecciona el último valor.

Answer 8

También tuve el mismo problema con los combos, y desafortunadamente, la mejor solución que se me ocurrió fue un botón img / para borrar el valor seleccionado, luego conectar el siguiente usando jQuery:

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

No es ideal, pero creo que es bastante limpio y fácil de usar. Espero eso ayude.

Answer 9

Usa lo siguiente como tu combobox base:

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

Answer 10

en la configuración de combo agregar

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

PD: idea de @ aur1mas

Answer 11

intenta usar esto complete el valor de lastSelection = [] en un valor vacío

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

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