Clickable background

[SammyO]

Thanks!
In Sencha Fiddle it works exactly like I want, but if I copy paste it into my app, the layout is the same, but no messages/console.logs appear.

I adjusted the code a bit, since I already have a launch function etc, to the following:

        var login = new Ext.Panel({
            fullscreen: true,
            id: 'background01',
            style: 'background: red;',
            items: [{
                cls: 'wowpanel',
                html: 'Login',
                id:'wowpanel',
                centered: true,
                style:'background: white; color: black;',
                zIndex:1,
                listeners : {
                    initialize: function(clickableComponent){
			console.log("hi");
                        clickableComponent.element.on('tap',function(e,el){
                            
                            console.log('button tap');
                            
                        })
                            }
                }
            }],
            listeners : {
                
                initialize: function(clickableComponent){
			console.log("hi");
                    clickableComponent.element.on('tap',function(e,el){
                        console.log('background tap');
                    })
                        }
            }
        });

[haduki]

I have read your code.You missed "e.stopPropagation();"if you want to separate the event.

there is no messages/console.logs appear

make sure you have imported the view or create it.

//new Ext.Panel({})
Ext.create('Ext.Panel',{})
// and do not forget requires/views config.

[SammyO]

I'm not using an MVC structure...
Also, when I copy paste your code, except for the first launch and setup functions (so see code below), I'm not getting any kind of output/message/alerts...

var login = new Ext.Panel({            fullscreen: true,
            id: 'background01',
            style: 'background: red;',
            items: [{
                cls: 'wowpanel',
                html: 'Login',
                id:'wowpanel',
                centered: true,
                style:'background: white;',
                zIndex:1,
                listeners : {
                    initialize: function(clickableComponent){
                        clickableComponent.element.on('tap',function(e,el){
                            
                            Ext.Msg.alert('button tap');
                            e.stopPropagation();
                            
                            
                        })
                            }
                }
            }],
            listeners : {
                
                initialize: function(clickableComponent){
                    clickableComponent.element.on('tap',function(e,el){
                        Ext.Msg.alert('background tap');
                    })
                        }
            }
        });

[SammyO]

Also, when I add a console.log to the initialize function, before the clickableComponent.element.on(), I'm not getting any output either. Seems like the initialize events aren't even fired?