How to do in-place change of display field in combobox

Question

I have an ExtJS ComboBox which is linked to data which is id and name. I have the valueField set to the id and the displayField set to the name. The data is loaded from a JsonStore.

What I want to do is to be able to change the name for a given id in place by editing the textfield part of the combobox.

I've got this mostly working by listening to the change event. The change event gets called with a newValue set to the new displayField. I can then change that in the database and reload the store. However, when I move the focus off the combobox the change event gets called again with an id. I do not have a reliable way to differentiate between a change of the text and a change of the selection.

Code follows. Many thanks for any help.

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

I am not familiar with the behaviour that the change event is called when the control looses focus, however, you should be able to to compare oldValue with newValue to see if the user has actually changed anything.