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

Posted 2023-02-25

【中文标题】在 Sencha Touch 2 中使用不同的代理存储动态定义和加载视图

【英文标题】：Dynamically define and load views with different proxy store in Sencha Touch 2

【发布时间】：2013-03-26 09:52:58

【问题描述】：

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

这意味着在加载视图之前，我必须使用一些通用元素来组合视图。例如，如果我从服务器接收到与 List 视图相对应的 Json 字符串，我将不得不动态填充列表项（name、url，描述）带有一个商店和一个代理。

这可行，但我想在该列表中选择一些项目并加载另一个列表，但这次我想更改代理。我的新代理是所选项目的 url 字段。我从所选项目中获取 url 字段并更改代理，但这会引入一个问题：

我正在使用 Ext.navigation.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
    );

【参考方案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
            
        );
    
)

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

【讨论】：

这正是我想要的。谢谢！另外，当您弹出并销毁视图时，我不确定存储持久性。在navigation.view 中，当您单击后退按钮时，应该会弹出并销毁该视图，但是商店会发生什么情况？

【参考方案2】：

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