Threaded View

  1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    7
    Answers
    1
    Vote Rating
    0
    samlowry is on a distinguished road

      0  

    Default Answered: Tap event on MessageBox

    Answered: 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 ?

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

Thread Participants: 1

Tags for this Thread