1. #1
    Sencha User
    Join Date
    Dec 2012
    Posts
    77
    Answers
    6
    Vote Rating
    1
    azamatoak is on a distinguished road

      0  

    Default Answered: Itemtap not firing on listview in first detail view of 2-level detail view navigation

    Answered: Itemtap not firing on listview in first detail view of 2-level detail view navigation


    I have a categories page which drills down to a retailers list which then drills down to a retailer detail page. When I click on a category I see the retailers list with retailers for that category. I can then click on any retailer and see the details for it. I can see the details, go back and see the detail for another retailer. But, if I go back to the category list and then click on another category, then get the retailers list, I cannot click on the retailer to see the retailer details page. I am not sure why this is not working or if I'm even using the optimal way to pass this data.

    My controller that handles the events:
    Code:
    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
            });
        }
    
    
    });
    My categories page:
    Code:
    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();
            
        }
        
    });
    My retailers page:
    Code:
    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 &gt; 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);
        }
        
    });
    My retailer details page:
    Code:
    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);
        }    
    });

  2. I was able to solve this after all. I spent quite a bit of time trying to figure out why the event wouldn't even fire on the 1st detail list view after having gone back to the first (initial listview) within navigation view.

    It turns out that I was using id on my list and using that in the controller as well. This was undoubtedly causing a component destroy issue (but the error was never reported and masked somewhere in the code) internally. After switching this to itemId it is now working.

    Hope this helps someone.

  3. #2
    Sencha User
    Join Date
    Dec 2012
    Posts
    77
    Answers
    6
    Vote Rating
    1
    azamatoak is on a distinguished road

      0  

    Default


    Can anyone help?

  4. #3
    Sencha User
    Join Date
    Dec 2012
    Posts
    77
    Answers
    6
    Vote Rating
    1
    azamatoak is on a distinguished road

      0  

    Default


    I was able to solve this after all. I spent quite a bit of time trying to figure out why the event wouldn't even fire on the 1st detail list view after having gone back to the first (initial listview) within navigation view.

    It turns out that I was using id on my list and using that in the controller as well. This was undoubtedly causing a component destroy issue (but the error was never reported and masked somewhere in the code) internally. After switching this to itemId it is now working.

    Hope this helps someone.