Question

how can I expand an ExtJS (version 3.3.1) Component, e.g. a Ext.Panel nested somewhere in the document hierarchy to “fullscreen” so that it takes up the whole browser window region? I guess I need to create an Ext.Viewport dynamically and reparent the component being “expanded”, but I’ve had no success so far. Could someone provide a working sample?

Also, I’d like to be able to restore the component to its original place at some point later, if that’s at all possible.

I tried the following:

new Ext.Button({ text: 'Fullscreen', renderTo : Ext.getBody(), onClick: function(){
    var viewPort = new Ext.Viewport({
        renderTo: Ext.getBody(),
        layout: "fit",
        items: [ panelToBeExpanded ]
        });
    viewPort.doLayout();
}});

which does not work very well. Upon clicking the button, the panel panelToBeExpanded seems to take up the viewport region, but only if there is no HTML in the BODY section, otherwise viewport is not fully expanded. Also, working with the reparented panel afterwards causes weird flicker in most browsers.

Is there a reliable way to universally (ideally temporarily) expand a component to the whole browser window?

UPDATE

Thanks to a suggestion in the comments, creating a new maximized Ext.Window seems to be a good solution. The second part is a bit tricky though – how to move the reparented component back to its original place in DOM (and ExtJS component hierarchy) once the window is closed?

Thanks for your help!

Answer 1

You could use Ext.Window.toggleMaximize method. I created a simple working example, check it out here

Pay attention that Ext.Window is maximized inside its rendering container, so if you use “renderTo” attribute and set it to some div inside your page Window will only be as big as div that contains it. That is why I used document body to render myWindow. Of course you could also use Ext.Window.x and Ext.Window.y configuration attributes to locate your window in wanted place.