Description
This advanced example shows how to use ExtJS 5 MVVM architecture to bind the record selected in grid to form. The record is editable both in the grid and form and form buttons are enabled and disabled according to the record valid and dirty state. Open in new windowMain Features
- implements two-way binding of the selected record
- no listeners, the logic is implemented in viewmodel formulas
- grid store is bound to viewmodel
- grid and form title are bound to the selected record
- record can be edited both in grid and form
- changes are immediately reflected in all bound places
- buttons are enabled only if the record is dirty (and valid)
- uses schema and model validation
- uses font icons
Use Cases
The example can be directly used in any application that require grid/form binding. The concepts shown here can be helpful as a guide for any kind of binding implementation.Example Files (relative to example root)
The example has been initially generated withsencha generate app
so the following list contains only added or edited files:
1 2 3 4 5 6 7 8 |
app/view/Main.js app/view/MainModel.js app/view/MainController.js app/view/CustomersGrid.js app/view/CustomerForm.js app/model/Base.js app/model/Customer.js |
Source Code
If 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 - June 27, 2019
- The Site Resurgence - February 11, 2018
- Configuring ViewModel Hierarchy - June 19, 2015