Tap event on MessageBox

[samlowry]

Hi, i have a little sencha touch 2.0 MVC application. packaged via PhoneGap.

I want a little message box which if touched/clicked will let the do something, lets say a couple of simple alert.

To obtain this i have writed this view :

Ext.define('mytest.view.Windowmsg', {
    extend: 'Ext.MessageBox',
    alias: 'widget.windowmsg',
    title: 'Clickable Message',
    config: {
        top:20,
        html : 'Click Me!',
        style:"  text-align:center;background-color:#822222;color:yellow;position:absolute;bottom:20;left:0;right:0;width:80%;margin-left:10%;text-align:center;",


        listeners: {
            tap:function(){
                alert ('Hello World!');
                alert ('Hello Earth!');
            }
        },
        modal:false,
        hidden:false 
    }
});

And in the controller i use this lines of code to add the message box to my panel :

....
var mylittlewindow = Ext.widget('windowmsg');
Ext.Viewport.add(mylittlewindow);
....

The message box is correctly visualized but i am not able to control the tap event related to it, like i thought i was doing with the 'listeners' configuration in the Ext.MessageBox.

My question is : Please, what's the right way to control the tap event on that MessageBox ?

[mitchellsimoens]

Don't put listeners in the config object.

Try something like this:

Ext.define('mytest.view.Windowmsg', {
    extend : 'Ext.MessageBox',
    xtype  : 'windowmsg',

    config: {
        top    : 20,
        html   : 'Click Me!',
        style  : 'text-align:center;background-color:#822222;color:yellow;position:absolute;bottom:20;left:0;right:0;width:80%;margin-left:10%;text-align:center;',
        modal  : false,
        hidden : false
    },

    initialize: function() {
        var me = this;

        me.callParent();

        me.getEl().on('tap', me.handleTap, me);
    },

    handleTap: function(e, node, opts) {
        //scope is of mytest.view.Windowmsg class
    }
});

A side note, in production it is much easier to maintain CSS/SASS than to dig through your javascript files and change the style config on your classes. I would get rid of the style config you have and use the cls config to the CSS name you have for all that styling.

[samlowry]

Thanks for your quick answer.
I've tried your code, but nothing happens.

It seems that the 'initialize' function is not called at all.

May be cause of the way i am creating this element ?

In fact as i wrote, in the controller to create the messageBox i do this :

....
var mylittlewindow = Ext.widget('windowmsg');
Ext.Viewport.add(mylittlewindow);
....

[mitchellsimoens]

I did this:

var msg = Ext.create('mytest.view.Windowmsg');
msg.show();

[samlowry]

Oppps...what a stupid.
I wrote initialize function before closing the brace of the view config. Corrected and it works ok.
I've lost some hours, but (hope) i've learned a bit more on sencha touch view and event ..

Thank you Mr.Mitchell