Unable to restore state

[mihata]

Hello, there,
I've been working over a Sencha Touch application using Sencha Touch 2 RC2.
I have problem when I want to restore the state of the application based on an url param (id of a service), but when I use the list with services there is no such problem.
Store

Ext.define('CC.store.Services', {    extend: 'Ext.data.Store',
    requires: ['CC.model.Service'],
    config: {
        model: 'CC.model.Service',
        grouper: { id : 'CategoryGrouper', property: 'category'},
        proxy : {
            type: 'ajax',
            url: 'data.php',
            reader: {
                type: 'json',
                rootProperty: 'services'
            }
        },
        autoLoad: true,
        ...
    }
});

Controller

...
routes: {
            'service/:id' : 'showServiceById'
        }
...
showServiceById : function (id) {
        var list = this.getServicesList(),
            store = list.getStore(),
            record = store.getById(id);
        if (!this.servicesContainer) {
            this.servicesContainer = Ext.widget('servicesContainer');
        }
        if (!this.servicesInfo) {
            this.servicesInfo = Ext.widget('servicesInfo');
        }
        if (!this.service) {
            this.service = Ext.widget('service');
        }


        this.getServicesContainer().push(this.service);
        this.getServicesInfo().setRecord(record);
    }

I hope there is enough information given.
Thank you!

[mitchellsimoens]

So your problem is when you type in the URL with the hash it hits your route handler but the store isn't loaded correct?

[mihata]

So your problem is when you type in the URL with the hash it hits your route handler but the store isn't loaded correct?

Exactly.
I see the animation and the "sub page" is loaded but without any content.

[mitchellsimoens]

Check to see if the store is loading. If it is then add a load listener to execute a 2nd method. If it's not, execute that 2nd method.

[mihata]

Following the TouchStyle example I've found another solution:
In the config of the controller I've added

before: {showServiceById: 'ensureStoreLoad' },

the ensureStoreLoad function is the same as in the example

ensureStoreLoad: function (action) {
    var store = Ext.getStore('Services');
    if (store.data.all.length) {
        action.resume();
    } else {
        store.on('load', function () {
            action.resume();
        }, this, {
            single: true
        });
    }
}

After this there is no problem getting the record from the store

var list = this.getServicesList(),
        store = list.getStore(),
        record = store.getById(this.id),
        records;
records = Ext.Array.filter(store.data.all, function (record) {
    if (record.get('id') == id) {
        return record;
    }
}, this);
record = records[0];