ExtJS 5.1.1 Immediately fire binding in ViewModel

Question

Seems like i have some misunderstanding with binding timings. I have a simple combobox with value binded to some object in viewmodel. Selecting new value, firing change event, which fired after setValue method, so my new value is already set, but my viewmodel is not updated yet. When my viewmodel will be updated? I found some information about scheduler, which says i need to run notify() method to immediately apply changes to viewmodel, but it doesn't help me at all.

Ext.define('MyModel', {
    extend: 'Ext.data.Model',
    idProperty: 'foo',
    fields: [{
        name: 'bar',
        type: 'string'
    }]
});

Ext.define('MyViewModel',{
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.my',
    data: {
        testObj: {
            foo: null,
            bar: null
        }
    },
    stores:{
        combostore: {
            model: 'MyModel',
            data: [{
                foo: '1',
                bar: 'qwerty'
            },{
                foo: '2',
                bar: 'ytrewq'
            }]
        }
    }
});

Ext.define('MyViewController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.my',
    onChange: function() {
        var vm = this.getViewModel();
        vm.notify();
        console.log(vm.get('testObj.foo'));//supposed to be current value
    }
});

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.create('Ext.container.Viewport', {
            controller: 'my',
            viewModel: {
                type: 'my'
            },
            layout : 'vbox',
            items : [
                { 
                    xtype : 'combo',
                    valueField: 'foo',
                    displayField: 'bar',
                    queryMode: 'local',
                    bind: {
                        store: '{combostore}',
                        value: '{testObj.foo}'
                    },
                    listeners:{
                        change: 'onChange'
                    }

                }
            ]
        });
    }
});

Here's fiddle aswell: https://fiddle.sencha.com/#fiddle/r88

I believe `vm.notify()` won't do its job synchronously. Note that adding `delay: 1` option to the listeners config does the trick, even `vm.notify()` becomes redundant. — Greendrake, Jul 29 '15 at 01:21
If you have to use `delay: 1` it should ring all bells you are doing something wrong. The same for calling `notify()` in this way.. — Tarabass, Jul 29 '15 at 08:27
1. By default a store has its `autoSync` config to false. You may have to set it to true for the comboStore in your viewModel? | 2. You should not test the store in the onChange event of your combo because the combo hasn't the time to synchronize your store... | Remark: in extjs, you don't change the combo value, but the store content, so if you want to check any change in your combo, test it in its store — Michel, Sep 21 '15 at 06:25

boggy · Answer 1 · 2018-09-12T18:37:26.527

I know it is a late response, however I think this problem is still relevant. See this fiddle: https://fiddle.sencha.com/#fiddle/2l6m&view/editor.

Essentially the idea is that you listen to the bound variables changes instead of listening to the combobox selection change (which triggers the re-evaluation of the bound variables).

The key code is in the constructor I added for the view model:

Ext.define('MyViewModel',{
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.my',

    // added this to enable the binding
    constructor: function () {
        var me = this;
        me.callParent(arguments);

        me.bind('{selectedItem}', function (value) {
            console.log('combobox selected item changed (bar value): ' + (value === null ? "null": value.get('bar')));
            console.log(me.getView().getController());
        });

        me.bind('{testObj.foo}', function (value) {
            console.log('combobox value (foo value): ' + value);

            // you can access the controller
            console.log(me.getView().getController());
        });
    },
    data: {
        testObj: {
            foo: null,
            bar: null
        },
        selectedItem: null,
    },
    stores:{
        combostore: {
            model: 'MyModel',
            data: [{
                foo: '1',
                bar: 'qwerty'
            },{
                foo: '2',
                bar: 'ytrewq'
            }]
        }
    }
});

and here is the view (note the binding to the selection):

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.create('Ext.container.Viewport', {
            controller: 'my',
            viewModel: {
                type: 'my'
            },
            layout : 'vbox',
            items : [
                {
                    xtype : 'combo',
                    valueField: 'foo',
                    displayField: 'bar',
                    queryMode: 'local',

                    bind: {
                        store: '{combostore}',
                        value: '{testObj.foo}',
                        selection: '{selectedItem}'

                    },
                    listeners:{
                        change: 'onChange'
                    }

                }
            ]
        });
    }
});

Binding the selection was not necessary but I included it anyway as another option because sometimes you may want to store additional data in the store that is bound to the list.

