Jak ponownie opróżnić składnik ComboBox, gdy ustawiona jest wartość forceSelection na TRUE (ExtJS 4)

Question

Mam pole kombi z ustawieniem forceSelection config na wartość true.

Pole kombi jest opcjonalne. Może być pusty.

Jeśli użytkownik wybierze jedną z opcji, a następnie ponownie opróżni pole kombi, to nie chce być puste.

Pole kombi zawsze przywraca poprzednio wybraną wartość.

To niedorzeczne. Powinien być pusty, gdy użytkownik usunie wartość.

Jak rozwiązać ten problem? Czy istnieje konfiguracja, którą przegapiłem?

Answer 1

Rozwiązałem ten problem za pomocą "słuchacza" zmian. Przykładowy fragment kodu:

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

Po usunięciu wybranej wartości, wartość ComboBox jest ustawiona na null. Więc możesz po prostu sprawdzić dla tej wartości & przywrócić wartość ComboBox do wartości domyślnej.

Answer 2

czy można zastąpić forceSelection przez allowEmpty: false? Moim zdaniem forceSelection robi dokładnie to, co powinien zrobić - zmusza użytkownika do wyboru czegoś z listy. Inną opcją jest dodanie jednego dodatkowego elementu na liście - na przykład Brak na przykład. Więc użytkownik może go wybrać.

Answer 3

Ja również trafić ten sam problem z combo i niestety najlepszym rozwiązaniem wymyśliłem było img/przycisk do kasowania wybranej wartości, a następnie podpinania się następujące przy użyciu jQuery:

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

Nie idealny, ale uważam, że jest dość czysty i przyjazny dla użytkownika. Mam nadzieję, że to pomoże.

Answer 4

Wpadłem też na ten problem.

Pole kombi zawsze przywraca wcześniej wybraną wartość.

To nie jest tak dużo przywrócenie wartość jako użytkownik ponownego wybierania to po on usuwa wartość. To znaczy: z forceSelection: true combobox nalega na zrzucenie menu, co oznacza, że ​​gdy użytkownik wraca do combobox, aby usunąć element, menu combobox spada z elementem, który został pierwotnie zaznaczony, użytkownik następnie usuwa wartość w combobox i tabulatory do następnego, combobox sprawdza, który element jest podświetlony na rozwijanej liście i wypełnia go do pola, voila, ponownie zaznaczone.

Zamiast tego, gdy użytkownik usunie wartość, a następnie naciska klawisz ESC, aby zamknąć kombi rozwijanego menu i następnie zaczepy do następnego wartość nie wypełni się w.

przypuszczam to jest funkcja umożliwiająca sterowanie wyłącznie za pomocą klawiatury, dzięki czemu nie trzeba klikać, aby rozwinąć menu.

Na szczęście szybko zrozumiałem i używam klawisza ESC. Dodałem także konfigurację preventMark: true, aby obsłużyć komunikat o błędzie, kiedy to wystąpiło.

Przypuszczam, że jeśli naprawdę nie możesz tego zrobić, możesz dodać detektor do zdarzenia change lub nawet validitychange, które sprawdza, czy pole jest teraz puste, a następnie zwija menu, jeśli jest. Powinno to uniemożliwić jej ponowne wybieranie podczas przechodzenia do innego pola w ten sam sposób, co zamykanie go klawiszem ESC.

Answer 5

Wierzę, że jeśli masz zarówno allowBlank i forceSelection ustawiona na true, naprawdę powinieneś być w stanie nie mieć wyboru (lub nie miałbyś ustawić allowBlank na true).

Oto globalny MOD dla wszystkich skrzynek typu combo, które zachowują się w ten sposób.

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

    }); 
}); 

Lub alternatywnie, ten mod zamyka również selektor i pożary select zdarzenie NULL, gdy użytkownik wpada na murawę:

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

w 4.2, należy po prostu zastąpić metodę assertValue ComboBox jest.

Zamiast:

if (me.forceSelection) { 

należy umieścić:

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

Answer 7

Tak mam ten sam typ combobox, ale używam edycji = "false" i ForceSelection = "true". Kiedy wybieram wartość za pomocą klawiatury i naciskam enter, wybieram ostatnią wartość.

Answer 8

spróbuj tego użyć. wypełnić wartości lastSelection = [] do pustej wartości

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

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

Answer 9

w config combo dodać

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

PS: pomysł z @ aur1mas

Answer 10

Spróbuj

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

Answer 11

Użyj poniższego narzędzia jako podstawy:

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