ExtJS grids with Editors

Of all the grids till now, we never allowed user input. The editor grid allows the user to add/modify row elements.

Creating an editor grid is very simple. Redeclare the GridPanel to EditorGridPanel. Then assign an editor to those fields which can allow edits.

Here’s what we will build in this post,

The modified grid,

var grid = new Ext.grid.EditorGridPanel({

store: empStore,

columns: [

{header: 'Emp No.', width: 100, sortable: true, dataIndex: 'emp_no', align:'center', renderer: showEmpDetails},

{header: 'Last Name', width: 100, sortable: true, dataIndex: 'last_name',

editor: new Ext.form.TextField({ allowBlank: false }) },

{header: 'First Name', width: 100, sortable: true, dataIndex: 'first_name',

 editor: new Ext.form.TextField({ allowBlank: false }) },

{header: 'Age', width: 75, sortable: true, dataIndex: 'age',

editor: new Ext.form.NumberField({

                                allowBlank: false,

                                allowNegative: false,

                                maxValue: 100

}) },

{header: 'Date of Joining', width: 100, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'doj',

editor: new Ext.form.DateField({

                                                format: 'm/d/Y',

                                                minValue: '01/01/2009'

                                }) },

{header: 'Address', width: 150, dataIndex: 'address',

editor: new Ext.form.TextField({ allowBlank: true }) }

],

            stripeRows: true,

height: 350,

width: 650,

title: 'Employee Details',

            renderTo: Ext.getBody()

});

Double clicking on any cell will reveal the editor.

NOTE:

1.  No editor has been defined for the first column, assuming it to be a primary key

2. Setting the config option (for EditorGridPanel) “clicksToEdit” to ‘1’ will make each cell editable on the very first click. By default it is set to 2

Here’s the JSFiddle ->  Editor Grid JSFiddle