How to undo the row added in the grid of extjs

Question

I want to how can we undo the specific being added in the grid before actually saving it .

Please have a look at this

I 've added two rows but since for eg: for some validations failures the second row is not valid so I want to undo the second row but keeping the first dirty for the saving of that data to the db.

What i was trying is I was pushing all the dirty rows to an array and then updating in the database. But I don't know how to undo or delete the invalid row being added. Without reloading the grid Example for reference Live example

Answer 1

You shouldn't have to push the rows into an array for synchronization. What you really want to use is the methods available on the underlying store and/or model.

To reject the second model and update all other ones in the database, two lines suffice. The exact code may differ depending on the Ext version; in ExtJS 6.2.1, it would be:

grid.getStore().getAt(1).reject() (or .drop())
grid.getStore().sync()

while the generalized approach would be to reject all invalid models:

var store = grid.getStore(),
    invalidRecords = store.query(function(record) {
        return !record.getValidation().isValid();
    });
invalidRecords.each(function(record) {
     record.reject();
})
store.sync();