tap event on a dinamically created custom Panel (MVC)

[greenkey_loman]

Hi coders, I have a problem about views and events.

I have to put dinamically some custom Panels in my app (xtype:'card').
I want my Controller to manage events on these Panels, with "refs".

Sample code:

Ext.define('D45.controller.Deck', {
    extend: 'Ext.app.Controller',
    config: {
    ...
        refs: { 
                desk: '#desk',
             card: 'card'
        },
        control: {
                card:{
                tap: function(){
                    Ext.Msg.alert('tap!');
                }
            },
    ...
    putCard: function(id){
             this.getDesk().add({ xtype:'card', cardNo:id });
    }
});

The event simply doesn't work!
Have you got some ideas?

[mitchellsimoens]

In the API docs does the component list a tap event? If not, why did you think it'd work? You can fire the event from the view as you would need to add an element event listener.

[greenkey_loman]

In the API docs does the component list a tap event?

Yep!

Ext.define('D45.view.Card', {
    extend: 'Ext.Panel',
    xtype: 'card',
    ...

If not, why did you think it'd work? You can fire the event from the view as you would need to add an element event listener.

It's difficult to post all the code because it covers some files...

[mitchellsimoens]

Ext.Panel does not have a tap event listed in the API docs.

[greenkey_loman]

Ext.Panel does not have a tap event listed in the API docs.

Oh... I feel stupid...
but...
I changed "

extend: 'Ext.Panel',

" into "

extend: 'Ext.Button',

"... nothing changed!

Also if i use this:
D45.app.getController('Deck').getCard()
It returns only one "Card"... i expected to return an Array of Cards...

And if I set an event on it:
D45.app.getController('Deck').getCard().onTap(function(a){alert(a);})
It doesn't work.

What am I doing wrong?

[mitchellsimoens]

refs only support a single instance.

Like I said, you can easily add a tap event to the panel's element and then have it listenable in the controller. Here is an example:

Ext.define('Test.controller.Main', {
    extend : 'Ext.app.Controller',

    config : {
        control : {
            'test-mypanel' : {
                tap : 'onPanelTap'
            }
        }
    },

    onPanelTap : function(panel) {
        console.log('panel was tapped on', panel);
    }
});

Ext.define('Test.view.MyPanel', {
    extend : 'Ext.Panel',
    xtype  : 'test-mypanel',

    initialize : function() {
        this.callParent(arguments);

        this.relayEvents(this.element, ['tap']);
    }
});

Ext.application({
    name : 'Test',

    controllers : [
        'Main'
    ],

    launch : function () {

        Ext.Viewport.setActiveItem({
            xtype : 'test-mypanel',
            html  : 'Tap on me and look at the console'
        });

    }
});

[greenkey_loman]

Great!
So the key is the function "relayEvents".

Thank you very much!