我正在使用 Sencha Touch 2 创建一个移动应用程序,该应用程序将根据服务器的 Json 响应动态加载其 View 。
这意味着在加载 View 之前,我必须使用一些通用元素来组合 View 。例如,如果我从服务器收到对应于 List View 的 Json 字符串,我将必须动态填充列表项(name、url,描述),带有商店和代理。
这可行,但是我想选择该列表上的某些项目并加载另一个列表,但这次我想更改代理。我的新代理是所选项目的 url 字段。我从所选项目中获取 url 字段并更改代理,但这引入了一个问题:
我正在使用 Ext.navigation.View,并且我想维护导航历史记录。在上述情况下,如果我返回导航历史记录,第一个列表中的项目将更改为最后一个列表中的项目。
我正在寻找某种工作流程来实现 View 的动态加载,具体取决于每个 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
});
}
并添加初始化函数以使用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 弹出,您可能想销毁它们。
关于javascript - 在 Sencha Touch 2 中动态定义和加载具有不同代理存储的 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15633976/