Hybrid View

    Looks like we cannot reproduce this. Please provide another test case to reproduce this issue.
  1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    76
    Vote Rating
    1
    Monti123 is on a distinguished road

      0  

    Default Tap event not firing on buttons in nested containers

    Tap event not firing on buttons in nested containers


    Hi,

    When using buttons in nested containers in ST 2.0.1.1 it all worked great, but when upgrading to ST 2.1 suddenly tap events on buttons stopped firing.

    When moving the actual button out of the nested container into an outer one, it all started to work like it should and worked on 2.0.1.1

    Let me know if any additional info is needed, I'm attaching a simplified version of the code although it's quite simple.

    Code:
    Ext.define("MyApp.view.classname", {
        
        extend: 'Ext.Container', 
        
        xtype: 'classname',
        
        id: 'ActivePosition',
    
    
        config: {
    
    
            title: 'Home',
            iconCls: 'home',
            cls: 'home',
            
            layout: 
            {
                type: 'vbox',
            },
    
    
            scrollable: false,
    
    
            items: [
                {
                    xtype: 'container',
                    
                    style: {
                        'margin-left': 'auto',
                        'margin-right': 'auto',
                        'margin-top': '15px',
                        'width' : '90%'
                    },
    
    
                    layout: {
                         type: 'hbox',
                         pack: 'center' 
                    },
                 
                    items: [
                             
                        {
                            xtype: 'panel',
                            html: 'text1',
                            width: '47%',
                            cls: 'TextMask',
                        },
                      
                         {
                             xtype: 'panel',
                             width: '6%'
                         },
                      
                        {
                            xtype: 'button',
                            width: '47%',
                            text: 'Do the action',
                            cls: 'Set from controller',
                            title: 'DoAction',
                            id: 'DoActionButtonId',
                            baseCls: 'null',
                        }
                        
                     ]
        },    
            ]
      } 
    
    
    });
    
    
      
    
    


  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,811
    Vote Rating
    834
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    How are you listening to the tap event? Just as a test this works for me:

    Code:
    Ext.define("MyApp.view.classname", {
        extend : 'Ext.Container',
        xtype  : 'classname',
    
        config : {
            title      : 'Home',
            iconCls    : 'home',
            cls        : 'home',
            layout     : {
                type : 'vbox',
            },
            scrollable : false,
            items      : [
                {
                    xtype  : 'container',
                    style  : {
                        'margin-left'  : 'auto',
                        'margin-right' : 'auto',
                        'margin-top'   : '15px',
                        'width'        : '90%'
                    },
                    layout : {
                        type : 'hbox',
                        pack : 'center'
                    },
                    items  : [
                        {
                            xtype : 'panel',
                            html  : 'text1',
                            width : '47%',
                            cls   : 'TextMask'
                        },
                        {
                            xtype : 'panel',
                            width : '6%'
                        },
                        {
                            xtype     : 'button',
                            width     : '47%',
                            text      : 'Do the action',
                            cls       : 'Set from controller',
                            title     : 'DoAction',
                            id        : 'DoActionButtonId',
                            baseCls   : 'null',
                            listeners : {
                                tap : function () {
                                    console.log('tap');
                                }
                            }
                        }
                    ]
                }
            ]
        }
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

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

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

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

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    76
    Vote Rating
    1
    Monti123 is on a distinguished road

      0  

    Default


    Hi,

    Well, your example does work... I had to investigate a little more to see what was causing my code not to work.
    There is a panel at the bottom, when I remove it - everything works. When I add it, the tap event isn't called.

    Code:
    Ext.define("App.view.classname", {
        extend : 'Ext.Container',
        xtype  : 'classname',
    
    
        config : {
            
        items: 
        [
            {
                xtype: 'container',
                
                items: [
                     
                    {
                        xtype: 'panel',
                        
                        items: [                    
                            {
                                   xtype: 'image',
                                   src: 'http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Sonic-icon.png',
                                   height: '32px',
                                   width: '32px',
                                   centered: true,
                                   
                                   listeners: {
                                       tap: function(){
                                           alert('yo');
                                       }
                                   }
                               
                            }
                        ]
                    }
                    
                ]
            },
            
            {
                xtype: 'panel',
                html: 'panel',
                height: '40px'
            },
                
        ]
        }
    });
    Weird ha?
    Thanks!

Thread Participants: 1

Tags for this Thread