I hope this helps others.

Tarabass · Answer 2 · 2015-07-29T09:29:30.403

You should not call notify directly on the viewmodel. It's private: http://docs.sencha.com/extjs/5.0/5.0.1-apidocs/#!/api/Ext.app.ViewModel-method-notify

Just set the data by calling vm.setData({}).

onChange: function(cb, newValue, oldValue) {
    var vm = this.getViewModel();

    console.log('newValue', newValue);
    console.log('oldValue', oldValue);
    this.getViewModel().setData({'testObj': {'foo': newValue}});
    console.log(vm.get('testObj.foo'));//supposed to be current value
}

Never the less you could consider the following example, where I use a formula to get the selected model of the combobox. See that I removed the listener, added a reference to the combobox and created a formula to bind deep onto the selected record.

Ext.define('MyModel', {
    extend: 'Ext.data.Model',
    idProperty: 'foo',
    fields: [{
        name: 'bar',
        type: 'string'
    }]
});

Ext.define('MyViewModel',{
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.my',
    data: {
        testObj: {
            foo: null,
            bar: null
        }
    },
    stores:{
        combostore: {
            model: 'MyModel',
            data: [{
                foo: '1',
                bar: 'qwerty'
            },{
                foo: '2',
                bar: 'ytrewq'
            }]
        }
    },

    formulas: {
        currentRecord: {
            bind: {
                bindTo: '{myCombo.selection}',
                deep: true
            },
            get: function(record) {
                return record;
            },
            set: function(record) {
                this.set('currentRecord', record);
            }
        }
    }
});

Ext.define('MyViewController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.my',
    onChange: function(cb, newValue, oldValue) {
        var vm = this.getViewModel();

        console.log('newValue', newValue);
        console.log('oldValue', oldValue);
        this.getViewModel().setData({'testObj': {'foo': newValue}});
        console.log(vm.get('testObj.foo'));//supposed to be current value
    }
});




Ext.application({
    name : 'Fiddle',

    launch : function() {
        var vp = Ext.create('Ext.container.Viewport', {
            controller: 'my',
            viewModel: {
                type: 'my'
            },
            layout : 'vbox',
            items : [
                { 
                    xtype : 'combo',
                    reference: 'myCombo',
                    valueField: 'foo',
                    displayField: 'bar',
                    queryMode: 'local',
                    bind: {
                        store: '{combostore}',
                        value: '{testObj.foo}'
                    }/*,
                    listeners:{
                        change: 'onChange'
                    }*/
                },
                {
                    xtype: 'label',
                    bind: {
                        text: '{currentRecord.foo}'
                    }
                }
            ]
        });

        /* Just an example. You could also select records on the combo itself */
        vp.getViewModel().setData({'testObj': {'foo': '2'}});
    }
});

Thanks for reply, but i don't want to use `setData()` manually or creating formulas to fix this simple bind. Just want to know, when my viewmodel is ready after `setValue()` called and why adding `delay:1` or `buffer:1` to listener config will do the trick with accessing value in combobox change event, like @DrakeES mentioned. I suppose i should look at `Ext.util.Scheduler` in my viewmodel, cause i found some interesting config like `tickDelay: 5` which is set to 5 milliseconds by default. And then this config used in creating a defer function for timer that will execute the next notify. — Exclaim, Jul 29 '15 at 10:41
TickDelay is indeed used for that. Unfortunately I didn't found setting TickDelay to a higher value very useful, because it's set to the whole viewmodel. Also it's private I believe, so you can't rely on its existence.. — Tarabass, Jul 29 '15 at 13:37

score 0 · Answer 3 · answered Sep 19 '15 at 10:15

0

Defer would be your savior:

onChange: function() {
    var vm = this.getViewModel();

    Ext.defer(function(){
       console.log(vm.get('testObj.foo'));//supposed to be current value
    },10,this);
}

answered Sep 19 '15 at 10:15

leshicus

109
1
8

score 0 · Answer 4 · answered Jun 17 '16 at 10:34

0

Please use select event instead of change.

I think change event fires even before value is set.

answered Jun 17 '16 at 10:34

Harish Ambady

12,525
4
29
54

ExtJS 5.1.1 Immediately fire binding in ViewModel

4 Answers4