Editable and Writable ExtJS Grid Example


This is a quite complex example of editable grid that loads and sends data from and to the server where the data is saved in SQLite database. It is an MVC Ext application with model, store, view and controller implemented.

To run the server code of the example locally you need to have Apache server with PHP installed and SQLite PHP extension enabled.

Open in new window

Main Features

  • feature complete
  • implements all CRUD operations (create, read, update, destroy)
  • dynamically enables/disables controls to prevent accidental user errors
  • contains paging toolbar with extra buttons
  • grid is remotely sortable
  • uses Font Icons
  • logger for learning purposes

Use Cases

The example is ready to be used in a real-life applications when an editable grid is needed.

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. Hugo Brizard says

    Hello Saki, quick question regarding your editable combobox. When I do a very basic combobox editor on my side, I lose the selection of my grid row when I open the combobox. This is annoying if I display information on the side based on the selection of my grid.

    I also tested the example of kitchensink/cellediting (http://dev.sencha.com/extjs/5.0.0/examples/kitchensink/#cell-editing), and they seem to have the same behavior as I have.

    But yours don’t lose selection, and I can’t manage to see why… is it because of the theme you use? i would probably doubt that!

    If you have an idea, thanks for sharing! and Thanks for your helpful work.


  2. Hugo Brizard says

    By the way, I changed the selModel from ‘cellmodel’ to the row model… in the kitchensink example.

    I also use checkbox selection model. but i tried other types of selModels and doesn’t work, i lose selection of the row.


  3. Francesco Bragagna says

    Hi Saki,

    I don’t know if this is the right place to ask this question.
    I’m trying to use a code similar to this example, but I’m using a rest proxy instead of ajax.

    When I’m edit the object of one record in the store, and I decide to .save() the object itself, the model after a OPTION call, use the proxy to call a PUT and update the existing object on the server.

    Extjs save call populate the json in the PUT with ONLY CHANGED properties (and id). I think this is conform to rest specification, but I would like to send all the object properties. I searched in the documentation, but I did’t find any information about this.

    Should I use a ajax proxy instead (if it’s useful for my needs), or there is any proxy/model configuration to send the entire object?

    Thank you very much



  4. Chanchal Sakarde says

    Hi Saki,

    i got zip, but getting following error: (in app/view/MainGridView.js)

    TypeError: paging.setChildDisabled is not a function
    paging.setChildDisabled(‘#first’, true);

    — — — — — —
    i tried searching in whole code: grep -rin “paging.setChildDisabled” *

    seems this “paging.setChildDisabled” function not included in zip i received, can you please assist, how and where can i get this.

    Waiting for your response,

    Thanks in advance

    Best Regards,
    Chanchal Sakarde

We will be happy to hear back from you

Please Login to post a comment