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

Question

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

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

这里是my code in a fiddle

Answer 1

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

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

你可以在我的 fiddle

上看到这种行为

当值匹配但不计算时查看调用堆栈。

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

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

ExtJS ViewModel setData() only works when data is different

binding

combobox

extjs

viewmodel