Editing grid data with a RowEditor

1. We need to ensure that the store is ready for submitting saved data to the server. In
this case we are going to define a JsonWriter on the store. Set the writer to only
submit changed fields to the server:
var invoiceStore = Ext.create('Ext.data.Store', {
...
proxy: {
...
writer: {
type: 'json',
writeAllFields: false
}
}
});

2. The next step is to create the RowEditing plugin. It's possible to add custom
configuration to the plugin. For example, set clicksToEdit: 1 so that the
RowEditor will appear after a click to a cell:
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
});

3. Create a grid panel that is bound to the invoiceStore.

4. Add the rowEditing plugin and set the Grid's selection model to rowmodel.
Ext.create('Ext.grid.Panel', {
title: 'Row Editing Example',
height: 300,
width: 600,
store: invoiceStore,
plugins: [rowEditing],
selType: 'rowmodel',
columns: [],
style: 'margin: 50px',
renderTo: Ext.getBody()
});

5. Finally, define the columns for the grid. We also add an editor configuration to each
of the columns that require editing capabilities. These editors are the fields rendered
when in edit mode:
Ext.create('Ext.grid.Panel', {
...
columns: [{
header: 'Client',
dataIndex: 'Client',
flex: 1,
editor: {
allowBlank: false
}
}, {
header: 'Date',
dataIndex: 'Date',
format: 'd/m/Y',
xtype: 'datecolumn',
editor: {
xtype: 'datefield',
format: 'd/m/Y',
allowBlank: false
}
}, {
header: 'Amount',
dataIndex: 'Amount',
xtype: 'numbercolumn',
editor: {
xtype: 'numberfield',
allowBlank: false,
hideTrigger: true,
minValue: 1,
maxValue: 150000
}
}, {
header: 'Status',
dataIndex: 'Status'
}],
...
});

Ext.create('Ext.grid.Panel', {
...
plugins: [cellEditing],
selType: 'cellmodel',
columns: [{
header: 'Client',
dataIndex: 'Client',
flex: 1,
editor: {
allowBlank: false
}
}, {
header: 'Date',
dataIndex: 'Date',
format: 'd/m/Y',
xtype: 'datecolumn',
editor: {
xtype: 'datefield',
format: 'd/m/Y',
allowBlank: false
}
}, {
header: 'Amount',
dataIndex: 'Amount',
xtype: 'numbercolumn',
editor: {
xtype: 'numberfield',
allowBlank: false,
hideTrigger: true,
minValue: 1,
maxValue: 150000
}
}, {
header: 'Status',
dataIndex: 'Status'
}],
...
});