如何渲染隐藏的窗口?

时间:2016-03-31 10:38:11

标签: extjs extjs4.2

我有一个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
                        }
                    }]

                }]
            });

1 个答案:

答案 0 :(得分:0)

Windows和菜单通常会呈现给文档正文。我能够使用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'
});