更改父 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/#fiddle/vtg

Answer 1

你可以在你的 fiddle 中看到它没有使用 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%'
    }

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

更改父 cb 时，链式组合框显示值字段而不是显示字段

Chained combobox shows valuefield instead of displayfield when changing parent cb

combobox

extjs

chained-select

sencha-fiddle

extjs6