http://www.extjs.com/forum/showthread.php?18144-iframe-in-a-tab-panal&highlight=IFrameComponent
Jack has this solution
Code:
Ext.ux.IFrameComponent = Ext.extend(Ext.BoxComponent, { onRender : function(ct, position){ this.el = ct.createChild({tag: 'iframe', id: 'iframe-'+ this.id, frameBorder: 0, src: this.url}); } });
then:
Code:
var tab = new Ext.Panel({ id: id, title: title, closable:true, // layout to fit child component layout:'fit', // add iframe as the child component items: [ new Ext.ux.IFrameComponent({ id: id, url: uri }) ] }); this.add(tab);
I need to make this work for my tabs, but the way I have my layout, i am not sure how to put in the code.
Code:
Ext.onReady(function(){ Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); var viewport = new Ext.Viewport({ layout:"border", items:[ new Ext.BoxComponent({ // raw region:'north', el: 'north', height:106 }), { region:"center", title:"User Portal", items:[{ xtype:"tabpanel", activeTab:0, items:[{ xtype:"panel", title:"Personal Assistant", contentEl: 'panel1' },{ xtype:"panel", title:"Fowarding", contentEl: 'panel2' },{ xtype:"panel", title:"OutLook", contentEl: 'panel3' },{ xtype:"panel", title:"Corporate Directory", contentEl: 'panel4' },{ xtype:"panel", title:"Administration", contentEl: 'panel5' },{ xtype:"panel", title:"Downloads", contentEl: 'panel6' },{ xtype:"panel", title:"Training", contentEl: 'panel7' }] }] }, { region:"south", title:'Copyright 2005-2007 company, Inc.' }] }); });
Any help would be great.