【发布时间】：2013-01-28 15:58:51
【问题描述】：
我有一个类别页面，该页面可深入到零售商列表，然后再深入到零售商详细信息页面。当我点击一个类别时，我会看到该类别的零售商列表。然后，我可以单击任何零售商并查看其详细信息。我可以看到细节，回去看看另一个零售商的细节。但是，如果我回到类别列表，然后单击另一个类别，然后获取零售商列表，我无法单击零售商查看零售商详细信息页面。我不确定为什么这不起作用，或者我什至使用了最佳方式来传递这些数据。
处理事件的控制器：
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);
}
});
【问题讨论】：
标签： javascript listview navigation dom-events sencha-touch-2