ExtJS modal window only covers contents of .portlet-body

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 开发者_C百科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);
}

---

applyTo: 'popup'

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

---

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.