ViewModel Hierarchy

This example illustrates configuration of hierarchical view models and it is accompanying the blog post Configuring ViewModel Hierarchy. If you haven’t read this post do it now or the example might not make any sense to you.

Live Demo

Open example in new window

Main Features

  • form population on customer selection configured as data binding
  • grid, form and main container have their own viewmodels
  • grid publishes the current selection that it propagated up to the main viewmodel
  • grid viewmodel contains grid store definition
  • form viewmodel configures formulas for buttons’ enable/disable logic
  • main viewmodel holds the current customer record. All form fields are bound to it.

Use Case

This example finds its use in any (bigger) application that uses MVVM and data binding architecture. It helps to better modularize and encapsulate views and their view models.

Example Files (relative to example root)

The example has been initially generated with sencha generate app in a workspace. The following list contains only the relevant files:

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)


  1. Fahad Ismail says

    Thank you, this is a great tutorial. I was wondering if it is possible to do this kind of binding with a Window container.
    For example a Grid is in a panel and I want to bind the selection to a form in a Window view, as window cant be a child of Grid or Grid’s parent view so can’t bind the form in window with the parent View Model and two way binding does not work.

  2. cheney chen says

    That’s awesome,can’t agree with you any more.
    But do you think the item and container depended each other too tight by formulas binding,
    if item talk with container through bubbleEvents and fireEvent will be better.
    How do you think?I need some advise,please.

  3. Mahmoud Zakal says

    Thanks Saki for this nice example
    i have a question I want to make the selection occurs when I dblClick on the row

  4. Marco Pancotti says

    How this approach can be used together with an ExtDirect store? I do not see clearly how you can manage the usual CRUD action using this approach.

We will be happy to hear back from you

Please Login to post a comment