Chained combobox shows valuefield instead of displayfield when changing parent cb - extjs

Question

How to reset chained combobox in my example the extjs way?
Consider this two comboboxes:
{
xtype: 'combo',
bind:{
store: '{contacts}'
},
reference: 'contactsCombo',
displayField: 'name',
name: 'contact',
typeAhead: false,
editable: false,
fieldLabel: 'Contact',
emptyText: 'Select a contact...',
anchor: '95%',
listeners: {
change: 'onSelectChange'
},
},
{
xtype: 'combo',
name: 'phone',
reference: 'phonesCombo',
fieldLabel: 'Phone',
displayField: 'number',
valueField:'id',
hiddenName: 'id',
emptyText: 'Select a phone...',
bind: {
store: '{contactsCombo.selection.phoneNumbers}'
},
anchor: '95%'
}
And corresponding models defines:
Ext.define('AppsBoard.model.Contact', {
extend: 'Ext.data.Model',
fields: [
'id', 'name'
],
});
Ext.define('AppsBoard.model.ViewModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.related',
stores: {
contacts: {
model: 'AppsBoard.model.Contact',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'contacts.json',
reader: {
type: 'json',
rootProperty: 'data'
}
}
}
}
});
Ext.define('AppsBoard.model.PhoneNumber', {
extend: 'Ext.data.Model',
fields: [
'id',
{
name: 'contact_id',
type: 'int',
reference: {
type: 'AppsBoard.model.Contact',
inverse: {
role: 'phoneNumbers'
}
}
},
'number'
],
proxy: {
type: 'MyProxy',
reader: {
type: 'json'
}
}
});
Ext.define('AppTest.store.MyProxy', {
extend: 'Ext.data.proxy.Proxy',
alias: 'proxy.MyProxy',
read: function (operation) {
var resultSet = {
1: [{
"id": 1,
"contact_id": 1,
"number": "6045551212"
},
{
"id": 2,
"contact_id": 1,
"number": "8009996541"
}],
2: [
{
"id": 3,
"contact_id": 2,
"number": "1232131233"
}
]
};
operation.setResultSet(this.getReader().read(resultSet[operation.getFilters()[0].getValue()]));
operation.setSuccessful(true);
},
erase: function (operation) {
console.log(operation);
}
});
My problem is when i switching my parent Combobox, it's associated child combobox shows valueField instead of displayField.
https://fiddle.sencha.com/#fiddle/vtg

Answer 1

you can see in your fiddle it's not use valueField but it's keep the value.
Since the store has been change the value is now not associated to anything in the new store, therefore you keep seen only the value.
you can clean the box by setting the forceSelection
{
xtype: 'combo',
name: 'phone',
reference: 'phonesCombo',
fieldLabel: 'Phone',
displayField: 'number',
valueField:'id',
hiddenName: 'id',
emptyText: 'Select a phone...',
forceSelection: true,
bind: {
store: '{contactsCombo.selection.phoneNumbers}'
},
anchor: '95%'
}
as long as you know there won't be a duplicates IDs