Javascript 在Sencha Touch 2中使用不同的代理存储动态定义和加载视图

Javascript 在Sencha Touch 2中使用不同的代理存储动态定义和加载视图,javascript,model-view-controller,proxy,sencha-touch-2,Javascript,Model View Controller,Proxy,Sencha Touch 2,我正在使用Sencha Touch 2创建一个移动应用程序,该应用程序将根据服务器的Json响应自动加载其视图 这意味着,在加载视图之前,我必须用一些通用元素组合视图。例如,如果我从服务器接收到一个Json字符串,该字符串对应于一个列表视图,我将不得不用存储和代理友好地填充列表项(名称、url、描述符) 这是可行的,但我想选择该列表中的某个项目并加载另一个列表,但这次我想更改代理。我的新代理是所选项目的url字段。我从所选项目获取url字段并更改代理,但这会带来一个问题: 我使用的是Ext.na

我正在使用Sencha Touch 2创建一个移动应用程序,该应用程序将根据服务器的Json响应自动加载其视图

这意味着,在加载视图之前,我必须用一些通用元素组合视图。例如,如果我从服务器接收到一个Json字符串,该字符串对应于一个列表视图,我将不得不用存储代理友好地填充列表项(名称、url、描述符)

这是可行的,但我想选择该列表中的某个项目并加载另一个列表,但这次我想更改代理。我的新代理是所选项目的url字段。我从所选项目获取url字段并更改代理,但这会带来一个问题:

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

我正在搜索某种工作流,以根据每个视图的独立数据实现视图的动态加载,并始终维护MVC存储模式和导航历史

这是列表项的我的模型:

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

您可以尝试为每个列表创建单独的存储,而不是重用现有的存储

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

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

一旦弹出视图,您可能希望销毁这些存储。

@ThinkFloyd,请同意我们需要在离开视图时销毁存储,因为当应用程序具有多个视图且具有包含大量数据的较大存储时,这将在以后产生问题。我最近遇到了同样的问题,这对我帮助很大……谢谢

这正是我想要的。谢谢另外,我不确定在弹出并销毁视图时存储持久性。在navigation.view中,单击“上一步”按钮时,视图应弹出并销毁,但存储会发生什么情况?