PDA

View Full Version : Ext.ux.ManagedIFrame is not a constructor



mrz1818
29 Nov 2009, 8:54 AM
My goal: to actually have a working version of a window with tabs and an iframe in the tab.

I want a window that can move around and have multiple tabs with iframes.

I have tried for a long time - but can't get past this error:

Ext.ux.ManagedIFrame is not a constructor
/test-ext.php
Line 57

I still have not successfully got ManageIframe 2.0 to actually work.

Can someone show me my issue please?

test-ext.php code:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="inc/JS/EXT/resources/css/ext-all.css">
<script type="text/javascript" src="inc/JS/EXT/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="inc/JS/EXT/ext-all.js"></script>
<script type="text/javascript" src="inc/JS/EXT/miframe-debug.js"></script>
<title id="page-title">Testing EXT</title>
<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
p {
margin:5px;
}
.settings {
background-image:url(../shared/icons/fam/folder_wrench.png);
}
.nav {
background-image:url(../shared/icons/fam/folder_go.png);
}
</style>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../images/blank.gif';
Ext.onReady(function(){
var win;
var button = Ext.get('show-btn');
//var MIF = new Ext.ux.ManagedIFrame({ autoCreate:{src:'http://www.extjs.com',height:350,width:'100%'} ,loadMask :false });
//var loginFrame = Ext.getBody().createChild( { tag: 'iframe', cls:'x-hidden', id:'newiframe'} );

button.on('click', function(){
// create the window on the first click and reuse on subsequent clicks
if(!win){
win = new Ext.Window({
applyTo:'hello-win',
layout:'fit',
width:500,
height:300,
closeAction:'hide',
plain: true,


items: new Ext.TabPanel({
applyTo: 'hello-tabs',
//autoTabs:true,
activeTab:0,
deferredRender:false,
border:false,
items:[{
title: 'Bogus Tab',
id: 'Bogus',
body:new Ext.ux.ManagedIFrame({autoCreate:{ src:'http://www.yahoo.com/', frameBorder: 0, cls:'x-panel-body ',width: '100%', height: '100%'}})

},{
title: 'Another Tab',
autoLoad: {url: 'test-ext2.php', params: 'foo=bar&wtf=1'}
},{
title: 'Closable Tab',
html: "blah blah",
closable:true
}]

}),

buttons: [{
text:'Submit',
disabled:true
},{
text: 'Close',
handler: function(){
win.hide();
}
}]
});
}
win.show(this);
});
});
</script>
</head>
<body>
<h1>Hello World Window</h1>
<p>This example shows how to create a very simple modal Window with "autoTabs" from existing markup.</p>
<input type="button" id="show-btn" value="Hello World" /><br /><br />
<p>Note that the js is not minified so it is readable. See <a href="hello.js">hello.js</a> for the full source code.</p>

<div id="hello-win" class="x-hidden">

<div class="x-window-header">Hello Dialog</div>
<div id="hello-tabs">

</div>
</div>

</body>
</html>

hendricd
29 Nov 2009, 10:09 AM
@mrz1818 -- Since your dealing with Ext.Layouts, use the xtype:'iframepanel' (acts like a real Ext.Panel, but with an MIF.Element rendered inside for you) instead:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="inc/JS/EXT/resources/css/ext-all.css">
<script type="text/javascript" src="inc/JS/EXT/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="inc/JS/EXT/ext-all.js"></script>
<script type="text/javascript" src="inc/JS/EXT/miframe-debug.js"></script>
<title id="page-title">Testing EXT</title>
<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
p {
margin:5px;
}
.settings {
background-image:url(../shared/icons/fam/folder_wrench.png);
}
.nav {
background-image:url(../shared/icons/fam/folder_go.png);
}
</style>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../images/blank.gif';
Ext.onReady(function(){
var win;
var button = Ext.get('show-btn');

button.on('click', function(){
// create the window on the first click and reuse on subsequent clicks
if(!win){
win = new Ext.Window({
applyTo:'hello-win',
layout:'fit',
width:500,
height:300,
closeAction:'hide',
plain: true,


items: new Ext.TabPanel({
applyTo: 'hello-tabs',
//autoTabs:true,
activeTab:0,
deferredRender:false,
border:false,
items:[{
xtype : 'iframepanel',
title: 'Yahoo',
id: 'Bogus',
defaultSrc : 'http://www.yahoo.com'
},{
title: 'Another Tab',
autoLoad: {url: 'test-ext2.php', params: 'foo=bar&wtf=1'}
},{
title: 'Closable Tab',
html: "blah blah",
closable:true
}]

}),

buttons: [{
text:'Submit',
disabled:true
},{
text: 'Close',
handler: function(){
win.hide();
}
}]
});
}
win.show(this);
});
});
</script>
</head>
<body>
<h1>Hello World Window</h1>
<p>This example shows how to create a very simple modal Window with "autoTabs" from existing markup.</p>
<input type="button" id="show-btn" value="Hello World" /><br /><br />
<p>Note that the js is not minified so it is readable. See <a href="hello.js">hello.js</a> for the full source code.</p>

<div id="hello-win" class="x-hidden">

<div class="x-window-header">Hello Dialog</div>
<div id="hello-tabs">

</div>
</div>

</body>
</html>Also, Review the "Westside Story" demo (http://demos.theactivegroup.com/demodesk.html?demo=mif&script=treenav) source tabs. It'll give some further examples of using MIF's in tabPanels and tree menus.