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.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,649
    Answers
    3454
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

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

      0  

    Default


    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);
    ....

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,649
    Answers
    3454
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I did this:

    Code:
    var msg = Ext.create('mytest.view.Windowmsg');
    msg.show();
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

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

      0  

    Default


    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

Thread Participants: 1

Tags for this Thread