javascript - 在 Sencha Touch 2 中动态定义和加载具有不同代理存储的 View

Question

我正在使用 Sencha Touch 2 创建一个移动应用程序，它会根据来自服务器的 Json 响应动态加载其 View 。

这意味着在加载 View 之前，我必须用一些通用元素组合 View 。例如，如果我从服务器接收到一个对应于 List View 的 Json 字符串，我将不得不动态地填充列表项(name、url, descriprion)与一个商店和一个代理。

这行得通，但随后我想选择该列表中的某些项目并加载另一个列表，但这次我想更改代理。我的新代理是所选项目的 url 字段。我从所选项目中获取 url 字段并更改代理，但这引入了一个问题:

我正在使用 Ext.navigation.View，我想保留导航历史记录。在上述情况下，如果我返回导航历史记录，第一个列表中的项目将更改为最后一个列表中的项目。

我正在寻找某种工作流来根据每个 View 的独立数据实现 View 的动态加载，并始终保持 MVC-Store 模式和导航历史记录。

这是我的列表项模型:

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

这是列表的商店:

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

这是我的观点:

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

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

这是在我的列表的 itemtap 事件上调用的函数:

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
    });
}

Answer 1

您可以尝试为每个列表创建单独的商店，而不是重复使用现有的商店。

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
    });
}

并添加初始化函数以使用 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
            }
        });
    }
})

一旦它们的 View 被弹出，您可能想要销毁这些商店。