ExtJS Complex Data Binding Example


This example shows how to present one copy of data from the store/model in various forms and how to synchronize data changed at various places. The synchronization of selection between grid and data view is also shown.

Main Features

  • one store with static inline data
  • editable grid
  • read-only data view
  • form with Commit and Reject buttons
  • controller synchronizes selection between grid and data view
  • controller synchronizes data updated either in grid or form
  • FontAwesome font icons
  • one instance per application

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:

Source Code

If you want to see the example code, login or sign-up. Free membership is available.
If you want to see the example code, login or sign-up. Free membership is available.
Follow me:


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)


  1. Vivek Kulshreshtha says

    Thank you for sharing this informative example.

    In this example, glyph icons are appearing in different colour. I scanned through the source js code and css styles above, but I am unable to figure out the part of js code or css style which is turning on the colour of glyph icons.

    I need to change the glyph icons color in my project, could you please help me to do so as you have done in above example?

    • says

      You need a custom css to change the color of glyphs. First of all you have to cancel the default lower opacity of the glyphs. Then you would probably want to add a cls to the components with glyphs and finally you need the css. Something like this:

  2. Karthick S says

    hi Saki, all your extjs articles are excellent!! btw, can we do reset the form fields through ViewController onClick method? Could you please guide me?

    • says

      What do you mean by “reset”? It can be either to set them all empty or to set them to values before the user started editing – that is what Reject button does now.

  3. Hugo Oliver says

    Congratulations for examples.

    Please, in your example, we would like to record the data on the server, you would use the Ajax.Request? Could you show us?

We will be happy to hear back from you

Please Login to post a comment