如何将 ExtJS 组件扩展为全屏并稍后恢复？

Question

如何扩展 ExtJS（版本 3.3.1）组件，例如一个 Ext.Panel 嵌套在文档层次结构的某个地方以“全屏”，这样它就占据了整个浏览器窗口区域？我想我需要动态创建一个 Ext.Viewport 并重新定义正在“扩展”的组件，但到目前为止我还没有成功。有人可以提供工作样本吗？

另外，如果可能的话，我希望以后能够将组件恢复到原来的位置。

我尝试了以下方法：

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

这不是很好。单击按钮后，面板panelToBeExpanded 似乎占据了视口区域，但前提是 BODY 部分中没有 HTML，否则视口没有完全展开。此外，之后使用重新设置的面板会导致大多数浏览器出现奇怪的闪烁。

是否有一种可靠的方法可以将组件普遍（最好是暂时）扩展到整个浏览器窗口？

更新

感谢 cmets 中的建议，创建一个新的最大化 Ext.Window 似乎是一个不错的解决方案。第二部分有点棘手 - 如何在 DOM（和 ExtJS 组件层次结构）中将重新设置的组件移回其原始位置，一旦窗口关闭？

感谢您的帮助！

Answer 1

您可以使用Ext.Window.toggleMaximize 方法。我创建了一个简单的工作示例，请查看here

注意Ext.Window在它的渲染容器内是最大化的，所以如果你使用“renderTo”属性并将它设置为页面内的某个div，Window只会和包含它的div一样大。这就是我使用文档正文来呈现 myWindow 的原因。当然你也可以使用Ext.Window.x 和Ext.Window.y 配置属性来定位你想要的窗口。

Answer 2

这有点晚了，但现在才偶然发现并记得我必须做类似的事情并最终覆盖了文本区域组件，该组件会在双击时自动扩展为全屏，方法是在全尺寸窗口。关闭时，值会在隐藏在全屏窗口后面的实例化组件中自动更新，因此一开始就不会从 dom 中取出。

这是我的代码，我认为它是不言自明的。

希望它对某人有所帮助！

罗伯。

/**
 * 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());
    }

});