Come svuotare ComboBox quando forceSelection è impostato su TRUE (ExtJS 4)

Question

Ho una casella combinata con forceSelection config è impostato su true.

La casella combinata è facoltativa. Può essere vuoto

Se l'utente sceglie una delle opzioni e quindi ri-svuota la casella combinata, non vuole essere vuota.

La casella combinata ripristina sempre il valore selezionato in precedenza.

È ridicolo. Dovrebbe essere vuoto quando l'utente cancella il valore.

Come risolvere questo problema? C'è una configurazione che mi è sfuggita?

Answer 1

Ho risolto questo problema con il listener 'change'. Esempio di snippet di codice

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

Quando si elimina il valore selezionato, il valore di ComboBox è impostato su null. Quindi puoi semplicemente controllare quel valore & ripristinare il valore di ComboBox su quello predefinito.

Answer 2

potresti sostituire forceSelection con allowEmpty: false? A mio avviso, forceSelection sta facendo completamente ciò che dovrebbe fare: obbliga l'utente a selezionare qualcosa dall'elenco. Un'altra opzione è aggiungere un elemento in più nell'elenco, ad esempio Nessuno. Quindi l'utente potrebbe selezionarlo.

Answer 3

Ho anche colpito lo stesso problema con le combo, e purtroppo la soluzione migliore mi è venuta era un pulsante/img per cancellare il valore selezionato, quindi agganciando il seguente utilizzando jQuery:

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

Non ideale, ma penso che sia abbastanza pulito e facile da usare. Spero che sia d'aiuto.

Answer 4

Ho incontrato anche questo problema.

La casella combinata ripristina sempre il valore selezionato in precedenza.

Non è tanto ripristino il valore come l'utente è riselezionare esso dopo si elimina il valore. Cioè: con forceSelection: true la casella combinata insiste nel rilasciare il suo menu, questo significa che quando un utente torna nella casella combinata per eliminare un elemento, il menu della casella combinata si abbassa con l'oggetto selezionato in origine, l'utente elimina il valore in la casella combinata e le schede alla successiva, la casella combinata cerca di vedere quale elemento è evidenziato nell'elenco a discesa e lo riempie nel campo, voilà, riselezionato.

Invece, se l'utente elimina il valore, quindi preme il tasto ESC per chiudere la combo menu a discesa e poi schede per il prossimo il valore non si riempirà.

Suppongo che questo sia una funzionalità per abilitare il controllo solo della tastiera in modo che non sia necessario fare clic per accedere al menu.

Fortunatamente, non ho impiegato molto tempo per i miei utenti a capire questo e utilizzare il tasto ESC. Ho anche aggiunto la configurazione preventMark: true per gestire il messaggio di errore quando ciò si è verificato.

Suppongo che se davvero non si può avere questo, è possibile aggiungere un ascoltatore allo change o anche l'evento validitychange che controlla se il campo è ora vuoto e quindi comprime il menu se lo è. Questo dovrebbe impedirgli di riselezionare quando si passa ad un altro campo nello stesso modo in cui lo chiude con il tasto ESC.

Answer 5

Credo che se avete sia allowBlank e forceSelection impostata su true, si dovrebbe davvero essere in grado di avere nessuna selezione (o non avrebbe il allowBlank impostato a true).

Ecco un MOD globale per tutte le caselle combinate per comportarsi in questo modo.

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

    }); 
}); 

Oppure, in alternativa, questo MOD chiude anche il selettore e incendi select evento con nulla quando l'utente svuota 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 6

In 4.2, si deve solo sostituire metodo assertValue del combobox.

Invece di:

if (me.forceSelection) { 

Si dovrebbe mettere:

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

Answer 7

Sì ho lo stesso tipo di combobox, ma io uso modificabile = "false" e ForceSelection = "true". Quando seleziono il valore con la tastiera e premo invio, seleziona l'ultimo valore.

Answer 8

provare a utilizzare questo. compilare il valore di lastSelection = [] in un valore vuoto

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

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

Answer 9

in config di combo aggiungere

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

PS: idea da @ aur1mas

Answer 10

Prova questo

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

Answer 11

Utilizza il seguente come casella combinata di 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(); 
       } 
      }); 
     } 
    } 
})