How to extend ExtJS component for full-screen viewing and restore it later?

Question

how can I extend the ExtJS component (version 3.3.1), for example. Is Ext.Panel embedded somewhere in the document hierarchy in "full screen mode" so that it occupies the entire area of ​​the browser window? I think I need to dynamically create Ext.Viewport and re-add a component that is "expanding", but so far I have not had success. Can someone provide a working sample?

In addition, I would like to be able to restore the component to its original location at some point later, if 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. After clicking the button, the panelToBeExpanded panel seems to occupy the viewing area, but only if there is no HTML in the BODY section, otherwise the viewing window will not be fully expanded. In addition, working with the reconfigured panel subsequently causes a strange flicker in most browsers.

Is there a reliable way to universally (preferably temporarily) deploy a component to the entire browser window?

UPDATE

Thanks to the suggestion in the comments, creating a new maximized Ext.Window is a good solution . The second part is a bit complicated, but - how to move the repair component back to its original location in the DOM (and the ExtJS component hierarchy) after closing the window?

Thank you for your help!

Answer 1

You can use the Ext.Window.toggleMaximize method. I created a simple working example, check here

Note that Ext.Window is maximized inside its container for rendering, so if you use the "renderTo" attribute and set it to some div inside your page, the window will be sized like the div that contains it. This is why I used the body of the document to render myWindow. Of course, you can also use Ext.Window.x and Ext.Window. y to find your window in the right place.

Answer 2

It's a bit late, but I stumbled upon it just now and remembered that I needed to do something similar and eventually redefine the component of the text area, which automatically expands to full-screen mode with a double click, creating a copy of the component in a full-sized window. When closing, values ​​are automatically updated in the instance component, which was hidden behind a full-screen window and, therefore, was never displayed from dom in the first place.

Here is my code, I think it is pretty clear.

Hope this 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()); } });