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.
Main 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 with sencha generate app
so the following list contains only added or edited files:
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.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