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:

If you want to see the example code, login or sign-up. Free membership is available.
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)

Comments

  1. alex says

    On my mind, it’s not a very good solution, considering that window size is limited with the parent grid size. IMHO it would be better to send a data to viewmodel of a window at it’s creation.

  2. Ventsyslav Vassilev says

    Curious to see similar example, but with the form fields being comboboxes, which load their stores from the server (50+ records) when the window is shown. I mean the situation when the loadRecord method of the form get called before the combos are populated

  3. Jean-Philippe Ehret says

    Just figured we both implemented to same override on field.Base. It took me days to understand that Databinding only applies if fields are considered correct.

    I had server side validation to implement and this is like it hasn’t been expected in Ext js.

    Thanks, your code confirmed to me that there was no other solution.

  4. Roger Wiese says

    Saki.. This example has been a great help to me. I am basing a medium sized web application on this.
    However, 1 of my grid-form combinations is failing.

    The amount of fields in the model is around 50 so there is no way of fitting all those on a single form. To overcome that I have a 5 page card layout (wizard based on the wizards in the ExtJS6 admin-dashboard example) with two columns on each “card”. Each column contains a form component.

    For a few days now I have been trying to understand why the form is not being loaded when I click on Edit.
    Today I reduced to form to a single field & that worked. I suspect therefore that a multi-card layout with multiple form components is not going to work. Is that a correct suspicion or should I keep searching for the solution to this issue?

    Thanks
    Roger

    • says

      I also use wizards w/o any problems. As long as you have one valid record in the viewmodel and you are binding the form fields to its fields, it should work regardless of the number of fields.

      Or there can be a factor we don’t know about.

  5. Igor Draskovic says

    I am trying to run this example in sencha fiddle. The difference is that the root folder is Assets, but I have followed the same dir structure. It does not seem to run on fiddle, however. Does any one have suggestions?

    • says

      I’m not sure that fiddle allows overrides. Try to use extension instead. However, in the application you can then decide if override or extension.

  6. Roger Wiese says

    Saki ..

    I use this example as a template extensively in one of my apps.

    However, I am getting unfortunate side-effects with the binding grid.selection to set values on the popup window.
    Each time a user clicks on a grid row, things are happening on the form when its hidden & even when it has never been shown at all.
    e.g. change events on combos, stores that are used on the form for combos (and in 2 cases embedded grids) being loaded.
    Another side effect is grid.selection causes a store with a filter bound to a value in one of the columns to fire a server GET.

    How would you suggest I avoid these events?

    I guess… I could make the grid un-selectable except for the edit action button ? Is that an option?
    … or perhaps do the binding inside the onEdit handler in the controller?

    Do you have any suggestions?

    Thanks
    Roger

    • Roger Wiese says

      I decided to try a listener on the grid(s)
      beforeselect: function (rowModel, record) {
      return false;
      }
      … and that has solved the problem(s) !
      the grid.selection is fired on click of the Edit action button … all is good!

We will be happy to hear back from you

Please Login to post a comment