Tap event on MessageBox

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 :

Code:

---

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 :

Code:

---

....
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 ?

Don't put listeners in the config object.

Try something like this:

Code:

---

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.

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 :

Code:

---

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

---

I did this:

Code:

---

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

---

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