Binding Grid and Form in ExtJS 5

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 window

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.