Sencha Touch 2 - Position a floating panel next to source button - sencha-touch-2

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