Re-loading a store takes forever///

When loading a store of about 400 records this code gets executed in the blink of an eye:

Code:

---

// initially load the store
var contactTypesStore = Ext.create('AtmGo.store.ContactTypes');
Ext.Object.each(responseJSON.rx.contact_types, function(key, value) {
        contactTypesStore.add(Ext.create('AtmGo.model.ContactTypes', value));
});
contactTypesStore.sync();

---

later, after adding a record and getting new data to replace the store, this code takes about 15 secs, long enough to be annoying, and I imagine it will get longer with a larger number of records:

Code:

---

// update the store
backingStore.removeAll();
Ext.Object.each(responseJSON.rx.contact_types, function(key, value) {
        backingStore.add(Ext.create('AtmGo.model.ContactTypes', value));
});
backingStore.sync();

---

Any ideas as to why this takes so long, and how I can fix it?

Are you sure that the delay is in your frontend and not in your backend? How long does it take for the AJAX request when you call sync()? 400 records is quite small and should load in an instant. Is this store also bound to a grid? may be the delay is in rendering the data (when grid has a large number of columns). you should try to figure out which part is causing the delay and then you can work on that.

To answer your questions... I put some timing logs around the code, and it is the each loop in the second code block that is taking the time. Yes the store is bound to a grid, but only in the second case - where the delay is. The middle tier is not the delay as it processes in a split second in both cases.

My gut feeling is that there is something funky about reloading the store once it is bound to the grid - which is being displayed? In the first case, the grid is not bound until after the store is loaded and in fact, the panel is not displayed until the store is fully loaded. In the second case, the store is bound already, and maybe the grid is trying to redraw itself with each add or something like that?

My grid has less than 10 columns, and there is a small amount of rendering logic in it, but as I say, the first load handles all of it very quickly.

cant you load the whole data in one step instead of iterating and adding a record at a time? you can use store.loadData(dataArray); where dataArray would contain the records from responseJSON.rx.contact_types

Yes!! loadData fixed it... thank you