小売業者のリストにドリルダウンし、小売業者の詳細ページにドリルダウンするカテゴリ ページがあります。カテゴリをクリックすると、そのカテゴリの小売業者の小売業者リストが表示されます。次に、任意の小売業者をクリックして、その詳細を表示できます。詳細を確認し、戻って別の小売業者の詳細を確認できます。しかし、カテゴリ リストに戻って別のカテゴリをクリックし、小売業者のリストを取得すると、小売業者をクリックして小売業者の詳細ページを表示できません。なぜこれが機能しないのか、このデータを渡すのに最適な方法を使用しているのかどうかはわかりません。
イベントを処理する私のコントローラー:
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);
}
});