1

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

下面的小提琴应该让事情变得很清楚：sencha fiddle

单击“加载记录”应该会在 Fruits/Apple 中加载，但只显示 Fruits。再次单击“加载记录”即可获得所需的结果。如果您将其注释掉，forceSelection: true它会按预期工作，但链式组合无法按预期运行。我在这里做错了什么吗？

4

1 回答 1

1

这并不容易。运行 form.loadRecord(rec) 时发生了什么。

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

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

如何修复：修复很难看。您可以在商店“刷新”上收听（这意味着过滤器被触发），然后设置第二个值（或再次设置值）。

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

    }
});
于 2020-07-10T21:53:10.487 回答