[3.0.x, 3.1.1] ux.ManagedIFrame 2.x

**cobnet** · 7 Dec 2009 1:44 AM

Originally Posted by TomChiverton

Your Ext version and MIF versions aren't compatable. Note that MID 2.1 requires Ext 3.1 for instance.

Interesting looks like miframe2.zip is for Ext 3.0.3???????? I have tried all versions and receive the same message from each?

any other ideas?

**Tinki** · 7 Dec 2009 5:03 AM

Cant get it, where are the posts I'm writing?

Still no luck

My parent frame looks like this:

Code:

<script type="text/javascript" src='js/ext/adapter/ext/ext-base.js'></script> 
	<script type="text/javascript" src='js/ext/ext-all.js'></script>
	<script type="text/javascript">
		try {
			Ext.BLANK_IMAGE_URL = 'js/ext/resources/images/default/s.gif'; 
		} catch (ex){}
	</script>
	<script type="text/javascript" src='js/ext/miframe.js'></script>
	<script type="text/javascript" src='js/ext/mifmsg.js'></script>
....
<script type="text/javascript"> 
Ext.onReady(function(){
var chiefTable = new Ext.Panel({
			renderTo: 'mainDiv',
			autoScroll: false,
			tbar: mainTBar,
			plugins: [new Ext.ux.plugins.FitToParent('mainDiv')],
			items: [{
				width: 250,
				height: '100%',
				items: tree
			},{
				columnWidth: 1,
				layout: 'fit',
				height: '100%',
				items: [{
					xtype: 'mif',
					id: 'centerFrame',
					name: 'centerFrame',
					frameConfig: {id: 'centerIFrame'},
					listeners: {
						message: function(){
							alert("!!!!");
						},
						domready: function(frame){ },
					   exception: function(frame, exc){
							alert(exc.message);
					   }
					},
					border: false,
					autoScroll:true,
					disableMessaging: false,
					margins: '0 0 0 0',
					defaultSrc : 'startPage.html'
				}]
			}]
		});
});
</script>

And "startPage.html"

Code:

...
<body>
<script type="text/javascript">
         sendMessage("I'm awake !","startup");
</script>
</body>

Only alert with exception "Object expected" is shown.

**Tinki** · 7 Dec 2009 5:18 AM

Still no luck

My parent frame looks like this:

Code:

<script type="text/javascript" src='js/ext/adapter/ext/ext-base.js'></script> 
	<script type="text/javascript" src='js/ext/ext-all.js'></script>
	<script type="text/javascript">
		try {
			Ext.BLANK_IMAGE_URL = 'js/ext/resources/images/default/s.gif'; 
		} catch (ex){}
	</script>
	<script type="text/javascript" src='js/ext/miframe.js'></script>
	<script type="text/javascript" src='js/ext/mifmsg.js'></script>
....
<script type="text/javascript"> 
Ext.onReady(function(){
var chiefTable = new Ext.Panel({
			renderTo: 'mainDiv',
			autoScroll: false,
			tbar: mainTBar,
			plugins: [new Ext.ux.plugins.FitToParent('mainDiv')],
			items: [{
				width: 250,
				height: '100%',
				items: tree
			},{
				columnWidth: 1,
				layout: 'fit',
				height: '100%',
				items: [{
					xtype: 'mif',
					id: 'centerFrame',
					name: 'centerFrame',
					frameConfig: {id: 'centerIFrame'},
					listeners: {
						message: function(){
							alert("!!!!");
						},
						domready: function(frame){ },
					   exception: function(frame, exc){
							alert(exc.message);
					   }
					},
					border: false,
					autoScroll:true,
					disableMessaging: false,
					margins: '0 0 0 0',
					defaultSrc : 'startPage.html'
				}]
			}]
		});
});
</script>

And "startPage.html"

Code:

...
<body>
<script type="text/javascript">
         sendMessage("I'm awake !","startup");
</script>
</body>

Only alert with exception "Object expected" is shown.

**zombeerose** · 7 Dec 2009 7:44 AM

Originally Posted by hendricd

@zombeerose --
For a test, create your MIF this way on IE8 and report back on what happens.

Code:

{
   xtype : 'iframepanel',
   resetUrl : 'javascript:void(0)',
   defaultSrc:"/someWhere/else.html"
},

I added the code you suggested but no changes - still permission denied. I added an alert before and after this line

Code:

s = this._targetURI = Ext.isEmpty(s, true)? this.resetUrl: s;

to see the value of "s." Before "s" is undefined and after, "s" is

Code:

javascript:""

This is the frame config:

Code:

            this._frame = new Ext.ux.ManagedIFrame.Panel({
                defaultSrc: this.url
                ,height: 0  //so user doesn't see the frame
                ,listeners: {
                    documentloaded:    {scope:this, fn:this.destroyFrame}
                }
                ,resetUrl : 'javascript:void(0)'
                ,scripts: false
            });

