1. #1
    Sencha User ThiemNguyen's Avatar
    Join Date
    Jul 2011
    Location
    Hanoi, Vietnam
    Posts
    35
    Vote Rating
    0
    ThiemNguyen is on a distinguished road

      0  

    Default "itemtap" event never fired when pushing an Ext.List into an existing navigation view

    "itemtap" event never fired when pushing an Ext.List into an existing navigation view


    Hello,

    My scheme is quite simple. This is a child view which can be pushed into a Ext.navigation.View class. If I let it extend from Ext.List, itemtap event is never fired.

    Here is my code for this child view, it's very simple:

    Code:
    Ext.define('tscc.view.Sessions', {
        extend: 'Ext.List',
        alias: 'widget.Sessions',
    
    
        requires: [
        ],
    
    
        config: {
            id: 'sessions-view',
            store: 'Sessions',
            itemTpl: '{title}',
    
    
            listeners: [
                {
                    fn: 'onItemTap',
                    event: 'itemtap'
                }
            ]
        },
    
    
        initialize: function(){
            Ext.getStore('Sessions').load();
        },
    
    
        onItemTap: function(dataview,index,target,record,e,eOpts){
            console.log('itemtap');
        }
    });
    The weird thing is that when I wrap the list view into an Ext.Container class, it works:

    Code:
    Ext.define('tscc.view.Sessions', {
        extend: 'Ext.Container',
        alias: 'widget.Sessions',
    
    
        requires: [
            'Ext.dataview.List'
        ],
    
    
        config: {
            id: 'sessions-view',
            layout: 'card',
            items: [
                {
                    xtype: 'list',
                    store: 'Sessions',
                    itemTpl: '{title}',
                    listeners: [
                        {
                            fn: 'onItemTap',
                            event: 'itemtap'
                        }
                    ],
                    onItemTap: function(dataview, index, target, record, e, eOpts){
                        console.log(dataview);
                        console.log(index);
                        console.log(target);
                        console.log(record);
                        console.log(e);
                    },
                }
            ]
        },
    
    
        initialize: function(){
            Ext.getStore('Sessions').load();
        },
    });
    Did I misunderstand something or is this a bug?

    Any help is appreciated. Thanks.
    ​Your time is limited, so don't waste it living someone else's life.

  2. #2
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    3,978
    Vote Rating
    132
    fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all fmoseley is a name known to all

      0  

    Default


    I'm unable to reproduce this issue using the following fiddle.
    https://fiddle.sencha.com/#fiddle/1ok
    If you can modify it to reproduce the issue I will take a look at it.
    What version of Touch are you using?
    Get more personalized support via a support subscription.

    Want to learn Sencha Touch 2? Check out
    Sencha training
    Sencha Touch in Action

    Need more help with your app? Hire Sencha Services services@sencha.com

    When posting code, please use BBCode's CODE tags.

    Need to include a test case use:
    The official Sencha Fiddle

  3. #3
    Sencha User ThiemNguyen's Avatar
    Join Date
    Jul 2011
    Location
    Hanoi, Vietnam
    Posts
    35
    Vote Rating
    0
    ThiemNguyen is on a distinguished road

      0  

    Default


    Hi fmoseley, here is the modified fiddle, please run it. Thanks,

    Code:
    Ext.application({
        name: 'Fiddle',
    
    
        launch: function() {
            var view = Ext.create('Ext.NavigationView', {
                fullscreen: true,
    
    
                items: [{
                    title: 'First',
                    items: [{
                        xtype: 'button',
                        text: 'Push a new view!',
                        handler: function() {
                            view.push({
                                title: 'List View',
                               // xtype: 'container',
                                
                               // items: [{
                                    xtype: 'list',
                                    itemTpl: '{title}',
                                    data: [{
                                        title: 'Item 1'
                                    }, {
                                        title: 'Item 2'
                                    }, {
                                        title: 'Item 3'
                                    }, {
                                        title: 'Item 4'
                                    }],
                                    listeners: [
                                        {
                            				fn: 'showDetails',
                            				event: 'itemtap'
                        				}
                                    ],
                                    showDetails: function(){
                                		Ext.Msg.alert('info', 'tap');
                            		}
                               // }]
                            });
                        }
                    }]
                }]
            });
        }
    });
    ​Your time is limited, so don't waste it living someone else's life.

  4. #4
    Sencha User
    Join Date
    Sep 2012
    Location
    United States
    Posts
    36
    Vote Rating
    3
    stevenbrent is on a distinguished road

      0  

    Default


    I'm not sure whether the parent component has anything to do with what you are encountering, but if you rework the listeners config as shown below, it works in the fiddle:

    Code:
    listeners: [
                           {
                             event : 'itemtap',
                             fn    : function () {
                                    console.log('tapped');
                            }
                        }, {
                                 event : 'itemtaphold',
                             fn    : function () {
                                 console.log('tapped and held');
                            }
                        }
      ]
    (I added that extra listener just to make sure that adding multiple listeners to the array this way worked)

  5. #5
    Sencha User ThiemNguyen's Avatar
    Join Date
    Jul 2011
    Location
    Hanoi, Vietnam
    Posts
    35
    Vote Rating
    0
    ThiemNguyen is on a distinguished road

      0  

    Default


    I tried but no luck.
    Also even if I wrap the list inside an Ext.Container, when building it with Sencha Cmd 4, the list still doesn't listen to itemtap event.
    Fortunately, I have just resolved the issue by a workaround.
    The solution is to bind the itemtap event listener dynamically on initialization. This works in all production & testing builds also.
    Still very weird issue btw.
    ​Your time is limited, so don't waste it living someone else's life.

Thread Participants: 2