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
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:
app/view/main/Main.js app/view/main/MainModel.js app/view/grid/List.js app/view/grid/ListModel.js app/view/form/Detail.js app/view/form/DetailModel.js app/view/form/DetailController.jsIf you want to see the example code, login or sign-up. Free membership is available.
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)
- Ext, Angular, React, and Vue - 27. June 2019
- The Site Resurgence - 11. February 2018
- Configuring ViewModel Hierarchy - 19. June 2015