RowEditor is a normal grid plugin, so you’ll need to instantiate it and add to your grid’s ‘plugins’ property. You also need to define what type of Editor is available (if any) on each column:
var editor = new Ext.ux.grid.RowEditor();
var grid = new Ext.grid.GridPanel({
plugins: [editor],
columns: [
{
header : 'User Name',
dataIndex: 'name',
editor : new Ext.form.TextField()
},
{
header : 'Email',
dataIndex: 'email',
editor : new Ext.form.TextField()
}
]
... the rest of your grid config here
});
RowEditor defines a few events, the most useful one being ‘afteredit’. Its signature looks like this:
/**
* @event afteredit
* Fired after a row is edited and passes validation. This event is fired
* after the store's update event is fired with this edit.
* @param {Ext.ux.grid.RowEditor} roweditor This object
* @param {Object} changes Object with changes made to the record.
* @param {Ext.data.Record} r The Record that was edited.
* @param {Number} rowIndex The rowIndex of the row just edited
*/
'afteredit'
All you need to do is listen to that event on your RowEditor and save your model object appropriately. First though, we’ll define the Ext.data.Record that we’re using in this grid’s store:
var User = Ext.data.Record.create([
{name: 'user_id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'email', type: 'string'}
]);
And now the afteredit listener itself
editor.on({
scope: this,
afteredit: function(roweditor, changes, record, rowIndex) {
//your save logic here - might look something like this:
Ext.Ajax.request({
url : record.phantom ? '/users' : '/users/' + record.get('user_id'),
method: record.phantom ? 'POST' : 'PUT',
params: changes,
success: function() {
//post-processing here - this might include reloading the grid if there are calculated fields
}
});
}
});
The code above simply takes the changes object (which is just key: value object with all the changed fields) and issues a request to your server backend. ‘record.phantom’ returns true if this record does not yet exist on the server – we use this
information above to specify whether we’re POSTing to /users or PUTing to /users/123, in line with normal RESTful practices.
Adding a new record
The example above allows for editing an existing record, but how do we add a new one? Like this:
var grid = new Ext.grid.GridPanel({
//... the same config from above goes here,
tbar: [
{
text : "Add User",
handler: function() {
//make a new empty User and stop any current editing
var newUser = new User({});
rowEditor.stopEditing();
//add our new record as the first row, select it
grid.store.insert(0, newUser);
grid.getView().refresh();
grid.getSelectionModel().selectRow(0);
//start editing our new User
rowEditor.startEditing(0);
}
}
]
});
Pretty simple stuff – we’ve just added a toolbar with a button which, when clicked, creates a new User record, inserts it at the top of the grid and focusses the RowEditor on it.
Configuration Options
Although not documented, the plugin has a few configuration options:
var editor = new Ext.ux.grid.RowEditor({
saveText : "My Save Button Text",
cancelText: "My Cancel Button Text",
clicksToEdit: 1, //this changes from the default double-click activation to single click activation
errorSummary: false //disables display of validation messages if the row is invalid
});
If you want to customise other elements of the RowEditor you probably can, but you’ll need to take a look at the source (it’s not scary).
Final Thought
RowEditor is a really nice component which can provide an intuitive interface and save you writing a lot of CRUD code. It is best employed on grids with only a few columns – for models with lots of data fields you’re better off with a full FormPanel.
I’d be pretty happy to see this included in the default ExtJS distribution, as I find myself returning to it frequently.