При изменении родительского cb в комбинированном поле со списком отображается поле значения вместо поля отображения

Question

Как сбросить цепочку в моем примере 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.

https://fiddle.sencha.com/

Answer 1

Вы можете видеть в своей скрипке, что она не использует valueField, но сохраняет значение.

Поскольку хранилище было изменено, значение теперь не связано ни с чем в новом хранилище, поэтому вы продолжаете видеть только значение.

Вы можете очистить коробку, установив 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%'
    }

до тех пор, пока вы знаете, что не будет дубликатов идентификаторов