Sencha Touch - 动态设置商店代理网址并在列表项目点按上加载商店

时间:2013-04-21 00:22:35

标签: list dynamic extjs sencha-touch store

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

我在这里找到了使用setProxy以各种方式解决这个问题的答案,代码看起来很简单,但我无法弄清楚如何成功地将任何建议的代码片段集成到我自己的代码中。因此,我在下面列出了我的代码,如果有人能告诉我我需要包含的内容以及在哪里,我将非常感激。

原始记录列表(#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'
        }
    }
}

});

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

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:5)

你试过这个吗? -

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

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

your_list.setStore(group_store);

如果商店代理网址已更改且已加载,则您可以使用group_store.getCount()方法查看项目数量,以确保您拥有正确的数据。