ExtJS ViewModel setData() 仅在数据不同时有效

Question

我有2 个组合：第二个在表格上，取决于第一个。 为此，将第二个值绑定到 ViewModel 数据属性。 我做了一个按钮来重置表单并用第一个组合的值重新分配第二个组合的值（它可能会改变）。

问题是当我执行以下操作时：我更改了第一个组合的值。 当我第一次单击按钮时，它起作用了（第二个组合已更改）。 但是当我第二次单击时（两个组合具有相同的值），第二个组合被清空。 如果第二个组合的值与第一个组合的值相同，则似乎不起作用。 我做错了什么？

这是我的小提琴代码

Answer 1

当第一个combo的值对应第二个combo的值时，viewmodel不会改变，这是合乎逻辑的。 我们不需要额外的操作。 因此，该值不会在第二个组合框中被替换，它只会进行reset 。

要强制更新模型，您必须使用notify方法通知她

你可以在我的小提琴上看到这种行为

当值匹配而不是数学时查看调用堆栈。

Answer 2

试试吧，我希望它会有所帮助。

使用组件查询选择器直接设置组合框中的值。

// The data store containing the list of states
 var states = Ext.create('Ext.data.Store', {
 fields: ['abbr', 'name'],
 data : [
    {"abbr":"AL", "name":"Alabama"},
    {"abbr":"AK", "name":"Alaska"},
    {"abbr":"AZ", "name":"Arizona"}
 ]
});

var viewmodel = Ext.create('Ext.app.ViewModel', {
 data: {
    state: 'AL'
 }
});


var refCombo = Ext.create('Ext.form.field.ComboBox', {
 store: states,
 queryMode: 'local',
 itemId: 'refCombo',
 displayField: 'name',
 valueField: 'abbr',
 editable: false,
 value: 'AL',
 renderTo: Ext.getBody()
});

Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
viewModel: viewmodel,
items: [{
    xtype: 'combo',
    store: states,
    queryMode: 'local',
    itemId: 'refCombo2',
    displayField: 'name',
    valueField: 'abbr',
    editable: false,
    bind: {
        value: '{state}'
    }
 }, {
    xtype: 'button',
    text: 'CLICK',
    handler: function(button) {
        button.up('form').getForm().reset();
        viewmodel.setData({'state': refCombo.getValue()})
        let refCombo2 = Ext.ComponentQuery.query('#refCombo2')[0];
        refCombo2.setValue( refCombo.getValue());
    }
  }]
});