我是 Sencha 的新手,虽然我已经完成了我需要的大部分工作,但我正在努力完成一项特定的任务——当用户点击一个项目时动态设置商店的代理 URL,并加载/服务商店一个列表。
我在这里找到了使用 setProxy 以各种方式解决此问题的答案,并且代码看起来很简单,但我只是无法弄清楚如何将任何建议的代码片段成功地集成到我自己的代码中。因此,我在下面包含了我的代码,如果有人能准确地告诉我我需要包含什么以及在哪里包含,我将不胜感激。
原始记录列表 (#grList) 保存在导航视图 (Main.js) 中。
Ext.define('Groups.view.Main', {
extend: 'Ext.navigation.View',
xtype: 'main',
requires: [
],
config: {
id: 'Main',
items: [
{
xtype: 'tabpanel',
title: 'User Groups',
ui: 'light',
layout: {
animation: 'fade',
type: 'card'
},
tabBar: {
docked: 'top',
layout: {
pack: 'center',
type: 'hbox'
}
},
items: [
{
xtype: 'list',
title: 'News',
id: 'rssList',
itemTpl: [
'{title}<br/><small>{contentSnippet}'
],
store: 'Feeds'
},
{
xtype: 'list',
title: 'Profiles',
id: 'grList',
itemTpl: [
'<img class="photo" src="{grCountryFlagURL}" align="center" width="40" height="40"/>{grHandle}<br/><small>{grCountry}</small>'
],
store: 'Groups'
},
{
xtype: 'carousel',
title: 'About',
items: [
{
xtype: 'component',
html: '1'
},
{
xtype: 'component',
html: '2'
}
]
}
]
}
]
}
});
在点击记录项时,控制器 (MainController.js) 会将详细信息面板 (GroupDetail.js) 推送到导航视图。
Ext.define('Groups.controller.MainController', {
extend: 'Ext.app.Controller',
config: {
refs: {
main: '#Main'
},
control: {
"#grList": {
itemtap: 'showGRDetail'
},
"#rssList": {
itemtap: 'showRSSDetail'
}
}
},
showGRDetail: function(dataview, index, target, record, e, eOpts) {
var GRdetail = Ext.create('Groups.view.GroupDetail');
this.getMain().push(GRdetail);
GRdetail.setData(record.data);
GRdetail.getAt(0).setData(record.data);
GRdetail.getAt(1).setData(record.data);
},
showRSSDetail: function(dataview, index, target, record, e, eOpts) {
var RSSdetail = Ext.create('Groups.view.NewsDetail');
this.getMain().push(RSSdetail);
RSSdetail.setData(record.data);
}
});
详细信息面板包含两个选项卡。第一个是显示记录数据的简单容器,并且工作正常。第二个(#rssGroup)是一个列表,我想在其中显示特定于被点击的记录项的 RSS 提要,但这是我无法开始工作的地方。
Ext.define('Groups.view.GroupDetail', {
extend: 'Ext.tab.Panel',
config: {
id: 'GroupDetail',
items: [
{
xtype: 'container',
padding: 30,
title: 'Profile',
iconCls: 'search',
id: 'grProfile',
tpl: [
'<img class="photo" src="{grCountryFlagURL}" align="center" width="80" height="50"/>{grHandle}<br/><small>{grProfile}</small>'
],
layout: {
type: 'fit'
}
},
{
xtype: 'list',
title: 'News',
id: 'rssGroup',
iconCls: 'info',
itemTpl: [
'{title}<br/><small>{contentSnippet}'
],
store: 'GroupNews'
}
],
tabBar: {
docked: 'bottom',
layout: {
pack: 'center',
type: 'hbox'
}
}
}
});
RSS 列表使用商店 (GroupNews.js) 和模型 (Feed.js),如果我在商店上设置 autoload=true 并硬编码静态代理 URL,则工作正常,但如果我关闭自动加载并删除 prxy url ,我在动态设置、加载和服务这家商店的实验都没有奏效。
Ext.define('Groups.store.GroupNews', {
extend: 'Ext.data.Store',
alias: 'store.GroupNews',
requires: [
'Groups.model.Feed'
],
config: {
autoLoad: false,
model: 'Groups.model.Feed',
storeId: 'GroupNews',
proxy: {
type: 'jsonp',
url: '',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
}
}
});
NB。我没有在上面的代码示例中包含任何动态设置/加载 GroupNews 存储的尝试,这正是我到目前为止所做的工作。
任何帮助将不胜感激。