ExtJS 5 Complex Data Binding using MVVM


This example shows how to use MVVM architecture, new in ExtJS 5, to bind a record selected in the grid or data view to form and template panel. It also shows how to synchronize selection in grid and data view.

I have designed this example for same look and functionality as its Ext 4 counterpart. Although they look very similar and do virtually the same thing, the approach is entirely different. It is so different that I will dedicate a post to explaining the differences. Stay tuned.

Open in new window

Main Features

  • store with inline data defined in view model
  • one view model and one view controller used at the container level
  • making selection in the grid or data view publishes the selected record to the view model
  • the selected record bound to form and template panel
  • the record is editable both in the grid and form, changes updated immediately in bound components
  • buttons’ disabled state bound to the record (form) or store (grid) dirty condition
  • shows two-way binding and deep binding
  • no MVC controller
  • no data binding related listeners

Example Files (relative to example root)

The example has been initially generated with sencha generate app so the following list contains only added or edited files relevant to the example:

Source Code

If you want to see the example code, login or sign-up. Free membership is available.
Follow me:


I'm a well seasoned developer, consultant and educator of web applications based mainly on Sencha libraries, PHP, MySQL and Node.js. Besides (Apple) computers, I love photography and mountain biking.
Follow me:

Latest posts by Saki (see all)


    • says

      It’s a chained store for data view. Using the same store for grid and data view would cause sorting or filtering in the grid would also sort or filter the data view. Usually we don’t want that.

  1. Gopal S says

    Great post with grid & form bindings. It would have been awsome if you would have covered a combo in the form.
    I am having a tricky (quite common scenario) problem.
    Trying to implement a grid with form(with combobox) binding.
    JSON comes with genderId, but I need to display genderName as grid column.
    1. On record selection GenderId should bind to a dropdown in the form and show associated genderName.
    2. On change of genderName in dropdown, the change should bind to the genderId in the selected record and grid record’s genderName column should change to associated genderName.
    I am having Gender Model
    [genderId, genderName]

    GenderStore & Mapped to Gender Dropdown in the form.
    [{ genderId:1, genderName:’Male’},{genderId:2, genderName:’Female’}

    To keep it very simple, in your example:
    Lets take Age is a model with [age:int, ageString:string] (example: {age:71, ageString:’SeventyOne’}
    Grid json comes with age field value, grid should display ageString.
    form dropdown will have all age objects populated (displayField: ageString). Based on dropdown selection grid ageString column should change automatically with binding.

    Please guide me with an example

    Thanks in advance.

    Gopal S

  2. Gopal S says

    Hello Saki,
    Please refer below fiddle, I need the grid to display gender description instead of gender id by doing look up to gender store to get associated gender description for json gender id.

    grid JSON comes with only gender Id (not gender description.
    Gender Model exists.
    Gender Store exists.
    After gender change through form drop down selection, grid json will hold changed gender id for sending to server. But in grid and form dropdown gender description should display.

    Gopal S

  3. Gopal S says

    I am able to complete the task with renderer for grid Gender column which would do look up to Gender Store to get associated gender object for selected Gender id.

    renderer: ‘getGenderById’

    getGenderById: (here value is gender id)

    Gopal S

  4. Mitesh Dave says

    Hi Saki,
    How this setCurrentPerson works

    is it working because of publishes or just because it is mechanism of view model

    • says

      setCurrentPerson is auto-generated setter. Setter and getter are generated by Ext for all parameters in config object, i.e. config:{currentPerson:null} gets setCurrentPerson and getCurrentPerson methods. Furthermore updateCurrentPerson and applyCurrentPerson are generated.

      See Ext class system documentation for more details.

  5. Wemerson Januario says

    Is there an Ext JS OPEN bug about the dirty flag you mentioned on your code. commit() revert(). What is the BUG number? I would like more details. Thanks

  6. Michael Terhaar says

    Thanks for posting this. It is the best data binding example that I found. I think that you can bind to selection in the grid and the dataview and then you can remove the property and update selection code. Also, in the grid I don’t think you need the bindings for the editors.

    • says

      I used binding on the editors only to immediately update form and view so it looks better. If it’s enough to update on blur or enter sure you don’t need the bindings on grid editors.

We will be happy to hear back from you

Please Login to post a comment