Problem with ManagedIframePanel

[tngoldmant]

Hi All,
I am having an issue with getting ManagedIframePanel to show up in my panel.

My goal here is to have boarder pain that consist of a grid of contents that contains a list ofurls (center) and a html preview pane (south).



show_topic_dlg = new Ext.Panel({
title: 'Topic Contents',
layout:'border',
items: [
{
title: 'Content List',
region:'center',
margins: '5 5 0 0',
items:[{
xtype:'grid',
title:"Content List"
}]
},{
title: 'Content View',
region: 'south',
height: 100,
width: 200,
margins: '0 5 5 5',
collapsible:true,
items:[{
xtype:'panel',
collapsible:true,
width:400,
height: 400,
autoScroll:false,
baseCls:'x-panel',
body: new Ext.ux.ManagedIframePanel ( {autoCreate:{id:'htmlPreviewPane', src:'http://www.google.com', frameBorder: 0, cls:'x-panel-body',width: '100%', height: '100%'}
,listeners:{documentloaded:function(){}
}}),
frame:true,
animCollapse:false, //cannot animate a collapse/expand on an Iframe !
html: "Some text"

}]
}]
});



Here is the button code for when the user wants to see this dialog:


new Ext.Button({text: "Show", handler : function(btn, e) {
if(!contentTopicWin){
contentTopicWin = new Ext.Window({
el:'show_content_list',
layout:'fit',
width:'100',
height:'200',
closeAction:'hide',
plain: true,
items: show_topic_dlg
});
}
contentTopicWin.show(this);
}}).render(document.body, contentid);


And last but not least is the html code in the html page


....
....
<div id="show_content_list" class="x-hidden">
<iframe id="htmlPreviewPane" class="x-hidden"></iframe>
</div>
.....
.....


Attached is a screen shot of the dialog that gets displayed.

So my question is what is the error that I have is causing the ManagedIframePanel not to be displayed.

Thanks for all assistance provided.
BR,
Zone_Man

[hendricd]

@tngoldmant -- you have a lot of extraneous panel embedding going on here. ;) ManagedIframePanel IS a panel, so just use it as such:



new Ext.Button({text: "Show",
handler : function(btn, e) {
if(!contentTopicWin){
contentTopicWin = new Ext.Window({
// el:'show_content_list', //not needed either
title: 'Content',
layout:'border',
width:'300',
height:'500',
closeAction:'hide',
plain: true,
defaults:{margins: '5 5 5 5'}, //tweak
items: [
{title: 'Content List',
region:'center',
id: 'contentgrid',
xtype:'grid'
},{
title: 'Content View',
region: 'south',
collapsible: true,
id : 'preview',
xtype: 'iframepanel',
defaultSrc: 'http://www.google.com',
listeners: {documentloaded:function(){}},
frame : true
}]

});
}
Ext.getCmp('preview').setSrc(someUrl); //change the iframe.src as/when needed
contentTopicWin.show(this);
}}).render(document.body, contentid);It's not really clear what you intend to do with this:?
...
....
<div id="show_content_list" class="x-hidden">
<iframe id="htmlPreviewPane" class="x-hidden"></iframe> not needed
</div>
.....
.....

[tngoldmant]

Thank you Mr. Hendricks for helping me out, I am still learning my way around Ext. Your advice did the trick. All the best,
Zone_Man