Understanding how the Store works

[simonsez]

Hi-

I'm having a bit of an issue trying to figure out how the Store works. What I'm trying to do is have a top level panel setup in a card layout, and load an initial list. When a user clicks on an item in the list a new request returning JSON is made and rendered in a new card.

Based on posts on dynamic (http://www.sencha.com/forum/showthread.php?110268-Simple-List-with-Dynamic-Card&highlight=card) cards (http://www.sencha.com/forum/showthread.php?109387-Getting-Started-Architectural-Approach) I was able to get the top level panel working and render the data properly using a data store with data embedded in the code. However, when I tried to create a new Store backed by a proxy and then call the store dynamically via .getAt() the store has no data in it (even though Chrome shows the request to have been made).

Some of the code:


var get_product_store = function(category_id){
return new Ext.data.Store({
autoLoad: true,
model: 'Product',
getGroupString: function(record){
return record.get('name')[0];
},
proxy: {
type: 'ajax',
url: '/products/0/' + category_id + '/',
reader: {
type: 'json',
root: 'results',
idProperty: 'id'
}
}
});
};

And in the disclosure handler:

var component = topPanel.getComponent('products');
var store = get_product_store(record.get('id'));
component.update(store.getAt(0));
topPanel.setCard(component);

The store.getAt() function always returns undefined for me. What I'd love to understand is:

Is the proxy request made to fetch the request as soon as the Store is created? I believe the answer is yes.
Should I be able to access the data using the .getAt method in Store?
Is there a better way to do this?

[evant]

The store load is done over Ajax (asynchronous). When you call getAt, the store hasn't completed the request, so it's empty. Listen to the read event on the store so you know when the data is loaded.