How to selectively populate a Store in Sencha Touch 2

Question

I have the following store in my Sencha Touch 2.4.1 application:

Ext.define('NativeApp.store.Item', {
    extend: 'Ext.data.Store',
    config: {
        model: 'NativeApp.model.Item',
        storeId: 'item-store',
        fields: ['id', 'description'],
        proxy: {
            type: 'ajax',
            url: 'resources/json/item.json',
            reader: {
                type: 'json',
                rootProperty: 'items'
            }
        },
        autoLoad: true
    }   
});

It's being populated with everything in the JSON file, which let's say looks like this:

{
    "items": [
        {
            "id": 's1',
            'description': 'desc'
        },
        {
            "id": 's2',
            'description': 'desc'
        }
    ]   
}

Let's say that in my view I have two buttons, "s1" and "s2". If I click on "s1", I am taken to a page with a list that contains the data with id "s1". (In this case, there is only one, but there could be more).

How would this be accomplished?

Idea 1:
The autoload attribute can be set to an Object. From here - "If the value of autoLoad is an Object, this Object will be passed to the store's load() method."

So if in my controller, in the handler that's executed when the button is tapped, I can generate this object (parse the JSON file) and somehow pass it to the store - mission accomplished. Sort of.

Besides the question of how to pass it to the store, the immediate problem is when is the data loaded into the store?

According to the docs, "this store's load method is automatically called after creation". Is creation when the app launches, or when I create the view object that uses the store: var view = {xtype: 'myview'};

Idea 2:
Maybe I could dynamically switch out the url from the proxy and have separate JSON files for each id (there won't be too many). But that seems unlikely to work.

Idea 3:
Pass in a data object to the store (again parsing the JSON) from that controller.

Are any of these feasible? And if not, what is an alternative solution?
Perhaps I'm overthinking this.

Edit:
I have a list of items, and each item has a list of sub-items. So when I select one item, I want to be taken to page of the sub-items. Right now, all of these sub-items are in one JSON file, so after clicking on one item, I need a way of telling the store to load only part of the json data.

Is Ext.data.model.load still the best approach?

arthurakay arthurakay · Accepted Answer · 2015-07-01T00:06:41

Idea 1: Yes, you could do that... probably more trouble than it's worth IMO. The store will load immediately after it is created -- so if you create the store at application start, then it loads then. If you create a store randomly during runtime, it loads then. If the store is defined inline for a view, it's loaded when the view is created.

Idea 2: Arguably a better solution, but still a lot of trouble to swap the URL for the proxy, then forcibly load it, parse the data, etc.

Depending on your view, you could just directly load the data for a single model using NativeApp.model.Item.load(id) (see docs). This assumes you have an API setup for that, but it's easier IMO and certainly more RESTful.

Idea 3: Meh. It really sounds to me like Ext.data.Store is the wrong construct for what you're trying to accomplish.

Are any of your ideas feasible? Yes.

Are you over-thinking this? Slightly, but then again you wouldn't be a programmer if you didn't.

It's hard to tell you exactly what I'd do without seeing the rest of your application and understanding the WHY you're doing X, Y, or Z... but if you're only planning on displaying a single model's data on a given "Detail" screen (and you need that data loaded on-demand), then the static Ext.data.Model.load() method is probably what you need.

How to selectively populate a Store in Sencha Touch 2

1 Answers