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.
- 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:
app/Application.js app/view/Main.js app/view/MainModel.js app/view/MainController.js app/view/PersonGrid.js app/view/PersonForm.js app/view/PersonView.js app/view/PersonPanel.js
Source CodeIf you want to see the example code, login or sign-up. Free membership is available.
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