How to buffering changes using viewmodel

[Tarabass]

Hi there,

I'm refactoring an app from MVC to MVVM, but don't know how to solve this. I'm configured a buffer on a 'select' of a grid, so if the user moves over the records using the down or up arrow key not every record is loaded into the form but is only loaded when the record is selected for mor then 100ms. How can I buffer the binding in the viewmodel so not every record gets bind?

Old controller:

Ext.define('MyApp.controller.Main', {
    extend: 'Ext.app.Controller',

    refs: [{
        ref: 'mainGrid',
        selector: 'maingrid'
    }, {
        ref: 'mainForm',
        selector: 'mainform'
    }],
    
    init: function() {
        var me = this;

        me.listen({
            component: {
                'maingrid': {
                    select: {
                        fn: me.onSelect,
                        buffer: 100
                    }
                }
            }
        });
    },
    
    onSelect: function(grid, record, index, eOpts) {
        this.getMainForm().loadRecord(record);
    }
}); 

Old form

Ext.define('MyApp.view.Form', {
    extend: 'Ext.form.Panel',
    alias: 'widget.mainform',

    layout: 'anchor',
    bodyPadding: 5,
    trackResetOnLoad: true,
    fieldDefaults: {
        msgTarget: 'under',
        anchor: '100%',
        labelWidth: 60
    },
    defaultType: 'textfield',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [{
                name: 'forename',
                fieldLabel: 'Forename'
            }, {
                name: 'email',
                fieldLabel: 'Email'
            }]
        });

        me.callParent(arguments);
    }
}); 

New viewmodel

Ext.define('MyApp.view.main.MainModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.main',

    formulas: {
        currentRecord: {
            bind: {
                bindTo: '{mainGrid.selection}',
                deep: true
            },
            get: function(record) {
                return record;
            },
            set: function(record) {
                if(!record.isModel){
                    record = this.get('records').getById(record);
                }
                this.set('currentRecord', record);
            }
        }
    }
}); 

New form

Ext.define('MyApp.view.Form', {
    extend: 'Ext.form.Panel',
    alias: 'widget.mainform',

    layout: 'anchor',
    bodyPadding: 5,
    trackResetOnLoad: true,
    fieldDefaults: {
        msgTarget: 'under',
        anchor: '100%',
        labelWidth: 60
    },
    defaultType: 'textfield',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [{
                bind: '{currentRecord.forename}',
                fieldLabel: 'Forename'
            }, {
                bind: '{currentRecord.email}',
                fieldLabel: 'Email'
            }]
        });

        me.callParent(arguments);
    }
}); 

[Tarabass]

Nobody has an answer to this? I just want to buffer the binding so it won't flicker when people are scrolling through the grid with their keyboard..

[The0s]

Add a controller to your MainView. Remove the binding of your record to the grid selection.

Listen to the select in the controller and in the handler use a buffered function (Ext.Function.createBuffered) to trigger something like

this.getViewModel().set('selection', this.getGrid().getSelection()));

Bind the form to the 'selection'.