0

我使用带有 jsonp 代理的商店填充列表视图，该代理向我的服务器发送 GET 请求。当应用程序启动时，请求被发送，并且列表项按照应有的响应呈现。现在，当我在我的数据库服务器中手动添加一个新项目并使用下面控制器中显示的代码刷新列表并检查控制台中的存储对象时，我可以看到新创建的项目在存储数据中。到目前为止一切顺利，一切都符合预期。但是，新项目不在刷新的列表中。奇怪的是，当我检查列表对象及其包含的存储对象时，不包括新创建的项目。但是，当我重新启动应用程序（而不是重新加载商店并刷新列表）时，新创建的项目会出现在列表中。在我看来，不知何故我有 2 个商店实例，一个带有新数据（我用 Ext.getStore 检索）和一个没有（列表视图内的那个），我认为这实际上应该是相同的。这怎么可能？下面我告诉你我是怎么做的。任何帮助是极大的赞赏。

控制器

Ext.define('VB1.controller.ListController', {
    extend: 'Ext.app.Controller',
    config: {
        refs: {
            listView: 'listview',
            refreshButtonTap: '#refreshbutton',
        },
        control: {
            refreshButtonTap: {
                onRefreshList: 'refreshList',
            },
        }    
    },
    launch: function () {
        this.callParent(arguments);
        Ext.getStore('MyStore').addListener('load', 'recordLoaded', this);
    },
    refreshList: function () {
        var loadedStore = Ext.getStore('MyStore').load();
        console.log(loadedStore) //here the new item is included
    },
    recordLoaded: function () {
        var list = this.getListView();
        list.refresh();
        console.log(list) //here the new item is not included in the store object inside   
                                  //listobject
    }
});

商店

Ext.define('VB1.store.MyStore', {
    extend: 'Ext.data.Store',
    alias: 'widget.mystore',
    config: {
        model: 'VB1.model.MyModel',
        autoLoad: true,
        proxy: {
            type: 'jsonp',
            url : 'myUrl.js',
            enablePagingParams: false,
            reader: {
                type: 'json',
                rootProperty: 'array.resources'
            },
        },
    },
});

列表视图

Ext.define('VB1.view.ListView', {
    extend: 'Ext.dataview.List',
    alias: 'widget.listview',        
    requires: [
        'Ext.dataview.List',
    ],
    scrollable: 'vertical',
    config: {
        loadingText: "loading...",
        emptyText: '</pre><div class="notes-list-empty-text">No notes found.</div><pre>',
        itemTpl: '</pre><div class="list-item-title">{title}</div><div class="list-item-narrative"><img src="{listlogo}"/></div><pre>',
    },
    listeners: {
        itemtap: function(list, index, item, record) {
            this.fireEvent('showDetails', record, this);
        }
    },
});

这就是我在应用启动时将包括商店在内的列表添加到视口的方式

var listView = {
    xtype: 'listview',
    store: {xtype: 'mystore'},
}
Ext.Viewport.add(listView);
4

1 回答 1

1

我刚刚发现问题出在哪里。首先，正如我所怀疑的那样，商店被实例化了 2 次。显然一次是应用程序，另一次是视图。因此我最终拥有了两家商店。由于我没有设置 storeID，因此根据我在商店的别名配置中给出的 xtype 名称，商店由两个唯一的 id 标识。

我解析并登录控制器的商店的 ID 为 ex-mystore-1

var loadedStore = Ext.getStore('MyStore').load();
      console.log(loadedStore) //here the new item was included

并且列表视图对象内的商店获得了 id ext-mystore-2

var list = this.getListView();
    console.log(list._store); //here the new item was not included

当我向商店添加 storeId 时，对我有利的漏洞问题发生了变化。在那之后，我仍然有两家商店，但是，具有相同的 storeIds（但具有不同的唯一或可观察的 id）。好消息是现在新项目包含在两个商店实例中。我还能够通过不在列表视图中实例化商店的 xtype 而是通过 storeID 引用它来摆脱第二个商店实例。现在一切正常。感谢任何看过这个的人。我希望这可以帮助遇到类似问题的人。

于 2012-04-19T11:01:18.730 回答