我有一个类别页面，可以深入到零售商列表，然后深入到零售商详细信息页面。当我点击某个类别时，我会看到零售商列表中的零售商。然后，我可以点击任何零售商并查看其详细信息。我可以看到细节，回过头来看看另一家零售商的细节。但是，如果我回到类别列表然后点击其他类别，然后获取零售商列表，我无法点击零售商查看零售商详细信息页面。我不知道为什么这不起作用，或者我甚至使用最佳方式来传递这些数据。
我的处理事件的控制器：
Ext.define('MyApp.controller.Retailers', {
extend: 'Ext.app.Controller',
config: {
refs: {
retailersView: 'retailersView',
categoriesView: 'categoriesView',
categoryList: '#categoryList',
retailerList: '#retailerList',
},
control: {
categoryList: {
itemtap: 'onCategoryItemTap',
disclose: 'onCategoryDisclose'
},
retailerList: {
itemtap: 'onRetailerItemTap',
disclose: 'onRetailerDisclose'
}
}
},
onCategoryItemTap: function (list, index, target, record, e) {
this.showRetailerList(list, record);
},
onCategoryDisclose: function(list, record) {
this.showRetailerList(list, record);
},
showRetailerList: function(item, record) {
var retailersByCategory = Ext.getStore('retailersStore');
retailersByCategory.clearFilter();
retailersByCategory.filter('category_id', record.data.id);
this.getCategoriesView().push({
xtype: 'retailersView',
data: retailersByCategory
});
},
onRetailerItemTap: function (list, index, target, record, e) {
console.log('itemtap fired!');
this.showRetailerDetail(list, record);
},
onRetailerDisclose: function(list, record) {
console.log('disclose fired!');
this.showRetailerDetail(list, record);
},
showRetailerDetail: function(item, record) {
var offersForRetailer = Ext.getStore('offersStore');
offersForRetailer.clearFilter();
offersForRetailer.filter('retailer_id', record.data.id);
record.data.offersStore = offersForRetailer;
item.up('navigationview').push({
xtype: 'retailerDetail',
data: record.data
});
}
});
我的分类页面：
Ext.define('MyApp.view.Categories', {
extend: 'Ext.navigation.View',
xtype: 'categoriesView',
requires: [
'MyApp.store.Categories',
'Ext.List',
'Ext.field.Search'
],
config: {
navigationBar: {
items: [
{
xtype: 'button',
text: 'Help',
id: 'categoriesHelp',
align: 'right'
}
]
},
items: [
{
xtype: 'container',
//title: 'Retailers',
layout: {
type: 'vbox'
},
items: [
{
xtype: 'listView',
ui: 'round',
id: 'categoryList',
store: 'Categories',
itemTpl: '{name}'
}
]
}
]
},
initialize: function() {
this.callParent();
}
});
我的零售商页面：
Ext.define('MyApp.view.Retailers', {
extend: 'Ext.Container',
xtype: 'retailersView',
requires: [
'MyApp.store.Retailers',
'Ext.List',
'Ext.field.Search'
],
config: {
layout: {
type: 'vbox'
},
scrollable: {
direction: 'vertical',
directionLock: true
},
items: [
{
xtype: 'listView',
id: 'retailerList',
itemTpl: [
'<div class="listingImage">',
'<img width="80" height="80" src="{imgUrl}" />',
'</div>',
'<div>',
'<span class="listingName">{name}</span>',
'</div>',
'<div>',
'<tpl if="total_offers > 0">',
'<span class="listingOffers">{total_offers} offers</span>',
'</tpl>',
'<span class="listingDistance">{distance} km</span>',
'</div>'
].join(''),
flex: 1
}
]
},
initialize: function() {
this.callParent();
console.log(this.config.data.data.length + ' retailers in this category');
this.down('#retailerList').setStore(this.config.data);
}
});
我的零售商详情页面：
Ext.define('MyApp.view.detail.Retailer', {
extend: 'Ext.Container',
xtype: 'retailerDetail',
requires: [
'Ext.dataview.List',
'Ext.SegmentedButton',
'Ext.Img'
],
config: {
scrollable: {
direction: 'vertical',
directionLock: true
},
layout: 'vbox',
items: [
{
xtype: 'container',
id: 'retailerBasicDetail',
flex: 1,
items: [
{
xtype: 'container',
cls: 'retailer-detail-container',
items: [
{
xtype: 'container',
layout: 'hbox',
flex: 1,
items: [
{
xtype: 'container',
id: 'offer-detail-image-container',
items: [
{
xtype: 'img',
cls: 'offerDetailImg',
id: 'retailerImg'
}
]
},
{
xtype: 'container',
layout: 'vbox',
items: [
{
xtype: 'container',
id: 'retailer-detail-basic',
flex: 1,
tpl: [
'<div class="offer-detail-name">',
'<h3>{name}</h3>',
'</div>',
'<div class="offer-detail-distance">',
'<span>Nearest location: {distance} km</span>',
'</div>'
].join('')
},
{
xtype: 'container',
cls: 'offer-detail-actions',
layout: 'hbox',
flex: 1,
items: [
{
xtype: 'button',
cls: 'retailer-detail-contact-button',
id: 'retailer-detail-contact-button'
},
{
xtype: 'button',
cls: 'retailer-detail-map-button',
id: 'retailer-detail-map-button'
}
]
}
]
}
]
},
{
xtype: 'container',
flex: 1,
id: 'retailer-detail-description',
tpl: [
'<div class="retailer-detail-about">',
'<p>{description}</p>',
'</div>'
].join('')
}
]
}
]
},
{
xtype: 'list',
id: 'retailerOffersList',
scrollable: 'false',
flex: 1,
ui: 'round',
itemTpl: '<strong>{offer}</strong>',
onItemDisclosure: true
}
]
},
initialize: function() {
this.callParent();
this.down('#retailerImg').setSrc(this.config.data.imgUrl);
this.down('#retailer-detail-description').setData(this.config.data);
this.down('#retailer-detail-basic').setData(this.config.data);
this.down('#retailerBasicDetail').setData(this.config.data);
var offersForRetailer = Ext.getStore('offersStore');
offersForRetailer.clearFilter();
offersForRetailer.filter('retailer_id', this.config.data.id);
this.down('#retailerOffersList').setStore(offersForRetailer);
}
});
答案 0 :(得分：1)
毕竟我能够解决这个问题。我花了很多时间试图找出为什么在回到导航视图中的第一个（初始列表视图）之后，事件甚至不会在第一个详细信息列表视图上触发。
事实证明我在我的列表中使用id并在控制器中使用它。毫无疑问，这会在内部导致组件销毁问题（但错误从未在代码中的某处报告并被屏蔽）。将此切换为itemId并更新我的选择器后，它现在正常工作。
希望这有助于某人。