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

Question

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

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

点击"；加载记录"；应加载水果/苹果，但只显示水果。点击"；加载记录"；第二次达到期望的结果。如果注释掉forceSelection: true，它会按预期工作，但链式组合不会按预期工作。我在这里做错了什么吗？

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