Comment re-vider ComboBox lorsque forceSelection est défini sur TRUE (ExtJS 4)
J'ai une liste déroulante avec forceSelection config est défini sur true.
La liste déroulante est facultative. Il peut être vide.
Si l’utilisateur choisit l’une des options puis vide la combo, il ne veut pas être vide.
La liste déroulante restaure toujours la valeur précédemment sélectionnée.
C'est ridicule. Il devrait être vide lorsque l'utilisateur supprime la valeur.
Comment résoudre ce problème? Y a-t-il une configuration que j'ai manquée?
J'ai résolu ce problème avec l'auditeur 'changer'. Exemple d'extrait de code
addListener('change', function() {
if (this.getValue() === null) {
this.reset();
}
});
Lorsque vous supprimez la valeur sélectionnée, la valeur ComboBox est définie sur null. Ainsi, vous pouvez simplement vérifier cette valeur et restaurer la valeur par défaut de ComboBox.
Utilisez ce qui suit comme liste déroulante de 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();
}
});
}
}
})
J'ai également rencontré le même problème avec les combos et, malheureusement, la meilleure solution que j'ai trouvée était un bouton img/pour effacer la valeur sélectionnée, puis relier ce qui suit à l'aide de jQuery:
$('#imgId').click(function () {
var combo = Ext.getCmp('cmpId');
combo.setValue(null);
combo.setRawValue(null);
});
Pas idéal, mais je pense que c'est assez propre et convivial. J'espère que ça aide.
pourriez-vous remplacer forceSelection par allowEmpty: false? À mon avis, forceSelection fait tout ce qu'il doit faire: il oblige l'utilisateur à sélectionner un élément de la liste. Une autre option consiste à ajouter un élément supplémentaire à la liste, comme par exemple Aucun. Donc, l'utilisateur peut le sélectionner.
J'ai rencontré ce problème aussi.
La liste déroulante restaure toujours la valeur précédemment sélectionnée.
Ce n'est pas tellement restauration la valeur que l'utilisateur est resélectionnant il après il supprime la valeur. C'est-à-dire que, avec forceSelection: true, la liste déroulante insiste pour afficher son menu. Cela signifie que lorsqu'un utilisateur retourne dans la liste déroulante pour supprimer un élément, le menu déroulant affiche l'élément sélectionné à l'origine en surbrillance, puis la valeur est supprimée. la liste déroulante et les onglets suivants, la liste déroulante cherche quel élément est mis en surbrillance dans la liste déroulante et le remplit dans le champ, le tour est joué, sélectionné.
Au lieu de cela, si l'utilisateur supprime la valeur, appuyez sur la touche Échap pour fermer le menu déroulant et then / onglet suivant, la valeur ne sera pas renseignée.
Je suppose que cette fonctionnalité permet d'activer uniquement le contrôle du clavier afin que vous n'ayez pas à cliquer pour faire défiler le menu.
Heureusement, mes utilisateurs n'ont pas tardé à comprendre cela et à utiliser la touche Échap. J'ai également ajouté la configuration preventMark: true pour gérer le message d'erreur lorsque cela se produisait.
Je suppose que si vous ne pouvez vraiment pas avoir cela, vous pouvez ajouter un écouteur à l'événement change ou même validitychange qui vérifie si le champ est maintenant vide, puis réduit le menu si tel est le cas. Cela devrait l’empêcher de sélectionner à nouveau lors du déplacement dans un autre champ de la même manière que le fermer avec la touche Échap.
Oui, j'ai le même type de liste déroulante, mais j'utilise Editable = "false" et ForceSelection = "true". Lorsque je sélectionne la valeur avec le clavier et que j'appuie sur Entrée, la dernière valeur est sélectionnée.
Essaye ça
listeners:{change:{fn:function(combo, value){combo.clearValue();}}}
essayez d'utiliser ceci. remplissez la valeur de lastSelection = [] dans une valeur vide
Ext.override(Ext.form.field.ComboBox, {
onChange : function(newVal, oldVal) {
var me = this;
me.lastSelection=[];
me.callParent(arguments);
},
});
Je pense que si vous avez défini allowBlank et forceSelection sur true, vous devriez vraiment pouvoir ne pas avoir de sélection (sinon vous ne voudriez pas que allowBlank soit défini sur true).
Voici un MOD global pour que toutes les boîtes à choix se comportent de cette manière.
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 );
},
});
});
Ou bien, ce MOD ferme également le sélecteur et déclenche l'événement select avec null lorsque l'utilisateur vide le champ:
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 );
},
});
dans la configuration de combo ajouter
listeners: {
'change': function (combo, newValue) {
if (newValue === null)
combo.reset();
}
}
PS: idée de @ aur1mas
En 4.2, vous devez simplement remplacer la méthode assertValue de la combobox.
Au lieu de:
if (me.forceSelection) {
Vous devriez mettre:
if (me.forceSelection && (!Ext.isEmpty(value) || !me.allowBlank)) {