Question

I’m trying to make an ExtJS modal window, but it looks like it only covers an element with id wrapper if one exists. I’m using liferay, and I want the modal dialog to consume the entire screen, so I’d rather not modify the DOM to do this.

Is there any way to get this to fill the whole screen, instead of just div.portlet-body?

var dialog;
function openDialog() {
    if (!dialog) {
        var dialogWidth = 800;
        var dialogHeight = 400;
        console.log(windowWidth + " " + windowHeight);
        dialog = new Ext.Window({
            applyTo: 'popup',
            closeAction:'hide',
            plain: true,
            buttons: [
                {
                    text: 'Done',
                    handler: function() {
                        dialog.hide();
                    }
                }
            ],
            items:new Ext.Panel({
                applyTo:'popup-panel'
            }),
            title: 'Some popup',
            layout: 'fit',
            resizable: false,
            draggable: false,
            width: dialogWidth,
            height: dialogHeight,
            modal: true
        });
    }
    dialog.show(this);
}

Answer 1

applyTo: 'popup'

You don’t need this at all. applyTo constraints the modal dialog to the parent of the object you reference here.