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，否则视口未完全展开。此外，之后使用重新配置的面板会在大多数浏览器中产生奇怪的闪烁。

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

更新

感谢评论中的建议，创建一个新的最大化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());
    }

});

如何将ExtJS组件扩展为全屏并稍后将其还原？

2 个答案: