Description

This example shows how to use MVVM architecture, new in ExtJS 5, to bind a record selected in the grid or data view to form and template panel. It also shows how to synchronize selection in grid and data view.

I have designed this example for same look and functionality as its Ext 4 counterpart. Although they look very similar and do virtually the same thing, the approach is entirely different. It is so different that I will dedicate a post to explaining the differences. Stay tuned.

Main Features

  • store with inline data defined in view model
  • one view model and one view controller used at the container level
  • making selection in the grid or data view publishes the selected record to the view model
  • the selected record bound to form and template panel
  • the record is editable both in the grid and form, changes updated immediately in bound components
  • buttons’ disabled state bound to the record (form) or store (grid) dirty condition
  • shows two-way binding and deep binding
  • no MVC controller
  • no data binding related listeners

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 relevant to the example:

app/Application.js

app/view/Main.js
app/view/MainModel.js
app/view/MainController.js

app/view/PersonGrid.js
app/view/PersonForm.js
app/view/PersonView.js
app/view/PersonPanel.js

Source Code

If you want to see the example code, login or sign-up. Free membership is available.
Follow me:
Latest posts by saki (see all)

Enter your username and password to log into your account. Don't have an account? Sign up.

Want to collaborate on an upcoming project?