Results 1 to 3 of 3

Thread: How to buffering changes using viewmodel

  1. #1
    Sencha Premium Member Tarabass's Avatar
    Join Date
    Jun 2010
    Location
    The Netherlands
    Posts
    51

    Default How to buffering changes using viewmodel

    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:
    PHP Code:
    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: {
                            
    fnme.onSelect,
                            
    buffer100
                        
    }
                    }
                }
            });
        },
        
        
    onSelect: function(gridrecordindexeOpts) {
            
    this.getMainForm().loadRecord(record);
        }
    }); 
    Old form
    PHP Code:
    Ext.define('MyApp.view.Form', {
        
    extend'Ext.form.Panel',
        
    alias'widget.mainform',

        
    layout'anchor',
        
    bodyPadding5,
        
    trackResetOnLoadtrue,
        
    fieldDefaults: {
            
    msgTarget'under',
            
    anchor'100%',
            
    labelWidth60
        
    },
        
    defaultType'textfield',

        
    initComponent: function() {
            var 
    me this;

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

            
    me.callParent(arguments);
        }
    }); 
    New viewmodel
    PHP Code:
    Ext.define('MyApp.view.main.MainModel', {
        
    extend'Ext.app.ViewModel',
        
    alias'viewmodel.main',

        
    formulas: {
            
    currentRecord: {
                
    bind: {
                    
    bindTo'{mainGrid.selection}',
                    
    deeptrue
                
    },
                
    get: function(record) {
                    return 
    record;
                },
                
    set: function(record) {
                    if(!
    record.isModel){
                        
    record this.get('records').getById(record);
                    }
                    
    this.set('currentRecord'record);
                }
            }
        }
    }); 
    New form
    PHP Code:
    Ext.define('MyApp.view.Form', {
        
    extend'Ext.form.Panel',
        
    alias'widget.mainform',

        
    layout'anchor',
        
    bodyPadding5,
        
    trackResetOnLoadtrue,
        
    fieldDefaults: {
            
    msgTarget'under',
            
    anchor'100%',
            
    labelWidth60
        
    },
        
    defaultType'textfield',

        
    initComponent: function() {
            var 
    me this;

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

            
    me.callParent(arguments);
        }
    }); 

  2. #2
    Sencha Premium Member Tarabass's Avatar
    Join Date
    Jun 2010
    Location
    The Netherlands
    Posts
    51

    Default

    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..
    In the real world you don't want to overdo it. In the Sencha world you don't want to overnest it.

  3. #3
    Sencha User
    Join Date
    Jun 2008
    Posts
    242
    Answers
    22

    Default

    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

    Code:
    this.getViewModel().set('selection', this.getGrid().getSelection()));
    Bind the form to the 'selection'.

Similar Threads

  1. Replies: 5
    Last Post: 4 Feb 2015, 11:39 AM
  2. Replies: 2
    Last Post: 1 Feb 2015, 4:04 PM
  3. Filteration without buffering
    By erez111 in forum Ext 5: Q&A
    Replies: 1
    Last Post: 15 Dec 2014, 2:39 AM
  4. PR4 Store: no buffering?
    By MahlerFreak in forum Sencha Touch 2.x: Discussion
    Replies: 1
    Last Post: 27 Jan 2012, 11:26 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •