如何渲染隐藏的窗口？答案

【问题标题】：How to render a hidden window?如何渲染隐藏的窗口？
【发布时间】：2016-07-19 18:21:12
【问题描述】：

我有一个 iframe（适合窗口）在显示之前加载。当我这样做时：

window.show();
window.hide();

窗口没有隐藏。 “window.show()”用于渲染 iframe。 iframe 的加载大约需要 10 秒。如何在不显示窗口的情况下渲染 iframe？

我的窗口：

var win = Ext.create('Ext.window.Window', {
                height: '95%',
                width: '95%',
                modal: true,
                header: false,
                hideMode:'visibility',
                constrain: true,
                resizable:false,
                itemId:'winIframeItemId....',
                id:'winIframeId....',
                baseCls: 'x-window-....',
                layout: {
                    type: 'vbox',
                    align: 'stretch',
                    pack: 'start'
                },
                items: [{
                    xtype: 'container',
                    layout: {
                        type: 'hbox',
                        align: 'middle',
                        pack: 'end'
                    },
                    items: [{
                        xtype: 'button',
                        cls: 'x-button-close-window...',
                        height: 34,
                        width: 34
                        ...
                    }]
                }, {
                    xtype: 'container',
                    itemId:'conIframeWindow',
                    layout:"fit",
                    flex: 1,
                    items: [{
                        xtype: 'component',
                        autoScroll: true,
                        itemId:'IframeTest',
                        baseCls: 'x-component-w....',
                        autoEl: {
                            tag: "iframe",
                            domain: '....',
                            frameborder: 0,
                            src: url
                        }
                    }]

                }]
            });

【问题讨论】：

你在使用任何 xtype 吗？
嗨 aviram83，我粘贴我的代码
我的两分钱，为什么你不能在 iframe 加载时显示加载掩码，而在 iframe 加载完成时隐藏掩码？您可以在 iframe 上监听 load 事件，以便在 iframe 加载完成时收到通知。
你试过hidden属性吗？
应用程序必须预先加载隐藏到窗口中，因为当用户需要使用窗口时，应用程序已经加载。对用户来说更流畅、更安静。

标签： extjs extjs4.2

【解决方案1】：

窗口和菜单通常呈现给文档正文。我能够使用 Ext.Component.renderTo 配置来渲染窗口和菜单而不显示它们。

https://fiddle.sencha.com/#view/editor&fiddle/2f5h

// Render a hidden window.
var window = Ext.create('Ext.window.Window', {
    renderTo: Ext.getBody(),
    title: 'Window'
});
// Render a hidden menu.
var menu = Ext.create('Ext.button.Button', {
    menu: {
        items: [{
            text: 'Item'
        }],
        renderTo: Ext.getBody()
    },
    text: 'Button'
});

【讨论】：

如果我们想将隐藏的组件渲染到其他一些组件而不是 Ext.getBody() 怎么办？
@SujilMaharjan 查看 Ext.Component.renderTo 的文档。它支持渲染到任何 HTMLElement。确保您考虑到显示和位置规则将如何影响组件的呈现位置。 docs.sencha.com/extjs/6.5.0/classic/…