1. #1
    Sencha User
    Join Date
    Dec 2012
    Posts
    77
    Answers
    6
    Vote Rating
    2
    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
    2
    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
    2
    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.

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi