javascriptextjsextjs4.2extjs-gridroweditor

How can I make the rowediting plugin in extjs to not add a row when I hit cancel?


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:

  1. fireEvent canceledit

  2. 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
}]

Solution

  • 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