loading an iframe dynamically.

0
votes

Im trying to load an iframe onto a container dynamically. there are two buttons a and b, on clicking each of them a different url should load onto the iframe.

I have tried- 1.using two different containers instead of one as shown below..during which browser crashes. 2. i was not able to switch the content inside the container by using dom.clear. 3. should i consider using a different xtype?. since container positions the iframe right on the spot where i wanted it to.

Ext.define('xxxxxx', { extend: 'yyyyy', width: '100%', height: 125, renderTo: Ext.getBody(), items: [{ xtype: 'radiogroup', columns: 2, width: 400, horizontal: true, name:'canvas', items: [
{ boxLabel: 'a', id: 'i1', inputValue: 'i1', handler: function () {

                            var iframe = new Ext.ux.IFrame({
                                src: 'https://www.sencha.com',
                                title: 'Hello',
                                width: "100%",
                                height: 1400,
                                renderTo: 'canvas'
                            });

                        }
                    },
                    {
                        boxLabel: 'b',
                        id: 'i2',
                        inputValue: 'i2',
                        handler: function () {
                        var iframe = new Ext.ux.IFrame({
    src: 'https://www.sencha.com/web-application-lifecycle-management-sencha-platform/',
                                width: "100%",
                                height: 1400,
                                renderTo: 'canvas'
                            });                                
                        }
                    }
            ]
},
{
    xtype: 'container',
    name: 'somename',
    id: 'canvas',       
}]

});

1
iframeextjs5

1 Answers

0
votes

I had to destroy each of the iframe objects that were created. This could dynamically load iframe source as long as it wanted.

handler: function () {

 if (iframe != undefined) 
   {
       iframe.destroy();
    }
var iframe = new Ext.ux.IFrame({                   

         src: 'https://www.sencha.com/web-application-lifecycle-management-sencha-platform/',
         width: "100%",
         height: 1400,
         renderTo: 'canvas'

    });                                
}