View Full Version : Tap event on panels which are children of other Panelsd

19 Jan 2012, 12:10 PM
I read somewhere that ST-2-pr3 doesn't support the definition of 'listeners' when specifying items on a view component such as an Ext.Panel, so I am struggling right now on how to inform my controllers when a panel is tapped which lives as a child panel of another panel/container.
Suppose I have the following view:

Ext.define('App.view.HomeTopicsList', {
extend: 'Ext.Panel',
alias: 'widget.hometopicslist',
config: {
layout: { type: 'vbox', pack: 'start' },
items: [{ xtype: 'toolbar',
docked: 'top',
title: 'MyApp' },

{ xtype: 'container',
layout: 'vbox',
items: [{ xtype: 'container',
layout: 'hbox',
items: [{ xtype: 'panel',
id: 'videosCtrl',
// listeners: { el: { tap: this.onTapAction } },
html: "Video's" },
{ xtype: 'panel',
id: 'picturesCtrl',
html: "Pictures" }
{ xtype: 'container',
layout: 'hbox',
items: [{ xtype: 'panel',
id: 'musicCtrl',
html: "Music" },
{ xtype: 'panel',
id: 'youTubeCtrl',
html: "YouTube" }

initialize: function() {

// Event handlers:
this.onTapAction = function() {

// Register event listeners
this.element.on( { tap: this.onTapAction } );

Registering a 'tap' event for the containing/parent panel works as shown in the 'initialize method, but I see no possibility to register for a 'tap' event occurring on a specific panel, e.g. on the panel defined by 'id' videosCtrl.

A side question related to this is how in the new ST-2 a controller must be informed about an event occurring in the view. I read that action-dispatching is not possible anymore and that controllers also have to register now for events. In the 'pure' MVC paradigm I would think that the view then has to fire an action-event when my 'tap' event is handled. Is this correct and possible with the current pr3 version or does ST-2 assumes that a controller registers for my 'tap' event (which seems bad style in terms of the tight coupling that would occur between the view and the controller)?

Anyone able to shed some light on this?


19 Jan 2012, 12:34 PM
listeners like that will work. I wouldn't use it on the panel itself...

config : {
listeners : {....}

In beta... there is a new functionality where you can deal with nested items a lot easier. People will need to buy Ed Spencer a beer on that improvement

19 Jan 2012, 12:55 PM
Thanks for the prompt answer!

Do I have to wait then for the beta version to get the panel-specific tap events or is there a possibility with pr3 to use the 'listeners' key in 'config'? Would this work using component query? Like in:

listeners: {'#videosCtrl': {tap: this.onVideosCtrlTapAction},
'#musicCtrl': {tap: this.onMusicCtrlTapAction}