Binding Grid and Form in ExtJS 5


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:

Source Code

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. Holly C says

    What would you suggest for validating two fields against each other? For example, that the start date must be greater than the end date on two form fields.

    • says

      It depends on modelValidation, if is true or false. If it is true then I’d create a custom validator extening and I’d implement validate method. This method receives both value to validate and the complete record (other field value) as arguments so you have all data necessary for validation.

      If you don’t use modelValidation the logic is similar, you need to create a custom vtype, I think there is example of dates validation somewhere on the official Sencha examples site.

    • says

      Placing the form in a window does not make any change. Window is just a container, it does not change the binding logic.


      • Eduardo García says

        ok I’ll try it… could you tell me the correct way to add a new record please?
        Thank you so much for the examples

  2. Алекс Я says

    Hi, Saki.

    I’m trying to implement the similar “save button disable on invalid model validation” functionality based on your example.

    The problem is that isValid() method works (Ext 5.1.0) only when modelValidation is set to false, and vice versa, when modelValidation is true, the form displays validation alert, but isValid() turns to always return true.

    Here is the fiddle (validation – nonblank input):

    Could you please tell what am I missing compared to your example, or maybe its just a bug.


    • says

      Well, the example runs against 5.0.1. In 5.1, they added validity checking before publishing form field values that effects to not publishing invalid values. I don’t know the rationale of the decision. I simply override this new “feature” so that all, also invalid values are published.

  3. Hernan Diaz says

    Hi Saki.
    Thank you for your work and for sharing your knowledge. I noticed that the first time that you load the page, if you select one row in the Grid and you edit any text field in the form, then the text is shifted down. Is this the normal behavior, or do you think that it could be somehow improved?

    • says

      I guess it is a bug in Chrome. I’ve seen it also at official Ext examples site. I haven’t seen it in Safari, Firefox and Opera, only Chrome.

  4. Martin Krakowski says

    Hello.. Thank you for your example. I have a similar CRUD module in which I’m setting up a paging toolbar. However I get an error (TypeError: Cannot read property ‘on’ of undefined) when specifying the “store” param.

    xtype: ‘pagingtoolbar’,
    dock: ‘bottom’,
    store: ‘users’ // how would your example be referenced here?


    • says

      You should bind the paging toolbar store:

      • Ernesto Laura says

        Hello Saki, I have a question, why in your case wasn’t necessary bind the paging toolbar?, in my case I needed blind that like Martin.

  5. Mitesh Dave says

    In one example you have simply mentioned publishes attribute and in this example you have declared reference attribute which connects to view model.

    So does that mean publishes is used the set data in view model

    • says

      publishes and reference are two different but related config options.

      publishes is just a list (array) of properties of a component that are published (when changed). For example, combo form field publishes by default its value. If you want it to publish also rawValue then you configure it as publishes:[‘value’, ‘rawValue’]

      reference is the name you give to a component. It is then know by that name so that you can use method lookupReference(‘valueOfReference’) to get the component. Also, for publishing to work, there must be a configured reference.

      For example, you give a combo name ‘myCombo’ so that you can bind by the published value, e.g. bind:'{myCombo.value}’

      Hope it helps.

  6. Mitesh Dave says

    HI Saki,
    I was debugging through the application, But dont know why my debugger point never reaches
    to formula

    return student;

    debugger — NEVER REACHES HERE
    it seems this set function is useless

    Can you help me please

We will be happy to hear back from you

Please Login to post a comment