How to open a Panel on Button click - extjs

Question

I want to open a panel window under the button i click which is located in the header. The panel should be displayed under the button (aligned with the header) : i try :
{
xtype:'button',
height: '100%',
text: Strings.Notifications,
glyph: 'xf142#FontAwesome',
reference: 'settingsNotificationsButton',
cls :'headerButtonsCls',
listeners: {
click: function () {
new Ext.form.Panel({
width: 200,
height: 200,
title: 'Foo',
floating: true,
closable: false
}).show();
}
}
}
But the above code displays the panel in middle of the screen as a modal which i don't want (as i said i want it right under the header)
So how to achieve that ?
Thanks .

Answer 1

I took Muzaffers answer as base and added the feature to use the event coordinates here:
var windowPanel = Ext.create('Ext.Panel', {
bodyStyle: 'background: #ffff00;',
border: true,
height: 200,
width: 200,
floating:true
});
Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
items: [{
xtype: 'button',
text: 'Show/Hide Panel',
handler: function (btn, event) {
windowPanel.showAt(event.getXY())
}
}
]
});
Here is the fiddle: https://fiddle.sencha.com/#fiddle/3a8j&view/editor

Answer 2

Is that useful for you?
var windowPanel = Ext.create('Ext.Panel', {
bodyStyle: 'background: #ffff00;',
border: true,
height: 200,
width: 200,
hidden: true
});
Ext.create('Ext.Container', {
renderTo: Ext.getBody(),
items: [{
xtype: 'button',
text: 'Show/Hide Panel',
handler: function () {
if (windowPanel.isHidden()) {
windowPanel.show();
} else {
windowPanel.hide();
}
}
},
windowPanel
]
});
https://fiddle.sencha.com/#fiddle/3a8c