Form not updated when values of binded store are changed

user_505714 0
Viewed 44

I have a form with various elements. For example a combobox, here the View part:

xtype: 'combobox',
fieldLabel : 'Position de la commission',
labelAlign : 'top',
padding:'20 0 0 0',
displayField: 'parametreLibelle',
valueField: 'parametreValeur',

queryMode: 'local',
bind : {
    value: '{argumentairePosition}',
    store : '{positionsCommissionStore}'
},
reference : 'argumentairePosition',
itemId:'argumentairePosition',
listeners: {
    click: {
        element: 'inputEl',
        fn: 'onArgumentairePositionClick'
    }
}

I call a function which should change the selected value in the combobox:

onAmendementReferenceChange: function() {
    let me = this;
    let amdtId = this.lookupReference('amendementDeReference').value;
    me.ajaxRequest({
        url: '/eloi/grille/changerAmendementReferenceArgumentaire',
        method: 'GET',
        params: { amdtId: amdtId },
        successFn: function (record) {
            let serverResponse = record && record.responseText ? Util.decodeJson(record.responseText) : undefined;
            let formulaireData = serverResponse ? serverResponse.data : undefined;

            if (formulaireData) {
                let vm = me.getViewModel();
                let store = vm.get('argumentaireRendreIdentiqueStore').first();

                store.set('argumentaireObjet', formulaireData.argumentaireObjet);
                store.set('argumentaireTexte', formulaireData.argumentaireTexte);
                store.set('argumentairePosition', formulaireData.argumentairePosition); // Breakpoint here
                store.set('argumentairePositionRapporteur', formulaireData.argumentairePositionRapporteur);
                store.set('argumentaireAmendementId', formulaireData.argumentaireAmendementId);

                //me.getView().refreshView();
            }
        }
    });
}

When I put a breakpoint in my browser at the line indicated by a comment, I can see that the value of the store is actually changing (watching store.get('argumentaireObjet') in the debugger before and after the line), but the content of my form is not updated in my page. And I can't get why. Any idea?

I tried various tricks to refresh the form, but normally, the binding should do. I shouldn't have to refresh. What am I missing?

I'm using ExtJS 6.

forms binding extjs javascript
1 Answers

OK, this is actually working. I needed to change the value in the ViewModel, not in the Store.

onAmendementReferenceChange: function() {
    let me = this;
    let amdtId = this.lookupReference('amendementDeReference').value;
    me.ajaxRequest({
        url: '/eloi/grille/changerAmendementReferenceArgumentaire',
        method: 'GET',
        params: { amdtId: amdtId },
        successFn: function (record) {
            let serverResponse = record && record.responseText ? Util.decodeJson(record.responseText) : undefined;
            let formulaireData = serverResponse ? serverResponse.data : undefined;

            if (formulaireData) {
                let vm = me.getViewModel();
                vm.set('argumentaireObjet', formulaireData.argumentaireObjet);
                vm.set('argumentaireTexte', formulaireData.argumentaireTexte);
                vm.set('argumentairePosition', formulaireData.argumentairePosition);
                vm.set('argumentairePositionRapporteur', formulaireData.argumentairePositionRapporteur);
                vm.set('argumentaireAmendementId', formulaireData.argumentaireAmendementId);
            }
        }
    });
}
user_5057140
Related