Passing a Container's custom click event from a view to a controller

[haik]

Hi,
I'd like to respond to a tap event on a Container, which doesn't directly support this event, so I'm attaching a tap handler in the Container's initialize and firing a click event which the Controller's ref and control configs should pass to the Controller's event handler. The tap events are detected but they don't seem to get through to the controller. Could you let me know if I'm on the right track?
Thanks,
Haik

// -- View --
Ext.define('MyApp.view.MyComponent', {
    extend: 'Ext.Container',
    xtype : 'mycomponent',


    initialize: function () {
        this.callParent(arguments);
        this.element.on({
            tap: function() {
                this.fireEvent('click');
            }
        });
    },
...


// -- Controller --
Ext.define('MyApp.controller.MyComponent', {
    extend: 'Ext.app.Controller',


    config: {
        refs: {
            navItems: 'mycomponent'
        },
        control: {
            navItems: {
                click: 'onMyComponentTap'
            }
        }
    },


    onMyComponentTap: function(theComponent) {
        // never gets called
    },
...

[aorlando]

A simple workaround
In the container:

          ,listeners: {
                            tap: {
                                element: 'element',
                                fn: function() {
                                    astri.app.getController('ClassNameController').setVal(this.propert, this.mId);
                                }
                            }
                        }

in the Controller:

    ,setVal : function(seg,mid){


        //do something


    }

Otherwise you can do everything in the Controller class:

           ,'queryOfInterestedView' : {
                activate: function() {
                    this.setVal();
                }
            }

I hope to help you
Bye

[haik]

For a container, there seems to be no clean way to get a tap event without leaving the Sencha object model and dropping down into the HTML DOM. Using a DataView instead of a container solved it as it has tap events (itemTap) while staying on the Sencha level.

[mitchellsimoens]

For a container, there seems to be no clean way to get a tap event without leaving the Sencha object model and dropping down into the HTML DOM. Using a DataView instead of a container solved it as it has tap events (itemTap) while staying on the Sencha level.

You can use a Container and have a tap listener:

new Ext.Container({
    fullscreen : true,
    html       : 'Look at the console when you tap',
    listeners  : {
        element : 'element',
        tap     : function() {
            console.log('tap');
            console.log('scope of listener', this);
            console.log('arguments', arguments);
            console.log('----');
        }
    }
});

[haik]

Thanks. When this event comes in it's an HTMLHtmlElement object, for the div. I went with the itemTap on the DataView instead, as it stays in the Touch world.