Comment effectuer un changement de zone d'affichage sur place dans la zone de liste déroulante

Question

J'ai une zone de liste déroulante ExtJS qui est liée à des données dont l'ID et le nom. J'ai le valueField défini sur l'ID et le displayField défini sur le nom. Les données sont chargées à partir d'un JSONStore.

Ce que je veux faire est de pouvoir changer le nom d'un identifiant donné en éditant la partie textfield de la liste déroulante.

Cela fonctionne principalement en écoutant l'événement de modification. L'événement change est appelé avec une valeur newValue définie sur le nouveau displayField. Je peux alors changer cela dans la base de données et recharger le magasin. Cependant, lorsque je déplace le focus hors de la combobox, l'événement change est appelé à nouveau avec un identifiant. Je n'ai pas de moyen fiable de faire la différence entre un changement de texte et un changement de sélection.

Le code suit. Un grand merci pour toute aide.

var nameCombo = new Ext.form.ComboBox({ 
      fieldLabel: 'Name', 
      name: 'trailName', 
      xtype: 'combo', 
      store: nameStore, 
      valueField: 'id', 
      displayField: 'name', 
      typeAhead: true, 
      mode: 'local', 
      triggerAction: 'all', 
      emptyText: 'Select the author for this book...', 
      //selectOnFocus:true, 
      listeners:{ 
       scope: book, 
       'select': function(combo, record, index) { 
        this.authorId = combo.getValue();  
        saveBook(this); 
       }, 
       'change': function(field, newValue, oldValue) { 
        alert ('change: field.value [' + field.getValue() + '], newValue [' + newValue + '], oldValue [' + oldValue + '], segmentId [' + this.id + ']'); 
        if (oldValue == '') { 
         alert('create trail'); 
         var authorDto = { name: newValue, bookId: book.id }; 
         Ext.Ajax.request({ 
           url  : '/RestWAR/personal/book.json', 
           method : 'POST', 
           headers : {'Content-Type': 'application/json'}, 
           jsonData : authorDto, 
           scope  : this, 
           success : function(response, opts) { 
            var responseObject = Ext.decode(response.responseText); 
            bookStore.reload();          
            this.authorId = responseObject.authorId; 
            // Difficult to access the combobox so let's save directly. 
            saveTrailSegment(this); 
           } 
         }); 
        } else { 
         alert('change trail'); 
         var authorDto = { name: newValue, bookId: book.id }; 
         Ext.Ajax.request({ 
           url  : '/RestWAR/personal/book/' + oldValue + '.json', 
           method : 'PUT', 
           headers : {'Content-Type': 'application/json'}, 
           jsonData : authorDto, 
           scope  : [field, oldValue], 
           success : function(response, opts) { 
            this[0].store.on('load', 
             this[0].setValue.createDelegate(this[0], [this[1]]), null, {single: true} 
            ); 
            this[0].store.reload();                    
           } 
         }); 
        }      
       } 
      } 
     }); 

Answer 1

Je ne connais pas le comportement que l'événement de changement est appelée lorsque les PERD de contrôle mise au point, cependant, vous devriez être en mesure de comparer les oldValue avec newValue pour voir si l'utilisateur a réellement rien changé.