Sencha Touch - set store proxy url dynamically and load store on list item tap

Question

I'm new to Sencha and while I've worked out most of what I need, I'm struggilng with one particular task - dynamically setting a store's proxy URL, and loading/serving the store, when a user taps on an item in a list.

I've found answers here that address this issue in various ways using setProxy, and the code seems quite simple, but I just can't work out how to successfully integrate any of the suggested code snippets into my own code. As such, I've included my code below, and would be very grateful if someone could tell me exactly what I need to include and where.

The original record list (#grList) is held in a Navigation view (Main.js).

Ext.define('Groups.view.Main', {
extend: 'Ext.navigation.View',
xtype: 'main',
requires: [
],
config: {
    id: 'Main',
    items: [
    {
            xtype: 'tabpanel',
            title: 'User Groups',
            ui: 'light',
            layout: {
                animation: 'fade',
                type: 'card'
            },
            tabBar: {
                docked: 'top',
                layout: {
                    pack: 'center',
                    type: 'hbox'
                }
            },
            items: [
                {
                    xtype: 'list',
                    title: 'News',
                    id: 'rssList',
                    itemTpl: [
                        '{title}<br/><small>{contentSnippet}'
                    ],
                    store: 'Feeds'
                },
                {
                    xtype: 'list',
                    title: 'Profiles',
                    id: 'grList',
                    itemTpl: [
                        '<img class="photo" src="{grCountryFlagURL}" align="center" width="40" height="40"/>{grHandle}<br/><small>{grCountry}</small>'
                    ],
                    store: 'Groups'
                },
                {
                    xtype: 'carousel',
                    title: 'About',
                    items: [
                        {
                            xtype: 'component',
                            html: '1'
                        },
                        {
                            xtype: 'component',
                            html: '2'
                        }
                    ]
                }
            ]
        }


    ]
}

});

On tapping a record item, a detail panel (GroupDetail.js) is pushed to the Navigation view by a controller (MainController.js).

Ext.define('Groups.controller.MainController', {
extend: 'Ext.app.Controller',

config: {
    refs: {
        main: '#Main'
    },

    control: {
        "#grList": {
            itemtap: 'showGRDetail'
        },
        "#rssList": {
            itemtap: 'showRSSDetail'
        }
    }
},

showGRDetail: function(dataview, index, target, record, e, eOpts) {
    var GRdetail = Ext.create('Groups.view.GroupDetail');
    this.getMain().push(GRdetail);
    GRdetail.setData(record.data);
    GRdetail.getAt(0).setData(record.data);
    GRdetail.getAt(1).setData(record.data);
},
showRSSDetail: function(dataview, index, target, record, e, eOpts) {
    var RSSdetail = Ext.create('Groups.view.NewsDetail');
    this.getMain().push(RSSdetail);
    RSSdetail.setData(record.data);
}

});

The detail panel comprises two tabs. The first is a simple container displaying record data and works fine. The second (#rssGroup) is a list in which I want to display an RSS feed specific to the record item that was tapped on, but this is the bit I can't get to work.

Ext.define('Groups.view.GroupDetail', {
extend: 'Ext.tab.Panel',

config: {
    id: 'GroupDetail',
    items: [
        {
            xtype: 'container',
            padding: 30,
            title: 'Profile',
            iconCls: 'search',
            id: 'grProfile',
            tpl: [
                '<img class="photo" src="{grCountryFlagURL}" align="center" width="80" height="50"/>{grHandle}<br/><small>{grProfile}</small>'
            ],
            layout: {
                type: 'fit'
            }
        },
        {
            xtype: 'list',
            title: 'News',
            id: 'rssGroup',
            iconCls: 'info',
            itemTpl: [
            '{title}<br/><small>{contentSnippet}'
            ],
            store: 'GroupNews'
                }
    ],
    tabBar: {
        docked: 'bottom',
        layout: {
            pack: 'center',
            type: 'hbox'
        }
    }
}

});

The RSS list uses the store (GroupNews.js) and model (Feed.js), and works fine if I set autoload=true on the store and hard code a static proxy URL, but if I turn autoload off and remove the prxy url, none of my experiments at dynamically setting,loading and serving this store have worked.

Ext.define('Groups.store.GroupNews', {
extend: 'Ext.data.Store',
alias: 'store.GroupNews',

requires: [
    'Groups.model.Feed'
],

config: {
    autoLoad: false,
    model: 'Groups.model.Feed',
    storeId: 'GroupNews',
    proxy: {
        type: 'jsonp',
        url: '',
        reader: {
            type: 'json',
            rootProperty: 'responseData.feed.entries'
        }
    }
}

});

Nb. I haven't included any of my attempts to dynamically set/load the GroupNews store in the above code samples, this is just what I've got working so far.

Any help would be hugely appreciated.

Answer 1

Have you tried this ?? --

var group_store = Ext.getStore("GroupNews");
group_store.getProxy().setUrl('new_url_here');    
group_store.load();

And assign store to your list again-

your_list.setStore(group_store);

If store proxy url is changed and it is loaded, then you can see number of items with group_store.getCount() method just to make sure you are having correct data.