The change from a non-editable grid to an editable grid is quite a simple process to start with. The complexity comes into the picture when we start to create a process to handle edits and send that data back to the server. But once you learn how to do it, that part can be quite simple as well.
Let's see how you would update the grid we created at the start of Chapter 5 to make the title, director, and tagline editable. Here's what the modified code will look like:
var title_edit = new Ext.form.TextField();
var director_edit = new Ext.form.TextField({vtype: 'name'});
var tagline_edit = new Ext.form.TextField({
maxLength: 45
});
var grid = new Ext.grid.EditorGridPanel({
renderTo: document.body,
frame:true,
title: 'Movie Database',
height:200,
width:520,
clickstoEdit: 1,
store: store,
columns: [
{header: "Title", dataIndex: 'title',
editor: title_edit},
{header: "Director", dataIndex: 'director&apos...