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: '[email protected]',
            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
}]

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: '[email protected]',
            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
}]

• javascript
• extjs
• extjs4.2
• extjs-grid
• roweditor

1 Answer 1

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