Sencha Touch - 动态设置存储代理 url 并在列表项点击时加载存储

Question

我是 Sencha 的新手，虽然我已经完成了我需要的大部分工作，但我正在努力完成一项特定任务 - 动态设置商店的代理 URL，并在用户点击时加载/服务商店列表中的一项。

我在这里找到了使用 setProxy 以各种方式解决此问题的答案，并且代码看起来很简单，但我只是无法弄清楚如何将任何建议的代码 sn-ps 成功集成到我自己的代码中.因此，我在下面包含了我的代码，如果有人能准确地告诉我我需要包含什么以及在哪里包含，我将不胜感激。

原始记录列表 (#grList) 保存在导航视图 (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'
                        }
                    ]
                }
            ]
        }


    ]
}

});

点击记录项时，控制器 (MainController.js) 会将详细信息面板 (GroupDetail.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);
}

});

详细信息面板包含两个选项卡。第一个是显示记录数据的简单容器，并且工作正常。第二个（#rssGroup）是一个列表，我想在其中显示特定于被点击的记录项的 RSS 提要，但这是我无法开始工作的地方。

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'
        }
    }
}

});

RSS 列表使用商店 (GroupNews.js) 和模型 (Feed.js)，如果我在商店上设置 autoload=true 并硬编码静态代理 URL，但如果我关闭自动加载并删除prxy url，我在动态设置、加载和服务这个商店的实验都没有成功。

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'
        }
    }
}

});

铌。我没有在上面的代码示例中包含任何动态设置/加载 GroupNews 存储的尝试，这正是我到目前为止所做的工作。

任何帮助将不胜感激。

Answer 1

你试过吗？ --

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

并再次将商店分配给您的列表-

your_list.setStore(group_store);

如果存储代理 url 已更改并已加载，那么您可以使用 group_store.getCount() 方法查看项目数，以确保您拥有正确的数据。