PDA

View Full Version : Fullscreen Overlay Panel and Message box conflict



elwhiz
7 Nov 2011, 5:20 AM
Hi,

I have an app that uses a Fullscreen Overlay Panel and on that panel have buttons that I need to show message boxes.

The problem is that when a message box is shown like an alert, and when I click on the message box's body or the Ok button, it will not hide the message box BUT INSTEAD it will hide the Fullscreen Overlay Panel. You will also notice that the message box mask is under that Fullscreen Overlay Panel.

Again, the bugs in detail are:

1. When a message box is shown over a Fullscreen Overlay Panel, the listeners on top are still the Fullscreen Overlay Panel.
2. Tapping body or the Ok button of the message box will hide the Fullscreen Overlay Panel below.
3. Listeners for the message box are active after the Fullscreen Overlay Panel is hidden.
4. Mask for message box is under the Fullscreen Overlay Panel.

I hope there's a fix or a work around for this.

You can try the code below and see the problem.

Thanks.




Ext.setup({
onReady: function() {

var overlayTb = new Ext.Toolbar({
dock: 'top',
items: [
{
text: 'showAlert',
handler: function () {
Ext.Msg.alert('Alert', 'On tapping Ok or this message box body, it will hide the Fullscreen Overlay Panel and the mask is behind that panel.');
}
},
{
text: 'close',
handler: function () {
overlay.hide();
}
}
]
});

var overlay = new Ext.Panel({
dockedItems: overlayTb,
floating: true,
fullscreen: true,
style: 'background-color: red',
html: 'Overlay Panel <br /> <br /> Tap on the button showAlert.'
});

var dockedItems = [
{
dock: 'top',
xtype: 'toolbar',
items: [
{
text: 'showOverlay',
handler: function () {
overlay.show('pop');
}
}
]
}
];

new Ext.Panel({
fullscreen: true,
dockedItems: dockedItems,
style: 'background-color: #BAE4FF',
html: "Main Panel <br /> <br /> Tap on the button showOverlay."
});
}
});

mitchellsimoens
7 Nov 2011, 8:12 AM
You should try to only have one floating component open at one time. This issue is the same as if you have a floating panel with a select field and you try to select it using the floating list.