ExtJs 3 portal with iframe

Question

I have an ExtJs portal/portlet component on my page, the contents of which is an iframe. When the portlet is dragged between portal positions (rearranged), some browsers reload the iframe (FF, Safari), and some don't (IE). Is there a way to prevent the reload from happening across all browsers?

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

In Portal.js (v.3.3.0) there is this line of code which I am guessing is causing the iframe to reload:

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

Answer 1

It looks like, changing parent of iframe causes reload. So my idea is to attach iframe to some other parent, and position it over the portlet. Below is example portlet code.

{
    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

Are you running a border layout? I had a similar issue on Ext 4 but I was able to solve via:

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