Pop Up Problem

[Maldus]

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 :

 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

[iSmartDevice]

Please see below in bold text.

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

[jerome76]

Please see below in bold text.

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:

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
            ]
        }
    ]
 });

[iSmartDevice]

@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!

[Maldus]

Thanks to both of you !