Dynamically define and load views with different proxy store in Sencha Touch 2

Question

I am creating a mobile application with Sencha Touch 2 that would load its views dinamically depending on a Json response from the server.

It means that before the load of the view I have to compose the view with some generic elements. For example, if I receive a Json string from the server corresponding to a List view I would have to dinamically fill the list items (name, url, descriprion) with a store and a proxy.

This works, but then I would like to select some item on that list and load another list, but this time I want to change the proxy. My new proxy is the url field from the selected item. I get the url field from the selected item and change the proxy, but this introduces a problem:

I am using an Ext.navigation.View, and I want to maintain navigation history. In the above case, if I go back in the navigation history the items on the first list change to the items on the last list.

I am searching for some kind of workflow to achieve dynamic load of the views depending on independent data for each one, and always maintaining the MVC-Store pattern and the navigation history.

This is my model for the list item:

Ext.define('ExampleApp.model.ListItem', {
    extend: 'Ext.data.Model',
    config: {
        fields: ['name', 'url', 'descriprion']
    }
}

This is the store for the List:

Ext.define('ExampleApp.store.ListItems', {
    extend: 'Ext.data.Store',
    config: {
        autoLoad: false,
        model: 'ExampleApp.model.ListItem',
        proxy: {
            type: 'jsonp'
            url: 'http://mydomain.com/myjsonresponse',
            reader: {
                type: 'json',
                useSimpleAccessors: true
            }
        }
    }
})

This is my view:

Ext.define('ExampleApp.view.MyList', {
    extend: 'Ext.List',
    xtype: 'mylist',
    requires: ['ExampleApp.store.ListItems'],

    config: {
        title: 'My List',        
        itemTpl: '{name} - {description}',
        store: 'ListItems'
    }
})

This is the function called on the itemtap event of my list:

listItemTapped: function (view, index, target, record, event) {
    var listItems = Ext.getStore('ListItems');

    listItems.getProxy().setUrl(record.get('url'));
    listItems.load();

    this.getMain().push({
        xtype: mylist
    });
}

ThinkFloyd ThinkFloyd · Accepted Answer · 2013-03-27T03:44:34

What you can try is creating separate store for each list instead of reusing existing one.

listItemTapped: function (view, index, target, record, event) {
    var listItems = Ext.create('ExampleApp.store.ListItems', {newUrl : record.get('url')});
    listItems.load();

    this.getMain().push({
        xtype: mylist,
        store: listItems
    });
}

and add initialize function to use newUrl:

Ext.define('ExampleApp.store.ListItems', {
    extend: 'Ext.data.Store',
    config: {
        autoLoad: false,
        newUrl : null,
        model: 'ExampleApp.model.ListItem'
    },
    initialize : function() {
        this.setProxy({
            type: 'jsonp'
            url: this.config.newUrl,
            reader: {
                type: 'json',
                useSimpleAccessors: true
            }
        });
    }
})

You may want to destroy these stores once their view is popped.

Dynamically define and load views with different proxy store in Sencha Touch 2

2 Answers