Tap event question

[AlexandraN]

Hello,

I'm trying to listen to a tap event but I can't get it working. Here's how my app.js file looks like:

var panel = Ext.create('Ext.Panel', {
    style: 'background-color: green;',
    listeners: {
        show: function() {
            alert('hello');
        }
    }
});


panel.addListener({
    body: {
        tap: function() {alert('tap');}
    },
    scope: this
});


//panel.addListener('tap', 
//    function() {alert('tap');},
//    this,
//    {element: 'body'}    
//);


Ext.application({
    name: 'Test App',
    
    launch: function() {        
        Ext.Viewport.add(panel);
    }
});

The 'show' event works, but the 'tap' event doesn't. Could someone please help me?
Thank you!

[rdougan]

Using the 'body' property in addListener/on does not work in PR2. You'll need to get the element directly and add the listener:

panel.element.on('tap', this.doSomething);

[AlexandraN]

Robert, thank you for taking the time to answer me.
I've tried this, not working:

var panel = Ext.create('Ext.Panel', {
	style: 'background-color: green;',
	listeners: {
		show: function() {
			alert('hello');
		}
	}
});




panel.element.on('tap', function() {alert('tap');});


Ext.application({
	name: 'Test App',
	
	launch: function() {		
		Ext.Viewport.add(panel);
	}
});

Is it maybe because of the Ext.application call?

[AlexandraN]

OK, this worked:

Ext.setup({
	onReady: function() {
		var panel = Ext.create('Ext.Panel', {
			style: 'background-color: green;',
			listeners: {
				show: function() {
					alert('hello');
				}
			}
		});


		// This works
		// panel.element.on('tap', function() {alert('tap');});
		
		// This also works
		// panel.body.addListener('tap', function() {alert('tap');});
		
		// This also works
		// panel.body.addListener({
		// 		
		// 				tap: function() {alert('tap');}
		// 			
		// 		});


		// This also works		
		panel.element.addListener({
	
						tap: function() {alert('tap');}
			
		});
		
		// This doesn't work
		// panel.addListener({
		// 		element: {
		// 			tap: function() {alert('tap');}
		// 		}
		// 	})


		Ext.Viewport.add(panel);
	}
});

But why?

[rdougan]

Your first code block is not working because you are creating a panel (which does NOT mean it is rendered), then adding it to the viewport (which does mean it is rendered). You should add it to the viewport, then add the listener. This should work.

[AlexandraN]

Yes! It worked! Thank you very much!

var panel = Ext.create('Ext.Panel', {
    style: 'background-color: green;',
    listeners: {
        show: function() {
            alert('hello');
        }
    }
});


Ext.application({
    name: 'Test App',
    
    launch: function() {        
        Ext.Viewport.add(panel);
        panel.element.on('tap', function() {alert('tap');});
    }
});