This ExtJS Grid edit tutorial shows you how to edit data with an Ext JS Grid and a PHP backend. It also shows you how to define column editors in an Grid, and how to use an Ext JS ViewController to handle events generated from an Ext JS View.
In the tutorial we will build an Ext JS 5 application that pulls hypothetical model cars data from a PHP page and uses a Grid to present and edit these data.
We are going to divide the tutorial in two parts:
- Part 1, which is this article, explains how to edit existing records in an Ext JS Grid.
- Part 2, which will follow this article, explains how to add new records and delete records from the Ext JS Grid.
The two articles are part of a series of Ext JS tutorials that I am publishing on my blog MiamiCoder.com.
As depicted in the screenshot, a user will be able to modify a model car’s name, vendor and category through the Ext JS Grid. While we will let the user enter free text for the Name and Category fields, for the Vendor field we will provide a ComboBox with a list of vendor names. This requires a special setup for the Ext JS Grid and its Controller, which we will explore in a few minutes.