ExtJS 7.2 - 将记录加载到具有链接组合框和 forceSelection:true 的表单中不会加载所有值

Question

我有一个包含两个链接组合框的表单。第一个链接的组合框指示出现在第二个中的值。我在第二个组合框上有 forceSelection:true，这样当用户更改第一个组合框时，第二个组合框将被设置为空白，因为它不再是有效选项。链式组合按预期运行，但是当我使用 getForm().loadRecord(record) 将记录加载到此表单时，第一个组合的值设置正确但第二个不是，除非我设置 forceSelection:false.

下面的 fiddle 应该很清楚：sencha fiddle

单击“加载记录”应该会在 Fruits/Apple 中加载，但只显示 Fruits。第二次单击“加载记录”可获得所需的结果。如果您注释掉 forceSelection: true 它会按预期工作，但链接的组合不会按预期工作。有什么地方我做错了吗？

Answer 1

没那么容易。当你运行 form.loadRecord(rec).

时发生了什么

您设置了 FoodGroup 组合框
您设置了 FoodName 组合框。但是该值不存在，因为您的过滤器没有切换到适当的食物组。这就是为什么评论力选择有帮助的原因。（这就是评论过滤器也有帮助的原因）。
打开了食物名称的过滤器。商店现在有了新的价值。

您是第二次点击按钮。第一个组合框值相同，过滤器未触发（触发？），您在第二个商店中已经有适当的值并选择了该值。

如何解决：修复是丑陋的。您可以在商店 'refresh' 上监听（这意味着过滤器被触发），然后设置第二个值（或再次设置值）。

Ext.define('Fiddle.view.FormModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.fiddle-form-model',
    stores: {
        foodgroups: {
            fields: ['name'],
            data: [{
                foodgroupname: 'Fruits'
            }, {
                foodgroupname: 'Vegetables'
            }]
        },
        foods: {
            fields: ['foodgroupname', 'foodname'],
            filters: {
                property: 'foodgroupname',
                value: '{selectedFoodgroup.foodgroupname}'
            },
            data: [{
                foodname: 'Apple',
                foodgroupname: 'Fruits'
            }, {
                foodname: 'Banana',
                foodgroupname: 'Fruits'
            }, {
                foodname: 'Lettuce',
                foodgroupname: 'Vegetables'
            }, {
                foodname: 'Carrot',
                foodgroupname: 'Vegetables'
            }]
        }
    }
});

Ext.define('Fiddle.view.Form', {
    extend: 'Ext.form.Panel',
    xtype: 'fiddle-form',
    viewModel: {
        type: 'fiddle-form-model'
    },

    title: 'Combos',
    items: [{
        xtype: 'combo',
        itemId: 'FoodGroup', // To access FoodGroup
        displayField: 'foodgroupname',
        bind: {
            store: '{foodgroups}',
            selection: '{selectedFoodgroup}'
        },
        valueField: 'foodgroupname',
        forceSelection: true,
        name: 'foodgroup',
        fieldLabel: 'Food Group',
        value: 'Vegetables'
    }, {
        xtype: 'combo',
        itemId: 'FoodName', // To access FoodName
        bind: {
            store: '{foods}'
        },
        queryMode: 'local',
        forceSelection: true, //COMMENTING THIS OUT ACHIEVES DESIRED LOAD RECORD BEHAVIOR
        displayField: 'foodname',
        valueField: 'foodname',
        name: 'food',
        fieldLabel: 'Food',
        value: 'Carrot'
    }],

    buttons: [{
        text: 'Load Record',
        handler: function (btn) {
            // OUR UGLY FIX
            var form = btn.up('form'),
                foodGroupComboBox = form.down('combobox#FoodGroup'),
                foodNameComboBox = form.down('combobox#FoodName'),
                record = Ext.create('Ext.data.Model', {
                    foodgroup: 'Fruits',
                    food: 'Apple'
                });
            foodNameComboBox.getStore().on('refresh', function (store) {
                form.loadRecord(record);
            }, this, {
                single: true
            })

            form.loadRecord(record);
        }
    }]

});

Ext.application({
    name: 'Fiddle',

    launch: function () {

        var form = new Fiddle.view.Form({
            renderTo: document.body,
            width: 600,
            height: 400
        });

    }
});

ExtJS 7.2 - 将记录加载到具有链接组合框和 forceSelection:true 的表单中不会加载所有值

ExtJS 7.2 - Loading record into a form with chained comboboxes and forceSelection:true does not load all values

forms

data-binding

combobox

extjs

extjs7