View Full Version : can an 'x' or click-to-close icon be added to an overlay modal?

10 Oct 2011, 2:31 PM
Hi all, when following the example code for 'overlay' I notice that the overlay (as set to modal) pops up just fine and looks great, and I can configure the inside HTML as well as the titling of said modal.

What I'd like to do is put an icon that dismisses the modal window when clicked and would like this icon to appear flush right following on the title of the modal overlay.

Please consider the following code:

var overlay = new Ext.Panel({

floating : true,
modal : true,
centered : false,
width : Ext.is.Phone ? '95%' : '90%',
height : Ext.is.Phone ? 220 : '60%',
styleHtmlContent : true,
dockedItems : overlayTb,
scroll : 'vertical',
contentEl : 'lipsum',
cls : 'htmlcontent'
var showCenteredOverlay = function(btn, event) {
overlayTb.setTitle('Centered Overlay Test');

The title of the overlay box is "Centered Overlay Test", and I find that if I click anywhere outside the overlay, then the overlay goes away. I'd actually like to leave it focused/active until a user clicks (let's say an 'X') icon to the far right of the overlay title bar in order to dismiss the overlay.

I've checked through the API documentation and I'm not sure if it's a newb thing or if what I'd like to accomplish is not easily done. Any advice would be great. Thanks.

11 Oct 2011, 7:20 AM
will the tools config work for you?

25 Sep 2013, 5:03 AM
Why are you using a Panel and not a Window? Ext.Window already has a close button.