ExtJS modal window only covers contents of .portlet-body

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.

Answer 2

You are having some issues with CSS. The modal window created by Ext JS is not bound to any particular CSS element. So, I am sure one of the CSS existing on the page is interfering with Ext JS and the modal window is not displayed correctly.