1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    4
    Vote Rating
    0
    Maldus is on a distinguished road

      0  

    Default Answered: Pop Up Problem

    Answered: Pop Up Problem


    Hi there,
    i'm currently trying to make a pop-up when the user clicked on a button, but can't make it work, no error pop in the android LogCat (i'm using the debug js of sencha).

    I think i just made a little mistake but can't find it out.
    Here is the code :
    Code:
     onbtnUserProfileTap: function(button, e, options) {        var popup = new Ext.Panel({
                floating: true,
                centered: true,
                modal: true,
                width: 300,
                height: 400,
                styleHtmlContent: true,
                html: 'Hello! I\'m a PopUp',
                dockedItems: [{
                    xtype: 'toolbar',
                    title: 'PopUp',
                    items: [{
                        xtype: 'spacer'
                    },{
                        text: 'Close',
                        handler: function(){
                            popup.hide();
                        }
                    }]
                }]
            });
            popup.show();
        },
    If anyone has any idea, i take it !

    Thanks in advance

  2. Quote Originally Posted by iSmartDevice View Post
    Please see below in bold text.
    Code:
    var popup = new Ext.Panel({
                modal: true,
                floating: true,
                centered: true,
                width: 300,
                height: 200,
                styleHtmlContent: true, 
                padding: 0,
                fullscreen:true,
    
                items: [
                   {
                        xtype: 'titlebar',
                        title: 'PopUp',
                        items: [
                           {
                                 xtype:'button',
                                 align:'right',
                                 text: 'Close',
                                 handler: function(){
                                       popup.hide();
                                }
                          }
                       ]
                  },
                  {
                      html: 'Hello! I\'m a PopUp',
                   }
              ]
    });
            popup.show();
    That won't work either. Panel's do not have a 'floating' config anymore as using the 'centered' config handles that in ST2. And you don't have to put the html into another panel when you can simply use the parent panel to do so.

    Also, you should not use the 'fullscreen: true' in a panel like this.

    @Maldus:

    You are using outdated code. Notice the 'dockedItems' config. That is deprecated as of ST2 and it is now controlled using the 'items' config with the objects using a 'docked' config. I have also switched you toolbar to be a titlebar and gave the button a right alignment, but you can revert it back to a toolbar with a spacer if you'd like.

    This works: http://www.senchafiddle.com/#YCUdK

    Code below:
    Code:
    var button = Ext.create('Ext.Button', {
        text: 'Button',
        id: 'rightButton',
        handler: function(){
            var popup = Ext.Viewport.add(Ext.create('Ext.Panel', {
                centered: true,
                modal: true,
                showAnimation: {
                    type: 'fadeIn',
                    duration: 250
                },
                hideAnimation: {
                    type: 'fadeOut',
                    duration: 250
                },
                width: 300,
                height: 400,
                styleHtmlContent: true,
                html: 'Hello! I\'m a PopUp',
                items: [{
                    xtype: 'titlebar',
                    docked: 'top',
                    title: 'PopUp',
                    items: [{
                        text: 'Close',
                        align: 'right',
                        handler: function(me){
                            me.up('panel').hide();
                        }
                    }]
                }]
            }));
            popup.show();
        }
    });
    
    
    Ext.create('Ext.Container', {
        fullscreen: true,
        items: [
            {
                docked: 'top',
                xtype: 'titlebar',
                items: [
                    button
                ]
            }
        ]
     });

  3. #2
    Sencha User
    Join Date
    Apr 2012
    Location
    Toronto, Canada
    Posts
    92
    Vote Rating
    12
    Answers
    20
    iSmartDevice is on a distinguished road

      1  

    Default


    Please see below in bold text.
    Code:
    var popup = new Ext.Panel({
                modal: true,
                floating: true,
                centered: true,
                width: 300,
                height: 200,
                styleHtmlContent: true, 
                padding: 0,
                fullscreen:true,
    
                items: [
                   {
                        xtype: 'titlebar',
                        title: 'PopUp',
                        items: [
                           {
                                 xtype:'button',
                                 align:'right',
                                 text: 'Close',
                                 handler: function(){
                                       popup.hide();
                                }
                          }
                       ]
                  },
                  {
                      html: 'Hello! I\'m a PopUp',
                   }
              ]
    });
            popup.show();

  4. #3
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Vote Rating
    99
    Answers
    132
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    Quote Originally Posted by iSmartDevice View Post
    Please see below in bold text.
    Code:
    var popup = new Ext.Panel({
                modal: true,
                floating: true,
                centered: true,
                width: 300,
                height: 200,
                styleHtmlContent: true, 
                padding: 0,
                fullscreen:true,
    
                items: [
                   {
                        xtype: 'titlebar',
                        title: 'PopUp',
                        items: [
                           {
                                 xtype:'button',
                                 align:'right',
                                 text: 'Close',
                                 handler: function(){
                                       popup.hide();
                                }
                          }
                       ]
                  },
                  {
                      html: 'Hello! I\'m a PopUp',
                   }
              ]
    });
            popup.show();
    That won't work either. Panel's do not have a 'floating' config anymore as using the 'centered' config handles that in ST2. And you don't have to put the html into another panel when you can simply use the parent panel to do so.

    Also, you should not use the 'fullscreen: true' in a panel like this.

    @Maldus:

    You are using outdated code. Notice the 'dockedItems' config. That is deprecated as of ST2 and it is now controlled using the 'items' config with the objects using a 'docked' config. I have also switched you toolbar to be a titlebar and gave the button a right alignment, but you can revert it back to a toolbar with a spacer if you'd like.

    This works: http://www.senchafiddle.com/#YCUdK

    Code below:
    Code:
    var button = Ext.create('Ext.Button', {
        text: 'Button',
        id: 'rightButton',
        handler: function(){
            var popup = Ext.Viewport.add(Ext.create('Ext.Panel', {
                centered: true,
                modal: true,
                showAnimation: {
                    type: 'fadeIn',
                    duration: 250
                },
                hideAnimation: {
                    type: 'fadeOut',
                    duration: 250
                },
                width: 300,
                height: 400,
                styleHtmlContent: true,
                html: 'Hello! I\'m a PopUp',
                items: [{
                    xtype: 'titlebar',
                    docked: 'top',
                    title: 'PopUp',
                    items: [{
                        text: 'Close',
                        align: 'right',
                        handler: function(me){
                            me.up('panel').hide();
                        }
                    }]
                }]
            }));
            popup.show();
        }
    });
    
    
    Ext.create('Ext.Container', {
        fullscreen: true,
        items: [
            {
                docked: 'top',
                xtype: 'titlebar',
                items: [
                    button
                ]
            }
        ]
     });

  5. #4
    Sencha User
    Join Date
    Apr 2012
    Location
    Toronto, Canada
    Posts
    92
    Vote Rating
    12
    Answers
    20
    iSmartDevice is on a distinguished road

      0  

    Default


    @jerome76
    I tested out my code that works fine for me on the sencha docs website. But I like your code.

    Thanks for your comments!

  6. #5
    Sencha User
    Join Date
    Jun 2012
    Posts
    4
    Vote Rating
    0
    Maldus is on a distinguished road

      0  

    Default


    Thanks to both of you !

Thread Participants: 2