View Full Version : How to do in-place change of display field in combobox

3 Jan 2010, 11:06 AM
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...',
scope: book,
'select': function(combo, record, index) {
this.authorId = combo.getValue();
'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 };
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);
this.authorId = responseObject.authorId;
// Difficult to access the combobox so let's save directly.
} else {
alert('change trail');
var authorDto = { name: newValue, bookId: book.id };
url : '/RestWAR/personal/book/' + oldValue + '.json',
method : 'PUT',
headers : {'Content-Type': 'application/json'},
jsonData : authorDto,
scope : [field, oldValue],
success : function(response, opts) {
this[0].setValue.createDelegate(this[0], [this[1]]), null, {single: true}

4 Jan 2010, 6:56 PM
Bump? Anyone have any ideas?
Or do I need to redesign my interaction?