Do we need it?
Perhaps not. For small applications that have a couple of views, one container with one “main” view model that is holding data, a few stores and a couple of formulas for needs of each and every view we do not need any hierarchy of view models.

When we need it, how to implement it?
To demonstrate, let take the following simple example. Selecting a row of the grid causes that the underlying record from the grid store populates the detail form on the right. Right after runningsencha generate view ...
we have this structure:

Initial Views and View Models

Configured store and reference

Publishing a value upwards
- In the main view model, configure the object that will hold the currently selected customer:
data: { // We need an object here as view models use prototype chain // so the 'current' object is inherited by lower view models // We bind to {current.customer} throughout the application current:{ customer:null } } // eo data
-
In the grid view model, define the formula that does the trick:
formulas:{ // current customer is bound to automatically published selection currentCustomer:{ bind:'{customersList.selection}' ,get:function(customer) { // this is core of the trick // whenever selection changes, this method is called // so we also update current.customer that is defined // in the main view model this.set('current.customer', customer); return customer; } // eo function get (currentCustomer) } // eo currentCustomer } // eo formulas

Binding form fields and status
Latest posts by saki (see all)
- Ext, Angular, React, and Vue - June 27, 2019
- The Site Resurgence - February 11, 2018
- Configuring ViewModel Hierarchy - June 19, 2015
My get handler for the formula never gets fired. I am binding to the panel width property using reference? What am i doing wrong? Am i missing something obvious?
I did love your article,butI have some different vision in this part,could you give some advice,please.
http://cheneycode.blogspot.tw/2015/12/extjs-mvvm-design-pattern.html
It is the default behavior of the grid. If grid has a reference it automatically publishes selection to the nearest ViewModel.
Hi Saki,
I have a question why Selected record is automatically published to View model? How just by specifying reference selected record are published to view model.
Please let me know the mechanism behind this
Thanks
Thanks for the explanation. It seem this pattern is susceptible to automation so hopefully future releases will make this simpler or, at least, obvious.
Bill
Right. Until then we have this method to work with. I’ve used it many times in big apps and it works fine.