Live Demo
Open example in new windowMain Features
- full featured, production ready, well-written code
- all four CRUD operations implemented
- the server code simulates real-world responses – does not write in a real database, though
- grid store defined in ViewModel loaded from server
- grid selection propagated to upper level viewmodel
- form fields bound to the selected record
- validation rules defined on data model and used by form fields
- reusable form window that is not destroyed when closed
- formula to provide data for enabling/disabling button
- field Base override to publish also invalid value – needed for Save enable/disable logic
- grid Action column override to enable font icon support
- does not use data session
Use Case
This approach can be used whenever you want to edit grid records in a form window. It can be, for example, when grid shows only a couple of fields, but the form would allow editing of all available fields. Another situation could be when form fields are complicated extensions and/or their interrelation is complex hence grid cell or row editing wouldn’t do.Example Files (relative to example root)
The example has been initially generated withsencha generate app
in a workspace. The following list contains only the relevant files:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
app/Application.js app/model/Base.js app/model/User.js app/view/main/Main.js app/view/main/MainController.js app/view/main/MainModel.js app/view/user/Form.js app/view/user/FormModel.js app/view/user/Grid.js app/view/user/GridModel.js overrides/form/field/Base.js sass/src/view/user/Grid.scss |
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