**TomChiverton** · 8 Dec 2009 1:37 AM

Originally Posted by zombeerose

I added the code you suggested but no changes - still permission denied. I added an alert before and after this line

Code:

s = this._targetURI = Ext.isEmpty(s, true)? this.resetUrl: s;

I'd be tempted to rewrite that line so it's less compact and more readable, set a break point, and see what the values of the various parts are.

**Drayton** · 9 Dec 2009 3:03 AM

I'm also having trouble in this section of the code:

When running miframepanel as tab and close the tab in Chrome and IE8 the following triggers an error:

Code:

Ext.isFunction(s) && ( s = src());
s = this._targetURI = Ext.isEmpty(s, true)? this.resetUrl: s;
win.location.href = s;

Error:
Uncaught TypeError: Cannot set property 'href' of undefined

Edit:
Occurs in Chrome 3.0.195.33, IE 8.0.6001.18828 (tested with Ext r5678 & r5748)

Edit 2:
Does not cause any problems in FF 3.5.5 and Opera 10.10

**cobnet** · 9 Dec 2009 9:29 PM

Originally Posted by cobnet

Interesting looks like miframe2.zip is for Ext 3.0.3???????? I have tried all versions and receive the same message from each?

any other ideas?

Problem is solved now, it seems multidom is different in each version, I was using 2_1 on each attempt. Thanks for taking the time to let me know where to look!!!!

Nice when things work,
til next time....

**kohyea** · 10 Dec 2009 9:24 PM

Hello hendricd;

First, thanks for your shared your great extendsions!

I want to communicate between ManagedIFramePanel and embedded iframe, but I don't know how to do it, following is my test codes:

HTML code:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Test Iframe</title>
    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
  <!-- LIBS -->
  <script type="text/javascript" src="../js/core/adapter/ext-base.js"></script>
 <script type="text/javascript" src="../js/core/ext-all.js"></script>
 
 <!-- Test extensions  -->
 <script type="text/javascript" src="../js/extensions/Ext.ux.ManagedIFrame.js"></script>
 <script type="text/javascript" src="../js/extensions/mifmsg.js"></script>
 <script type="text/javascript" src="ts-iframe.js"></script>
</head>
<body>
<div id="test-iframe"></div>
</body>
</html>

Javascript(ts-iframe.js):

Code:

Ext.ux.TestIframePanel = Ext.extend(Ext.ux.ManagedIFramePanel, {
 
 initComponent: function(){
  
  this.tbar = [{
   text: 'Send',
   scope: this,
   handler: function(){
    this.fireEvent('send');    
   }
  }];
  
  Ext.ux.TestIframePanel.superclass.initComponent.call(this);
  
  
  this.addEvents('send', 'receive');
 },
 
 
 initEvents: function(){
  Ext.ux.TestIframePanel.superclass.initEvents.call(this);
  
  this.on('send', function(){
   alert('I want to send message to embedded page: test.html');
  }, this);
  
  this.on('receive', function(){
   alert('I want to receive message from embedded page');
  });
 }
});
Ext.onReady(function(){
 Ext.QuickTips.init();
 
 var iframePanel = new Ext.ux.TestIframePanel({
  defaultSrc: 'test.html',
  disableMessaging: false,
  renderTo: 'test-iframe',
  width: 600,
  height:400
 });
});

embedded iframe (test.html):

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="0">
<meta http-equiv="expires" content="Mon, 22 Jul 2002 11:12:01 GMT">
<script language="javascript">
function send(){
 //I want to send message to TestIframePanel
}
function receive(message){
 //I want to receive message from TestIframePanel here!
 document.getElementById('logger').innerHTML = message.data;
}
</script>
</head>
<body text="#000000" bgcolor="#ffffff" link="#00000" vlink="#00000">
<a href="javascript:send();">Send Message to TestIframePanel</a><br />
<div id="logger"></div>
</div>
</body>
</html>

Thanks a lot.
Kohyea.

**luca.santaniello** · 11 Dec 2009 12:16 AM

I using Ext 3.0.3 and downloaded miframe2_01.zip

I use Ext.ux.ManagedIFrame.Window and it run.

Do I must import all js file?

<script type="text/javascript" src="js/mif.js"></script>
<script type="text/javascript" src="js/mifmsg.js"></script>
<script type="text/javascript" src="js/multidom.js"></script>
<script type="text/javascript" src="js/uxvismode.js"></script>

Txs

**hendricd** · 11 Dec 2009 1:25 PM

@luca.santaniello--
Review the included readme.txt file. This is likely all you'll need:

<script type="text/javascript" src="js/miframe[-debug].js"></script>
<script type="text/javascript" src="js/mifmsg.js"></script>

[3.0.x, 3.1.1] ux.ManagedIFrame 2.x

Thread Tools

Search Thread

Display

Communication between ManagedIFramePanel and embedded iframe

Communication between ManagedIFramePanel and embedded iframe

Help me

Help me

Tags for this Thread