Results 1 to 2 of 2

Thread: Sencha MVC: View Model binding

  1. #1
    Sencha User
    Join Date
    Nov 2013

    Default Sencha MVC: View Model binding

    One of the most important things when developing business apps (ie data-driven apps) is data consistency across views: we go back and forth, different views might work with the same models and a single view might be a combination of many components and panels.
    Each ui unit should have a model, a view and a controller (MVC paradigm) and everything should be synchronized and updated consistently.

    This post is my attempt to answer the question: how can we achieve this result using sencha touch?

    Show me the code
    I'll keep it short and use this fiddle to point out my thoughts:

    • the 'updatedata' event is the core of the one-way data binding feature in sencha (from model to view/controller)
    • a formpanel should never be the root of your view in order to work with the 'updatedata' event
    • containers, labels and other components (that inherit from Ext.Component) are able to manage and work with the 'updatedata' event
    • once we edit the data model (ie model.set('field', value)) this fires the 'updatedata' event on component, but obviously the same event will not fire if we edit an associated model; to catch this event we have to listen the association's store or the related model directly (it depends on association type)
    • all the form fields (textfields, selectfields etc) use the 'name' as the property to match the corresponding record's field, while other components use the 'tpl' property to match the record
    My thoughts
    • use always input fields (textfields etc) inside a formpanel in order to keep them together and take advantage of all the features of the formpanel (setValues, getValues, updateRecord etc)
    • to overcome the problem of formpanel not listening to model changes I suggest listening to the main container 'updatedata' event and use the record to execute the method 'setRecord' on all sub-formpanel that might want to use the updated record, this way you keep everything up-to-date.
    • you might want to set once the record on other components (ie labels) and then they'll be independend from all the rest (they will update as soon as the record changes), anyway if you use the 'setRecord' method on those components you get the same result
    • respect the MVC and use always one record per view; if you need more records to create you view then separate components and related models (ie use composition), and remember that sencha ORM is the right way to navigate your data
    I hope this post sheds light on the bind management of mvc elements; I might be wrong about some assumptions, feel free to integrate and comment.

    Thank you,

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL


    Stores are automatically notified when a model changes, nothing else is. The way the stores are notified gives you an access point to do whatever you want. You could hook into the afterEdit method on the model to do whatever. Do note, models do not have observable and therefore cannot fire events by default. I think coming up with a way to handle this within the afterEdit method (maybe getting it to fire events) is a better way.

    The best way is to update to Ext JS 6 and use a ViewModel.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:

    Posts are my own, not any current, past or future employer's.

Similar Threads

  1. [INFOREQ] Binding to view model links is called multiple times.
    By HriBB in forum Ext 5: Bugs
    Replies: 1
    Last Post: 27 Mar 2015, 7:57 AM
  2. View model binding inside a template
    By fruel in forum Ext 5: Q&A
    Replies: 1
    Last Post: 17 Apr 2014, 8:02 AM
  3. Replies: 5
    Last Post: 10 Apr 2014, 11:33 PM
  4. Binding Model to a View efficiently
    By stevo.zilik in forum Ext: Discussion
    Replies: 2
    Last Post: 13 Feb 2012, 7:10 AM
  5. MVC Model to view binding with error handling
    By robert.peszek in forum Ext: Discussion
    Replies: 0
    Last Post: 20 Jan 2012, 1:29 PM

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