How to expand an ExtJS Component to fullscreen and restore it back later?

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!

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.

This is a little late but stumbled upon this only now and remembered I had to do something similar and ended up overriding the text-area component which would automatically expand to full-screen on doubleclick by creating a copy of the component in a full-size window. On closing the values are automatically updated in the instantiating component which was hidden behind the full-screen window and hence never was taken out of the dom in the first place.

Here's my code I think it's fairly self-explanatory.

Hope it helps someone!

Rob.

/**
 * Override for default Ext.form.TextArea.  Growing to near full-screen/full-window on double-click.
 * 
 * @author Rob Schmuecker (Ext forum name rob1308)
 * @date September 13, 2010
 * 
 * Makes all text areas enlargable by default on double-click - to prevent this behaviour set "popout:false" in the config
 * By default the fieldLabel of the enhanced field is the fieldLabel of the popout - this can be set separately with "popoutLabel:'some string'"  this will also inherit the same labelSeparator config value as that of the enhanced parent.
 * The close text for the button defaults to "Close" but can be overriden by setting the "popoutClose:'some other text'" config
 */

Ext.override(Ext.form.TextArea, {
    popout: true,
    onRender: function(ct, position) {
        if (!this.el) {
            this.defaultAutoCreate = {
                tag: "textarea",
                style: "width:100px;height:60px;",
                autocomplete: "off"
            };
        }
        Ext.form.TextArea.superclass.onRender.call(this, ct, position);
        if (this.grow) {
            this.textSizeEl = Ext.DomHelper.append(document.body, {
                tag: "pre",
                cls: "x-form-grow-sizer"
            });
            if (this.preventScrollbars) {
                this.el.setStyle("overflow", "hidden");
            }
            this.el.setHeight(this.growMin);
        }
        if (this.popout && !this.readOnly) {

            if (!this.popoutLabel) {
                this.popoutLabel = this.fieldLabel;
            }
            this.popoutClose = 'Close';
            var field = this;
            this.getEl().on('dblclick',
            function() {
                field.popoutTextArea(this.id);
            });
        };
    },
    popoutTextArea: function(elId) {
        var field = this;
        tBox = new Ext.form.TextArea({
            popout: false,
            anchor: '100% 100%',
            labelStyle: 'font-weight:bold; font-size:14px;',
            value: Ext.getCmp(elId).getValue(),
            fieldLabel: field.popoutLabel,
            labelSeparator: field.labelSeparator
        });

        viewSize = Ext.getBody().getViewSize();
        textAreaWin = new Ext.Window({
            width: viewSize.width - 50,
            height: viewSize.height - 50,
            closable: false,
            draggable: false,
            border: false,
            bodyStyle: 'background-color:#badffd;',
            //bodyBorder:false,
            modal: true,
            layout: 'form',
            // explicitly set layout manager: override the default (layout:'auto')
            labelAlign: 'top',
            items: [tBox],
            buttons: [{
                text: field.popoutClose,
                handler: function() {
                    Ext.getCmp(elId).setValue(tBox.getValue());
                    textAreaWin.hide(Ext.getCmp(elId).getEl(),
                    function(win) {
                        win.close();
                    });
                }
            }]
        }).show(Ext.getCmp(elId).getEl());
    }

});