Extjs 更改父cb时，链式组合框显示valuefield而不是displayfield

在我的示例中，如何用extjs方式重置链式组合框

考虑这两个组合框：

{
            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%'
        }

相应的模型定义：

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

我的问题是，当我切换父组合框时，它关联的子组合框显示valueField而不是displayField

---

您可以在小提琴中看到，它不是使用值字段，而是保留值

由于存储已被更改，因此该值现在与新存储中的任何内容都没有关联，因此您只能看到该值

您可以通过设置力选择来清洁盒子

{
        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%'
    }

只要你知道不会有重复的ID