Store/Ajax timing issues

[roycyang]

I am currently using one store for a lot of different views. The problem is that when I go to different views, I usually wipe out the store and start all over again. Here is some pseudo-code

var store = Ext.data.StoreManager.lookup('Listings');
store.clearListeners();
Ext.Ajax.abortAll();
store.removeAll(); // remove all the items in the store
store.load(function(){
// after the store loads, I do some goodness
}

The issue is that no matter what combination of things I try, the store will end up messed up because of timing issues. I'd assume that after I call Ext.Ajax.abortAll(), all pending ajax calls would cancel but that's not the case.

This is usually what happens:

1. I call Category A and it loads no problem
2. I then call .nextPage() on category A to start loading in older items
3. If try to go to Category B, I'd assume that calling clear listeners and abort ajax would cancel out #2, but it doesn't always. When that happens, then I'm in category B but it loaded category A and category B items.

I'd like to just declare a new store each time and then destroy the old store, but that didn't seem to work either. I've run out of ideas but I've isolated the problem.

// in the component, there is an onItemIndexChange function

onItemIndexChange: function(me, item, index) {
...
item.setRecords(records);
...
}

This item.setRecords is what seems to be getting called and adding the stuff from Category A into Category B. It seems strange because what I do is destroy the Category A panel and then create the Category B panel, why wouldn't the old onItemIndexChange event listener be destroyed too?

 self.getAppPanel().removeAll(true); // remove all the panels (ie: category A)
Ext.create('APP.view.CategoriesPanel'); // create a new categories panel

What am I missing?

[roycyang]

Anyone?