Currently the rowediting
plugin gives the option of update/cancel
. When I hit the cancel
button if it is a newly added row, I would like it to not add the new row.
How can I achieve this?
Here is the FIDDLE.
Currently, with the rowediting
, I am just adding and removing the rows. If it is not possible using cancel
, how can I add a new button close
and make it not add the row.
I was also looking at sencha forums and I found a POST where it says the following:
fireEvent canceledit
when autoRecoverOnCancel
is true, if record is phantom then remove it
But, that didn't work, either. Could you suggest?
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false,
});
tbar: [{
text: 'Add Employee',
iconCls: 'employee-add',
handler: function() {
rowEditing.cancelEdit();
// Create a model instance
var r = Ext.create('Employee', {
name: 'New Guy',
email: 'new@sencha-test.com',
start: new Date(),
salary: 50000,
active: true
});
store.insert(0, r);
rowEditing.startEdit(0, 0);
}
}, {
itemId: 'removeEmployee',
text: 'Remove Employee',
iconCls: 'employee-remove',
handler: function() {
var sm = grid.getSelectionModel();
rowEditing.cancelEdit();
store.remove(sm.getSelection());
if (store.getCount() > 0) {
sm.select(0);
}
},
disabled: true
}]
Here you can see how to cancel the non-saved records:
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
//autoCancel: false,
listeners:{
'canceledit': function(rowEditing, context) {
// Canceling editing of a locally added, unsaved record: remove it
if (context.record.phantom) {
context.store.remove(context.record);
}
}
}
});
Your fiddle example doesn't work, because you are using there ExtJS 4.0.0. Here you can find a working one with ExtJS 4.2.0: jsfiddle