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

**TomChiverton** · 3 Dec 2009, 2:16 AM

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...

Code:

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** · 3 Dec 2009, 10:47 AM

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

Code:

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:

Code:

            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** · 3 Dec 2009, 2:21 PM

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** · 4 Dec 2009, 5:59 AM

Originally Posted by cobnet

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** · 4 Dec 2009, 8:02 PM

Originally Posted by 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.

@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:

Code:

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** · 4 Dec 2009, 8:17 PM

Originally Posted by 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

Code:

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:

Code:

            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.

Code:

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

**hendricd** · 4 Dec 2009, 8:18 PM

Originally Posted by TomChiverton

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** · 5 Dec 2009, 8:25 AM

Originally Posted by Tinki

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** · 6 Dec 2009, 11:58 PM

Originally Posted by hendricd

@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:

Code:

<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

Code:

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

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

**TomChiverton** · 7 Dec 2009, 1:30 AM

Originally Posted by hendricd

@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.

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

Thread Tools

Search Thread

Display

uncaught exception: Ext Release is not supported

Tags for this Thread

Posting Permissions

Stay Connected

Stay Connected

Sign up for Sencha News