如何在组合框中就地更改显示字段

Posted 2023-02-23

【中文标题】如何在组合框中就地更改显示字段

【英文标题】：How to do in-place change of display field in combobox

【发布时间】：2011-01-01 00:56:21

【问题描述】：

我有一个 ExtJS 组合框，它链接到 id 和 name 的数据。我将 valueField 设置为 id，将 displayField 设置为 name。数据是从JsonStore 加载的。

我想要做的是能够通过编辑 combobox 的文本字段部分来更改给定 id 的名称。

我主要通过收听更改事件来完成这项工作。使用设置为新 displayField 的 newValue 调用更改事件。然后我可以在数据库中更改它并重新加载商店。但是，当我将焦点从组合框上移开时，更改事件会再次使用 id 调用。我没有可靠的方法来区分文本更改和选择更改。

代码如下。非常感谢您的帮助。

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

【参考方案1】：

我不熟悉控件失去焦点时调用 change 事件的行为，但是，您应该能够比较 oldValue 和 newValue 以查看用户是否实际更改了任何内容。