Ext JS ViewModel setData () работает только тогда, когда данные отличаются - PullRequest
Новая
       29

Ext JS ViewModel setData () работает только тогда, когда данные отличаются

1 голос
/ 11 марта 2020

У меня есть 2 комбо : второе находится на форме и зависит от первого. Для этого значение второго связывается со свойством данных ViewModel. Я сделал кнопку, чтобы сбросить форму и переназначить значение второй комбинации со значением первой (это может быть изменение).

Проблема заключается в том, что я делаю следующее: я изменяю значение первое комбо. Когда я нажимаю кнопку в первый раз, она работает (вторая комбинация изменяется). Но когда я нажимаю второй раз (с обеими комбинациями с одинаковым значением), вторая комбинация очищается. Кажется, это не работает, если значение второй комбинации совпадает со значением первой комбинации. Что я делаю не так?

Вот мой код в скрипке

Ответы [ 2 ]

2 голосов
/ 11 марта 2020

Когда значение первого комбо соответствует значению второго комбо, модель представления не изменяется, что логично. Нам не нужны дополнительные операции. Соответственно, значение не подставляется во второй выпадающий список и составляет только reset.

. Для принудительного обновления модели вы должны сообщить ей об этом, используя метод notify

. Вы можете видеть это поведение на моей скрипке

Посмотрите на стек вызовов, когда значения совпадают и не совпадают.

0 голосов
/ 12 марта 2020

Попробуйте, надеюсь, это поможет.

Используйте компонентный селектор запросов для прямой установки значения в поле со списком. 

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