Question

I have this code which creates a floating panel centered to the screen:

Ext.define('myapp.view.ButtonNav', {
extend: 'Ext.Container',
xtype: 'myapp_buttonnav',
config: {
    fullscreen: false,
    layout: 'hbox',
    items: [
        {
            xtype: 'button',
            text: 'Button 1',
            listeners: {
                tap: function () {
                    var panel = Ext.Viewport.add({
                        xtype: 'panel',
                        defaultType: 'button',
                        baseCls: 'btn1_cont',
                        centered: true,
                        layout: {
                            type: 'vbox',
                            align: 'center',
                            pack: 'center'
                        },
                        items: [
                            {
                                baseCls: 'btn1',
                                text: 'HOME PAGE',
                                handler: function() {
                                    Ext.Viewport.setActiveItem({
                                        xtype: 'myapp_homepage'
                                    });
                                    panel.destroy();
                                }
                            }
                        ],
                        top: // SET TOP TO SOURCE BUTTON
                        left: // SET LEFT TO SOURCE BUTTON
                    });
                }
            }
        },

    ]        
}
});

As you can see, it is a container, with a button which when clicked shows a floating panel.
How do i position the floating panel centered to the button that triggered the floating panel?

Answer 1

If I understand correctly, you need to use the showBy function like so :

myPanel.showBy(myButton);

It will show the panel next to the button and you can choose the alignment as well.

You can take a look at the documentation

How to get the button

If you take a look at the tap listener signature : http://docs.sencha.com/touch/2-0/#!/api/Ext.Button-event-tap

You can see that the first parameter is the button itself so :

listeners: {
  tap: function (myButton, myEvent) {
    ... // create your panel
    myPanel.showBy(myButton);
  }
} 

Hope this helps