带有iframe的ExtJs 3门户​​网站

Question

我的页面上有一个ExtJs门户/ portlet组件，其内容是iframe。当在门户位置（重新排列）之间拖动portlet时，某些浏览器会重新加载iframe（FF，Safari），而某些浏览器则不会重新加载（IE）。有没有办法阻止所有浏览器重新加载？

new Ext.ux.Portlet( {
title : 'test',
id : 'test',
itemId : 'testId',
html : '<iframe src=testPage.html></iframe>' // testPage.html is reloaded when drop finishes
});

在Portal.js（v.3.3.0）中，我猜这段代码导致iframe重新加载：

 panel.el.dom.parentNode.removeChild(dd.panel.el.dom);

Answer 1

看起来，更改iframe的父级会导致重新加载。所以我的想法是将iframe附加到其他父级，并将其放在portlet上。下面是示例portlet代码。

{
    title: 'Another Panel 2',
    tools: tools,
    html: '<div class="frame-bind" style="min-height: 200px;">&nbsp;</div>',
    listeners: {
        afterrender: function(sender) {
            this.portal = this.findParentByType('portal');

            var container = this.portal.body;
            var html = '<iframe src="http://www.onet.pl" style="position: absolute; border: none;"></iframe>';
            this.iframe = Ext.DomHelper.append(container, html, true);

            this.portal.on('beforedragover', this.beforedragoverHandler, this);
            this.portal.on('drop', this.dropHandler, this);
        },
        destroy: function() {
            if (this.iframe !== undefined) {
                this.iframe.remove();
            }
            this.portal.un('beforedragover', this.beforedragoverHandler, this);
            this.portal.un('drop', this.dropHandler, this);
            delete this.portal;
        },
        afterlayout: function(sender, layout) {
            this.positionIframe.defer(1, this);
        }
    },
    beforedragoverHandler: function(sender) {
        if (this !== sender) { return; }
        this.iframe.setStyle('visibility', 'hidden');
    },
    dropHandler: function(sender) {
        if (this !== sender) { return; }
        this.positionIframe();
        this.iframe.setStyle('visibility', 'visible');
    },                  
    positionIframe: function() {
        this.iframe.setLocation(this.body.getLeft(), this.body.getTop());
        this.iframe.setWidth(this.body.getWidth());
        this.iframe.setHeight(this.body.getHeight());
    }
}

Answer 2

你在运行边框布局吗？我在Ext 4上遇到了类似的问题，但我能够通过以下方式解决：

Ext.override(Ext.layout.container.Border, {
isValidParent: function() {
    return true;
}
});