Grid with Bound Form in Window

This example illustrates how to implement a common scenario where UI consists of a grid that shows a read-only list of records and a form where it is possible to edit these records. The same form can be used to add a new, blank record. All four CRUD operations are implemented with writes to the server. The demo server does everything like a real server except writing to a real database.

Live Demo

Open example in new window

Main 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 with sencha 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
If you want to see the example code, login or sign-up. Free membership is available.
  • Author
  • Recent Posts
Follow me:
saki
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 - June 27, 2019
  • The Site Resurgence - February 11, 2018
  • Configuring ViewModel Hierarchy - June 19, 2015