PDA

View Full Version : Poor performance on Ext.data.store.remove(records)



dllchrist
8 Jun 2012, 3:16 PM
We have a data store for a grid which initially has about 600 records loaded in one page. We have a functionality to allow the user to select certain rows and then delete them, we use the following code to delete the selected records from the data store:



var ss = grid.getView().getSelectionModel().getSelection();
grid.store.remove(ss);


We noticed the performance for the statement "grid.store.remove(ss)" is really poor, It is fine if the user select a couple of records, then it gets slow when the user select more than 20 records, when the user select more than 100 records, firefox ask me to manually stop the script because it's taking too long.

I checked the source code it looks the store.remove is looping though the passed in records and delete them one by one, each deletion trigger some events, which make it really slow.

Is there a real batch remove that I can use?

evant
8 Jun 2012, 5:24 PM
It's not slow because of the remove operation, rather because it's updating the view each time.

Try something like this:



store.suspendEvents();
store.remove(records);
store.resumeEvents();
grid.getView().refresh();

Animal
8 Jun 2012, 10:58 PM
What we need (And I have implemented it on a branch) is a "bulkremove" event (in addition to the remove event - we can't change the API) which Store.remove fires once when it has removed all the records that it received.

And then AbstractView listens for that instead of "remove" and does a bulk removal of nodes.

dllchrist
14 Jun 2012, 1:56 PM
Thanks Evan. This is exactly what I'm looking for. Now everything works like a breeze.

And I agree with Animal, It is better to add a "bulkremove" method in the store api.

jkyoutsey
30 Apr 2013, 2:15 PM
I'm messing with 'bulkremove' in 4.2 and can't seem to get this to fire. I'm calling store.remove(some records) and expecting that to CAUSE 'bulkremove' to fire.

In my controller I have the following:


var store = Ext.data.StoreManager.lookup('myStore');
store.on('bulkremove', this.onBulkRemove);

...
onDeleteButtonClick : function() {
var grid = this.getGrid();
var selections = grid.getSelectionModel().getSelection();
var store = grid.getStore();
// This can handle multiple selections in the grid.
// This SHOULD result in this.onBulkRemove()?
store.remove(selections);
},

onBulkRemove : function(store, records, indexes, isMove, eOpts) {
debugger;
},