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

[TomChiverton]

On FireFox 3.5, with Ext 3.0 and the matching ManagedIframe class, the following code works as expected to create tabs with IFRAME's for the content of each.

However, it also places the 2nd IFRAME containing the second URL under the tabs. This is then removed once a tab is picked.

Any ideas why this may be happening ? A google around hasn't turned up this happening...

Ext.onReady(function(){    

var tabpanel2 = new Ext.TabPanel({
    tabPosition:'left',
    activeTab: 0,
    tabWidth:110,
    height:"480",
    renderTo:'tabs2',
    defaults:{autoScroll: true},
    
    items:[
        {
            title:"Generate X
            body:new Ext.ux.ManagedIframe({autoCreate:{ src:"/x.cfm", frameBorder: 0, cls:'x-panel-body',width: '99%', height: 480}})
          },
        {
            title:"Y details",
              body:new Ext.ux.ManagedIframe({autoCreate:{ src:"/y.cfm", frameBorder: 0, cls:'x-panel-body',width: '99%', height: 480}})
        },
        {
            title:'Z report',
            html:'TBC'
        },
        {
            title:'Narrative',
            html:'TBC'
        }
    ]
  });
    
});//onReady

[zombeerose]

Another HTTPS issue - I'm using ExtJS 3.0.3 and MIF 2.0.1

I am performing Single-Sign-On authentication from a website to the other internal sites for our company. They are not same-domain though. Everything tested fine when I was running from HTTP to HTTP(S). However, I ran into "Permission Denied" errors in IE8 once I pushed onto our HTTPS production server.

IE8 was complaining about the line

win.location.href = s;

in the reset function. I was able to address the issue by trapping the exception. Below is the function with the tweak:

            reset : function(src, callback, scope) {
                
                this._unHook();
                var loadMaskOff = false;
                var s = src, win = this.getWindow();
                var O = this._observable;
                if(this.loadMask){
                    loadMaskOff = this.loadMask.disabled;
                    this.loadMask.disabled = false;
                 }
                this.hideMask(true);
                
                if(win){
                    this.isReset= true;
                    var cb = callback;
	                O.addListener('_docload',
	                  function(frame) {
	                    if(this.loadMask){
	                        this.loadMask.disabled = loadMaskOff;
	                    };
	                    Ext.isFunction(cb) &&  (cb = cb.apply(scope || this, arguments));
                        O.fireEvent("reset", this);
	                }, this, {single:true});
	            
                    Ext.isFunction(s) && ( s = src());
                    s = this._targetURI = Ext.isEmpty(s, true)? this.resetUrl: s;
                    try {
                        win.location.href = s;
                    } catch (ex) {
                        O.fireEvent.call(O,'exception', this, ex);
                    }                    
                }
                
                return this;
            },

Any ideas?

[cobnet]

using 2 and ext 3.0.3 and getting the following error when just loading the multidom.js and mif.js and no use of manageiframe coding receiving the following error msg in firebug:

uncaught exception: Ext Release is not supported

any ideas?

[TomChiverton]

uncaught exception: Ext Release is not supported

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

[hendricd]

On FireFox 3.5, with Ext 3.0 and the matching ManagedIframe class, the following code works as expected to create tabs with IFRAME's for the content of each.

However, it also places the 2nd IFRAME containing the second URL under the tabs. This is then removed once a tab is picked.

@Tom --
Well, you're getting warmer, but know that MIF comes in Panel and Window forms as well. MIFPanel would be the recommended choice for a layout:

Ext.onReady(function(){    

var tabpanel2 = new Ext.TabPanel({
    tabPosition:'left',
    activeTab: 0,
    tabWidth:110,
    height:"480",
    renderTo:'tabs2',
    defaults:{autoScroll: true},
    
    items:[
        {
            xtype : 'iframepanel',
            title:"Generate X,
            defaultSrc:"/x.cfm"
          },
....

The higher level MIF classes contain the Visibility fixes required for an IFRAME to survive the windy seas of DOM reflow in most layouts.

The MIF.Element is bit more primitive.

[hendricd]

Another HTTPS issue - I'm using ExtJS 3.0.3 and MIF 2.0.1

I am performing Single-Sign-On authentication from a website to the other internal sites for our company. They are not same-domain though. Everything tested fine when I was running from HTTP to HTTP(S). However, I ran into "Permission Denied" errors in IE8 once I pushed onto our HTTPS production server.

IE8 was complaining about the line

win.location.href = s;

in the reset function. I was able to address the issue by trapping the exception. Below is the function with the tweak:

            reset : function(src, callback, scope) {
                
                this._unHook();
                var loadMaskOff = false;
                var s = src, win = this.getWindow();
                var O = this._observable;
                if(this.loadMask){
                    loadMaskOff = this.loadMask.disabled;
                    this.loadMask.disabled = false;
                 }
                this.hideMask(true);
                
                if(win){
                    this.isReset= true;
                    var cb = callback;
                    O.addListener('_docload',
                      function(frame) {
                        if(this.loadMask){
                            this.loadMask.disabled = loadMaskOff;
                        };
                        Ext.isFunction(cb) &&  (cb = cb.apply(scope || this, arguments));
                        O.fireEvent("reset", this);
                    }, this, {single:true});
                
                    Ext.isFunction(s) && ( s = src());
                    s = this._targetURI = Ext.isEmpty(s, true)? this.resetUrl: s;
                    try {
                        win.location.href = s;
                    } catch (ex) {
                        O.fireEvent.call(O,'exception', this, ex);
                    }                    
                }
                
                return this;
            },

Any ideas?

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

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

[hendricd]

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

@cobnet -- Tom's got you on the right track..

[hendricd]

Still working around creating of MIFrame, which child page would have "sendMessage" method. Seems that child is ordinary IFrame and it doesn't understand sendMessage("..."). Seen some code for "onerror" event in IFrame - does it parse exception on child frame and converts it to message?
Will appreciate any messaging example, working under ExtJs 3.0.3 IE8.

@Tinki --

The MIF package ships with the messaging API in a separate script (not many use messaging). Simply include mifmsg.js after yourmiframe[-debug].js script tag.

[Tinki]

@Tinki --
The MIF package ships with the messaging API in a separate script (not many use messaging). Simply include mifmsg.js after yourmiframe[-debug].js script tag.

Still no luck. Have frame page:

<html>
 <head>
            <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>
 </head>
 <body>
	<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'},
					message: function(){
							alert("!!!!");
						},
					listeners: {
						message: function(){
							alert("!!!!");
						},
						domready: function(frame){
								 if(frame.domWritable()){
									 frame.execScript('init()');
								  }
					   },
					   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

...
<body>
<script>
	var init = function(){ 
         sendMessage("I'm awake !","startup");
    };
</script>
</body>

Only "exception" handler is working on MIF with "Object expected" error.

[TomChiverton]

@Tom --
well. MIFPanel would be the recommended choice for a layout:

That's spot on, cheers ! Looks like the examples at the start of the thread are a bit out of date.