PDA

View Full Version : [3.0.x, 3.1.1] ux.ManagedIFrame 2.x



Pages : [1] 2 3 4

hendricd
20 Jun 2009, 10:53 AM
ux.ManagedIFrame.[Element, Component,Panel, Portlet, Window]

(Current Release 2.1.5)

MIF 2.0x is only supported on Ext 3.0 RC3 thru 3.0.3 (previous Ext 3 release-candidates RC1, 2 are not compatible).

MIF 2.1.x is only supported on Ext 3.1.1 higher. (For more on Ext 3.1 compatibility, read this (http://www.extjs.com/forum/showthread.php?p=426151#post426151))

The latest build is also available on code.google/svn/tags (http://code.google.com/p/managediframe/source/browse/).

Some features available:

UpdateManager.update and load support (to IFrames document).
advanced scripting support.
loadMask support.
Cross-frame messaging (proprietary and HTML5 compatible postMessage)

Supported events:

documentloaded
domready (fired when used with Updatemanager.update method, or when the document DOM reports ready)
message[: subject]
exception
blur (fired when the frame window loses focus)
focus (fired when the frame window receives focus)
resize (fired when the frame window is resized)
unload (fired when the frame document is unloaded)
scroll (fired when the frame document is scrolled)
reset (fired when the frame document is reset to neutral domain)

The ux.ManagedIframe components leverages the cool layout management features of a Panel, but embeds a ManagedIframe into the body of a Panel, Window, or other Ext Component. This preserves the native header, footer, and toolbar support of a standard panel, but permits creation of complex layouts surrounding an IFrame.

Licensing: ux.ManagedIframe v2.0 or higher is dual-licensed: GPL 3.0 or CDL (http://licensing.theactivegroup.com/) for commercial use.

Notes:
* MIF now has a modular build structure. You can exclude features you don't need (like X-frame messaging and Drag-drop [still under development]) to minimize production file sizes. Customize the included miframe.jsb file, for your requirements (a standard miframe.js file is already built for the base classes.)

* Due to recent changes in Ext 3.0 internals, MIF now requires the included multidom library. This library enhances the Ext Core (via function overloading) to permit DOM access to external "same-origin" document contexts without Ext be loaded into them. Most all Ext.Element and core methods ( Ext.[get,getDom,select,query], addListener, etc) can be targeted against specific document contexts. A similar library that permits rendering UI components in the same fashion is still under development -- stay tuned for more on that. :-?

* Component xtypes
mif = Ext.ux.ManagedIFrame.Component
iframepanel = Ext.ux.ManagedIFrame.Panel
iframeportlet = Ext.ux.ManagedIFrame.Portlet
iframewindow = Ext.ux.ManagedIFrame.Window

* Convert Existing IFRAME element to Ext.ux.ManagedIFrame.Element. The following are all equivalent:


var MIF = new Ext.ux.ManagedIFrame.Element('myFrame');
var MIF = new Ext.Element.IFRAME('myFrame');
var MIF = Ext.get('myFrame');
* Migrating from previous releases.

The following methods/features have been changed/added:
- the MIF.getDocument method now returns the document the IFRAME was rendered to.
- the new MIF.getFrameDocument returns a reference to the embedded document of the IFRAME.
- the new setDesignMode method toggles the frame's current designMode state.
- the resize event now reports the frames current document, view, and viewport sizes.
- for any of the MIF UI Components, the autoScroll config option (default is true) now determines the frames overflow behavior.

Online API Documentation: Here (http://uxdocs.theactivegroup.com/index.html?class=Ext.ux.ManagedIFrame.Component).

Demos:
- Simple MIF.Window (http://demos.theactivegroup.com/demodesk.html?demo=mif&script=mifsimple).
- By popular demand: A Westside Story (http://demos.theactivegroup.com/demodesk.html?demo=mif&script=treenav) (Treepanel-based URLs drive a MIF-filled TabPanel, with page link <a> interception, and frame templating samples. ;) )
- PDFSubmit (http://demos.theactivegroup.com/demodesk.html?demo=mif&script=mifsubmit)(demonstrates MIF's ability to submit Forms/File-uploads using its new 'submitAsTarget' method)).
More demos coming soon...

Notes:
* The current vBulletin config gzips attachments which IE hates. Download this with Firefox (or other browser) instead of IE.

* MIF 2.1.x will ONLY work on Ext 3.1.1 or higher ! (For more on Ext 3.1 compatibility, read this (http://www.extjs.com/forum/showthread.php?p=426151#post426151))

Downloads for MIF 2.1.x (and Ext 3.1.1+) are only available from google/code/downloads (http://code.google.com/p/managediframe/downloads/list).

EDIT:
@For those monitoring--

MIF 4.0alpha2 (http://www.sencha.com/forum/showthread.php?137233-Ext.ux.ManagedIframe-4.0-alpha2-for-Ext-4.x&p=621353&viewfull=1#post621353) is now available for Ext 4.0.x.

i1befree
21 Jun 2009, 8:09 PM
Dear hendricd.
It's wonderful extension.
When I test it, I have a problem with page reload.

My test environment is following.
Browser : IE 7(debug on mode)
OS : Windows Vista

After load ManagedIframe instance, I refreshed all page.
I found following message.

'El._flyweights' is null or not object.

Debugger breaks at code line 2817 in ext-all-debug.js
(El._flyweights[named] = El._flyweights[named] || new El.Flyweight()).dom = el;

El._flyweights is undefined.
How can I solve this?

hendricd
22 Jun 2009, 3:03 AM
MIF 2.0 is only supported on Ext 3.0 or higher (previous Ext 3 release-candidates RC1, 2 are not compatible).

@i1befree -- Do you have Ext 3 Final or SVN Build of Ext?

hendricd
22 Jun 2009, 1:26 PM
MIF 2.0 RC1.1 zip (fixes) is posted on First post.

i1befree
22 Jun 2009, 3:29 PM
When I test RC1.1 with debugger, it breaks following line in extjs-debug.js file.



El.fly = function(el, named){
var ret = null;
named = named || '_global';

if (el = Ext.getDom(el)) {
(El._flyweights[named] = El._flyweights[named] || new El.Flyweight()).dom = el; -> breaks at this line
ret = El._flyweights[named];
}
return ret;
};


When I watch El._flyweights, it's value is undefined.

So, I modified ext-js-debug.js for testing.


if(!El._flyweights || !El._flyweights[named]){
if(!El._flyweights) El._flyweights = {};
El._flyweights[named] = new El.Flyweight();
}


After modifying, it works good. But I think it is not proper way.
In my code, I use miframe.js in tabpannel.
This is some code for using miframe.js.
I just modified RSS sample.


tab = this.add({
xtype : 'iframepanel',
id : menuInfo.id,
title : menuInfo.text,
tabTip : menuInfo.text,
closable : true,
loadMask : true,
frame : true,
frameConfig : {autoCreate:{id: 'frame-' + menuInfo.id}},
defaultSrc : menuInfo.url,
layout : 'fit',
margins : '5 5 1 5'
});

stumpy_uk
24 Jun 2009, 4:55 AM
@stumpy_uk -- Sorry to leave you hanging there. ;)

Whenever you want, you can activate the shimming agent (Transparent IMG is the default) available on MIFPanel:

to turn it on:
MIFP.shim.addClass(MIFP.shimCls+'-on');

to remove it:
MIFP.shim.removeClass(MIFP.shimCls+'-on');

you can even define your own shimUrl (for the IMG tag) in the MIFP config to place any image you want over the frame. ;)


{
xtype: 'iframepanel',
shimUrl : 'assets/transparent_hold.png';
....
}

Doug,

Is this option only available in later versions of your Iframe, I am still playing with RC2.01 and can't get the class options to work ?

hendricd
24 Jun 2009, 5:33 AM
Doug,

Is this option only available in later versions of your Iframe, I am still playing with RC2.01 and can't get the class options to work ?

Ah, you posted in the wrong Forum. ;)

In MIF 2.0, frontal shims are simpler to handle:



MIFP.getFrame().toggleShim(true/false);


The shim is created for you if necessary.

chiphi13
25 Jun 2009, 8:36 AM
I have upgraded the extjs to the latest in the svn along with the latest in the svn for MIF. I have created a window with the following config


{
id: 'win-' + unique,
layout: 'fit',
title: Ext.util.Format.ellipsis(title, 16),
defaultSrc: link,
shadow: Ext.isIE,
width: winWidth,
height: winHeight,
autoScroll: true,
hideMode: 'nosize',
iconCls: 'bogus',
shim: false,
animCollapse: false,
allowRemove: false,

listeners: {
domready: function(frameEl){ //raised for "same-origin" frames only
var MIF = frameEl.ownerCt;
doc = MIF.getFrameDocument();

var title = frameEl.domWritable() ? doc.title : null;

if (title==null && frameEl.fly('windowTitle')) {
title = frameEl.fly('windowTitle').getValue();
}

if (title.trim().length > 1) {
win.setTitle(Ext.util.Format.ellipsis(title, 16));
win.taskButton.setTaskText(Ext.util.Format.ellipsis(title, 12));
}

},
documentloaded: function(frameEl){
var MIF = frameEl.ownerCt;
doc = MIF.getFrameDocument();

var title = frameEl.domWritable() ? doc.title : null;

if (title==null && frameEl.fly('windowTitle')) {
windowTitle = frameEl.fly('windowTitle').getValue();
}

if (windowTitle.trim().length > 1) {
win.setTitle(Ext.util.Format.ellipsis(windowTitle, 16));
win.taskButton.setTaskText(Ext.util.Format.ellipsis(windowTitle, 12));
}
}
}
}


And when I close the window, I receive the following error:


docCache._dataCache is undefined
removeNode()()miframe-...-debug.js (line 274)
remove()()miframe-...-debug.js (line 611)
destroyMembers()()ext-base.js (line 32)
beforeDestroy()()ext-all-debug.js (line 20298)
destroy()()ext-all-debug.js (line 15404)
close()()ext-all-debug.js (line 20634)
createSingle()()ext-all-debug.js (line 1403)
(?)()()ext-all-debug.js (line 1501)
urlDecode()()ext-base.js (line 19)
fire()()ext-all-debug.js (line 1499)
fireEvent()()ext-all-debug.js (line 1284)
afterHide()()ext-all-debug.js (line 20534)
hide()(null, function(), Object initialConfig=Object)ext-all-debug.js (line 20520)
close()()ext-all-debug.js (line 20635)
(?)()()xrm-desk...-debug.js (line 133)
defer()()ext-base.js (line 21)
[Break on this error] delete docCache._dataCache[dom.id];

Does anyone know what could be causing this?

hendricd
25 Jun 2009, 1:24 PM
@chiphi13 -- I would normally expect to see these errors under one (or all) of three conditions:

1) Your recent extract from Ext's SVN, would require a rebuild of Ext included jsb's.
2) Your still running Ext 3.0 RC2 (or less). Not supported!
3) You downloaded recent MIF 2.0 source files from SVN, (updated again just moments ago) and did not rebuild the package using the included jsb file, which creates a combined -> 'miframe.js' for inclusion on your webpage.

Which apply for you? ;)

i1befree
25 Jun 2009, 3:24 PM
Dear Doug.
After I checked out recent extjs and miframe, my problem is resolved.
Thanks a lot.

hendricd
1 Jul 2009, 6:16 PM
is up and ready for download. :-?

robertoroberto
2 Jul 2009, 2:14 AM
Hi
I'm trying to use ManagedIFrame, but I have an issue.

I want to load manually an IFrame using the update function



var vContent = "<html><head><script>function test(){alert('hello');}</script></head><body><button onclick='test();'>click me</button</body></html>";
var vIFrame = new Ext.ux.ManagedIFrame.Panel({frame: true, autoScroll: true} );
vMainPanel.add(vIFrame);
vMainPanel.doLayout();
vIFrame.getFrame().update(vContent );


I can see into the IFrame the "click me" button, but when I push it I receive "test" is not defined.
Why?

Maybe I make same mistakes... or this extension is not the right way to do it.

Thanks

Roberto

robertoroberto
2 Jul 2009, 2:42 AM
I'm sorry..
I found my mistake....


vIFrame.getFrame().update(vContent );

must be


vIFrame.getFrame().update(vContent, true );

zombeerose
6 Jul 2009, 8:51 AM
I tried running the demos listed in your first post but they all seem to have problems with the mask. Using FF3

hendricd
6 Jul 2009, 8:59 AM
I tried running the demos listed in your first post but they all seem to have problems with the mask. Using FF3

@zombeerose -- Try clearing your browser cache, and then try. You may have an older version still cached in there.

zombeerose
6 Jul 2009, 9:02 AM
Nope same problem.

For the Window demo, I get this error:


_gat is not defined
http://demos.theactivegroup.com/startup.js?_dc=1246899649475
Line 206
I also tried with Chrome.

hendricd
6 Jul 2009, 9:18 AM
Nope same problem.

For the Window demo, I get this error:


_gat is not defined
http://demos.theactivegroup.com/startup.js?_dc=1246899649475
Line 206
I also tried with Chrome.

Pesky Google Analytics stuff. Try it again. :>

zombeerose
6 Jul 2009, 9:23 AM
Perfect - thanks!

zombeerose
6 Jul 2009, 10:11 AM
Here is a test case that no longer works when I include MIF in my project.




var msgCt = Ext.DomHelper.insertFirst(document.body, {id:'test',style:'position:absolute;z-index:10000'}, true);

var m = Ext.DomHelper.append(msgCt, {html:'<div class="my-msg">Message</div>'}, true);

msgCt.alignTo(document, 't-t');

console.log(m);



I get
TypeError: el.style is undefined

Any ideas?

hendricd
6 Jul 2009, 10:30 AM
@zombeerose -- There have been some internal changes to Ext/Core 3.0 RC3, but in general, alignment and centering is based upon the target's (centering) style object. document has no style object.

You should be using :

msgCt.alignTo(document.body, 't-t');

zombeerose
6 Jul 2009, 10:33 AM
Much appreciated!

Darklight
7 Jul 2009, 2:22 AM
hey hendricd, thanks for your continued work on this great extension!
should RC2 be working with Ext 3 Final? I get a "with this.filterOptRe is undefined" error when i try to update to the new version.
thanks in advance!

dubrovsky
7 Jul 2009, 3:42 AM
Dear Mr. Hendricks, please answer me the following question.
How can I, using your excellent MIF extension, catch errors or exceptions witch may be thrown by server side of my web application(said, in JSON format). What events, methods of MIF API or may be some technics should I use to tell users that was something wrong on the server code?

hendricd
7 Jul 2009, 4:40 AM
hey hendricd, thanks for your continued work on this great extension!
should RC2 be working with Ext 3 Final? I get a "with this.filterOptRe is undefined" error when i try to update to the new version.
thanks in advance!

@Darklight -- Hard to say. I just refreshed the demo sites with the latest Ext 3.0 build, and I'm not seeing anything like that on the demos.

Have you cleared your caches? Switch to ext-all-debug and get your mouse dirty in Firebug. ;)

hendricd
7 Jul 2009, 4:42 AM
Dear Mr. Hendricks, please answer me the following question.
How can I, using your excellent MIF extension, catch errors or exceptions witch may be thrown by server side of my web application(said, in JSON format). What events, methods of MIF API or may be some technics should I use to tell users that was something wrong on the server code?

@dubrovsky -- How are you 'collecting' such exceptions from your server-pages now. If it's centralized, it would be a simple matter to send the parent page a 'message' containing the error payload.

Explain...

dubrovsky
7 Jul 2009, 4:51 AM
For example:
var tab = tabpanel.add({
xtype:'iframepanel'
,title: 'CIM/SMGS'
,closable: true
,cls:'x-panel-body'
,loadMask:{msg:"Loading..."}
,defaultSrc: 'Smgs_create.do?task=create'
});
Here I load in IFRAME context from another jsp page. And when something wrong on the server side during loading, how can I catch exception here?

hendricd
7 Jul 2009, 5:00 AM
..
Here I load in IFRAME context from another jsp page. And when something wrong on the server side during loading, how can I catch exception here?

There are a variety of exceptions, no?

Is Ext loaded in those pages? If so, you could evaluate each of your Ajax calls and report those exceptions to the parent page as they happen.

Are you talking about 40x, 50x HTTP Errors? (IFRAMEs are weak at providing properties to manage HTTP status.)

Keep talking...

dubrovsky
7 Jul 2009, 5:15 AM
Let's say, I catch an exception on server side during loading child page in iframe with Extjs in it, which is generated by my business logic. No matter, what exception, and I want a way to let know about it to the parent page and show to the end user a custom message.
In Ajax requests I use for such situations JSON responses and success or failure callback functions.

hendricd
7 Jul 2009, 5:33 AM
@dubrovsky -- Difficult to steer you one way or another without seeing your child page architecture (Are they Ext-Ajax exclusively, or simple HTML Forms?)

If they are Ajax-centric, the ext-basex adapter (see my sig below) offers global HTTP-status traps and a means to evaluate (via listeners) EVERY response from the server for trouble.

You could also set class-level listeners (recently added to Ext 2.2/3) on the data.Connection class itself to trap those sort of things. (search the Forums for more on that).

Intercepting/gathering is the hard part. But, when they occur, you could easily call a function or send a message to the parent page for handling


var troubles = [....];
parent &&
parent.NotifyTroubles &&
parent.NotifyTroubles( troubles); //call a global function directly on the parent page to handle it
or with MIF involved:


//Child page sends:
window.sendMessage && window.sendMessage(troubles,'trouble');

//parent page's MIF has a listener:
MIFPanel.on('message:trouble', function(troubles){
Ext.each([].concat(troubles), panicFn );

});

A few ways to handle it. Go nuts ! ;)

dubrovsky
7 Jul 2009, 6:17 AM
Could you help me a bit more.
A concrete situation.
I use this fragment in parent page to load jsp child page in miframe:
var tab = tabpanel.add({
xtype:'iframepanel'
,title: 'CIM/SMGS'
,closable: true
,cls:'x-panel-body'
,loadMask:{msg:"Loading..."}
,defaultSrc: 'Smgs_create.do?task=create'
});
When loaded, I have form rendered using Extjs with data from database .
But suppose when loading Smgs_create.do url my server code catch an error. May be db connect was lost or business logic thorow an exception. My child page isn't rendered yet. What is the way here to let the end user know about it, to catch such exception on user's side, to let Extjs and MIF know that it was exception on server and show it customised to the user. Should i somehow catch it on child page and then send message to parent, or may be parent could have a way to know about it.
Sorry, if my questions seems to you, a big GURU, too stupid... :)

hendricd
7 Jul 2009, 6:41 AM
@dubrovsky -- The only way to trap a catastrophic server failure like that (and using an iframe to host the page) is with an Ajax call to populate the frame with the server's entire page response. In other words, use autoLoad instead of defaultSrc.

Then you have trappable control over the server failure:



var tab = tabpanel.add({
xtype:'iframepanel'
,title: 'CIM/SMGS'
,closable: true
,cls:'x-panel-body'
,loadMask:{msg:"Loading..."}
,autoLoad: {
url : 'Smgs_create.do',
params: { task : 'create' },
scripts : true,
method : 'GET',
callback : function(el, success, response, options){
//sent back HTTP status 50x?
if(!success){ return complain( response.status ); }
}
});
However, the trade-off is you'll likely need to use absolute URL's in your child page's script/link tags.

dubrovsky
7 Jul 2009, 10:36 PM
@dubrovsky -- The only way to trap a catastrophic server failure like that (and using an iframe to host the page) is with an Ajax call to populate the frame with the server's entire page response. In other words, use autoLoad instead of defaultSrc.

Then you have trappable control over the server failure:



var tab = tabpanel.add({
xtype:'iframepanel'
,title: 'CIM/SMGS'
,closable: true
,cls:'x-panel-body'
,loadMask:{msg:"Loading..."}
,autoLoad: {
url : 'Smgs_create.do',
params: { task : 'create' },
scripts : true,
method : 'GET',
callback : function(el, success, response, options){
//sent back HTTP status 50x?
if(!success){ return complain( response.status ); }
}
});
However, the trade-off is you'll likely need to use absolute URL's in your child page's script/link tags.

I've followed your advise and use this code block and absolute URL's in my child page's script/link tags(I also tried to use relative url's - it's all the same). In Firefox 3 everything works perfectly, but in IE6 i've got the error - "Ext is undefined". Could you help me, please, how to avoid this IE6 pitfall.

zombeerose
8 Jul 2009, 8:44 AM
What would be the recommended way to set some markup within a MIF? Basically, I want to apply a CSS style sheet to the source page that is loaded in the frame.

Thanks!

hendricd
8 Jul 2009, 9:26 AM
What would be the recommended way to set some markup within a MIF? Basically, I want to apply a CSS style sheet to the source page that is loaded in the frame.

Thanks!
@zombeerose --
If your css demands are minimal:



var nestedRules = [
'x-hidden{visibility:hidden;}',
'x-hide-display{display:none;}' ].join(' ');

MIFP.on('domready', function(frame){
frame.CSS.createStyleSheet( nestedRules );

});

If not,



MIFP.on('domready', function(frame){
var D = frame.getFrameDocument(),
head = D ? D.getElementsByTagName("head")[0] : null;
if(D && head){
Ext.DomHelper.append(head, {
tag : 'link',
type: 'text/css',
rel : "stylesheet" ,
href="http:/example.com/css/yourRules.css" //absolute address likely required
});
}
});

zombeerose
8 Jul 2009, 9:34 AM
Thanks hendricd! I was hoping for a "fancier" solution but that worked.

cherbert
8 Jul 2009, 1:37 PM
My application uses the little pop down message boxes used in many of the Ext sample pages...

Ext.example.msg....

My application errors whenever I try and call Ext.examples.msg with the ManagedIFrame2 (RC2) installed.


el.style is undefined
if(v = el.style[prop]){\r\n mutidom.js (Line 591)

My includes are....


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

hendricd
8 Jul 2009, 2:48 PM
My application uses the little pop down message boxes used in many of the Ext sample pages...

Ext.example.msg....

My application errors whenever I try and call Ext.examples.msg with the ManagedIFrame2 (RC2) installed.


el.style is undefined
if(v = el.style[prop]){\r\n mutidom.js (Line 591)My includes are....


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

Hmm, @cherbert. I'll take a look at that a bit closer. Pls stand by... ;)

Just curious, is 'el' (or, this.dom) a document in the debugger for you when it fails there?

cherbert
8 Jul 2009, 3:05 PM
Sorry it doesn't really give me much more apart from the error being on line 591 of multidom.js.

But the above error triggers everytime I try to use Ext.example.msg(...

The application then halts.

decker.net
9 Jul 2009, 5:35 AM
Hi, miframe RC2 doesn't work when I use it with extjs + jquery-adapter from ext 3.0 distribution. It seems that Ext.lib.Dom class doesn't have several methods, such as "getDocumentHeight", "getDocumentWidth" and other. Miframe fails when it try to overload non existing methods. With ext-base adapter miframe work fine.

hendricd
9 Jul 2009, 7:08 AM
Sorry it doesn't really give me much more apart from the error being on line 591 of multidom.js.

But the above error triggers everytime I try to use Ext.example.msg(...

The application then halts.


Hi, miframe RC2 doesn't work when I use it with extjs + jquery-adapter from ext 3.0 distribution. It seems that Ext.lib.Dom class doesn't have several methods, such as "getDocumentHeight", "getDocumentWidth" and other. Miframe fails when it try to overload non existing methods. With ext-base adapter miframe work fine.

@cherbert, decker.net -- Give the latest kit from SVN (or RC2-1.zip on first post) a try. It should resolve both issues.

zombeerose
9 Jul 2009, 10:02 AM
I am trying to make the background of the MIF transparent in IE. Based on my search, I have to set the background-color of the body to transparent AND set the ALLOWTRANSPARENCY property of the frame to true. I tried using frameConfig but no luck.

Secondly, I have a MIFP that is the center region in a border layout. The content I am loading into the frame goes past the viewable area. I set autoScroll to true but I'm still not getting any scroll bars.

Any suggestions?

zombeerose
9 Jul 2009, 11:09 AM
On a separate note, I updated to the RC2.1 file and now I'm getting this error.


b is undefined
http://www/includes/library/extjs/ext/examples/mif/ext-all.js
Line 7
I have packaged and attached my test. Just drop into examples.

decker.net
10 Jul 2009, 2:13 AM
Now it fails on Ext.getDoc() function call.

cherbert
10 Jul 2009, 2:44 AM
Well now things are even worse. (RC2.1) My app won't load at all now and fails in firebug with..


ct is undefined
[Break on this error] ct.dom.insertBefore(this.el.dom, position);\n

ext-all-debug.js (Line 14639)


These are my first includes...


<script type="text/javascript" src="./ext3/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="./ext3/ext-all-debug.js"></script>
<script type="text/javascript" src="./js/miframe/multidom.js"></script>
<script type="text/javascript" src="./js/miframe/miframe-debug.js"></script>

hendricd
10 Jul 2009, 4:46 AM
@zomberose, @cherbert, @decker.net -- FOr the moment remove lines

295 from miframe-debug.js,
and/or
123 from multidom.js



var overload = function(pfn, fn ){
// fn = typeof fn == 'function' ? fn : function t(){};
I'll look a bit more into the issue of overloading functions that don't exist. :-?

@cherbert:
The new MIF builds should be used one of two ways:

Either just use the miframe[-debug].js (which contains all the package components)

or include each part of the package:


<script type="text/javascript" src="./js/miframe/uxvismode.js"></script>
<script type="text/javascript" src="./js/miframe/multidom.js"></script>
<script type="text/javascript" src="./js/miframe/mif.js"></script>but never both.

cherbert
10 Jul 2009, 5:39 AM
ok we are getting somewhere.

I have no errors now and my application loads. However..

It would appear that all divs on my index page with class='x-hidden' are now showing up as the application is loading. I can see non-related hidden divs that I have created for elsewhere in my application and also I can see the contents of the iframepanels as Ext is loading.

Once the application loads Ext takes over and the page looks fine.

So basically fully functioning except for the hidden divs showing? Looks to me like the class x-hidden is being ignored now?

UPDATE This only appears to be happening in Firefox. Safari/Chrome doesn't do it.

armagedon
12 Jul 2009, 8:30 AM
Dear Doug,
I was using MIFRAME in the prev. version of EXT JS very intensive. Now I have migrated and nothing works anymore for me(RC1, RC2 1 - are producing errors. RC2 has no errors but don't works). You made a perfect work but this is not useful for us, if you don`t write a simple tutorial how to bind this component in and how to use it. The new features seems to be perfect, but they are useless, if the basics are not working. In your demos - and this is for all developers- please dont combine several comoponents together. Write it so simple as you can, so the dependencies can be seen. The elegance of the code is not the purpose in demos. With this i mean using JIT in your demos is absolutly on wrong position. MIFRAME is complex enough.
Maybe you can update some tutorials. E.g. I didnt know, which JS-Files I have to bind in, just from your last post. Alsp no readme in the zip files.
I am looking forward, to hear from you and using your MIFRAME again :-)

extjs3user
12 Jul 2009, 10:39 PM
Am using miframe2_RC2-1 with extjs3.0
i have included mif.js, miframe.js, multidom.js, uxvisdom.js files.

var northPanel = {....};



var centerPanel = new Ext.Panel({
region: 'center',
id: 'centerPanelId'
}); //End of Center panel


var newFrame = centerPanel.add({
xtype : 'iframepanel',
id : 'SORiframe',
frame: false,
loadMask : true,
defaultSrc: '<%= ViewData.Model.SetReportName %>'
});

var masterViewport = new Ext.Viewport({
id: 'sorViewPort',
renderTo: Ext.getBody(),
layout: "border",
margins: '0 0 0 0',
floatable: false,
titleCollapse: false,
items: [
centerPanel, northPanel]//EO item Array
});


am getting an error this.el is undefined
please help me.

hendricd
13 Jul 2009, 3:59 AM
Am using miframe2_RC2-1 with extjs3.0
i have included mif.js, miframe.js, multidom.js, uxvisdom.js files.

var northPanel = {....};



var centerPanel = new Ext.Panel({
region: 'center',
id: 'centerPanelId'
}); //End of Center panel


var newFrame = centerPanel.add({
xtype : 'iframepanel',
id : 'SORiframe',
frame: false,
loadMask : true,
defaultSrc: '<%= ViewData.Model.SetReportName %>'
});

var masterViewport = new Ext.Viewport({
id: 'sorViewPort',
renderTo: Ext.getBody(),
layout: "border",
margins: '0 0 0 0',
floatable: false,
titleCollapse: false,
items: [
centerPanel, northPanel]//EO item Array
});
am getting an error this.el is undefined
please help me.

@extjs3user -- The new MIF builds should be used one of two ways:

Either just use the miframe[-debug].js (which contains all the package components)


<script type="text/javascript" src="./js/miframe/miframe[-debug].js"></script>or include each part of the package:


<script type="text/javascript" src="./js/miframe/uxvismode.js"></script>
<script type="text/javascript" src="./js/miframe/multidom.js"></script>
<script type="text/javascript" src="./js/miframe/mif.js"></script>but never both.

Are you wrapping your Layout code in Ext.onReady()?

hendricd
13 Jul 2009, 4:40 AM
Dear Doug,
I was using MIFRAME in the prev. version of EXT JS very intensive. Now I have migrated and nothing works anymore for me(RC1, RC2 1 - are producing errors. RC2 has no errors but don't works). You made a perfect work but this is not useful for us, if you don`t write a simple tutorial how to bind this component in and how to use it. The new features seems to be perfect, but they are useless, if the basics are not working. In your demos - and this is for all developers- please dont combine several comoponents together. Write it so simple as you can, so the dependencies can be seen. The elegance of the code is not the purpose in demos. With this i mean using JIT in your demos is absolutly on wrong position. MIFRAME is complex enough.
Maybe you can update some tutorials. E.g. I didnt know, which JS-Files I have to bind in, just from your last post. Alsp no readme in the zip files.
I am looking forward, to hear from you and using your MIFRAME again :-)

@armagedon -- I hear your words. :-? And your point is well-taken, MIF 2.0 needs updated documentation to describe setup, builds, and deployment. I'll be adding those shortly.

But, understand that the Demo site is not built to teach the beginner the Ext framework. The Demo source panels are there for a reason. They show how to setup the MIF Components in a basic layout and demonstrate commonly requested tasks (eg. link interception, adding IFRAMEs to tabPanels (driven by 'west-side' trees, see it here (http://demos.theactivegroup.com/demodesk.html?demo=mif&script=treenav)). The focus is on component usage, not how to build a full Ext project (that's what Ext /examples are for). MIF does many things, and creating seperate full demo pages on how to do everything one of them is not practical using the traditional (per page) approach. I welcome ideas/solutions to that, however. :-?

The use of $JIT on the demo site simplifies maintenance and deployment of Components and related examples. Without it, there probably would not be a demo site offered at all.

Regarding MIF complexity: One of the fundamental motives for changes in MIF's architecture is (an attempt) to reduce the size of MIF to suite functional needs. 90% of you don't do anything but stick an IFRAME in a Layout somewhere, so you don't need the extra baggage. And there are new features coming in the next release that made this structure necessary for maintenance purposes:

- ManagedIFrame Element for Ext Core (MIT)
- multidom Support for Core and ExtJs (the ability to safely access-the-DOM/render- components of/to multiple documents from a single Ext instance).
- cross FRAME drag-drop
- cross FRAME messaging.

And finally, regarding Ext 3 compatibility: Ext's late release changes (post-Ext 3RC2) with little notice, required significant modification to MIF internals to safely support existing DOM-access features that were provided by MIF 1.x. Ext 3 was essentially a Core rewrite, which has created a variety of ux.Compatibility issues with several extensions (MIF included).

MIF will remain in RC status until it performs as well (or better) as the older 1.x release.

I appreciate your patience (and keep on eye on SVN/trunk). ;)

hendricd
13 Jul 2009, 6:24 AM
...is now available (on first post or SVN).

decker.net
13 Jul 2009, 7:01 AM
still fail on Ext.getDoc() - it return undefined.

hendricd
13 Jul 2009, 7:07 AM
still fail on Ext.getDoc() - it return undefined.

@decker -- Yes, I'm still working on a jquery(and others) adapter solution..

hendricd
13 Jul 2009, 7:43 AM
still fail on Ext.getDoc() - it return undefined.

@decker -- Could you post your current use case for Ext.getDoc?

zombeerose
13 Jul 2009, 9:22 AM
@zomberose, @cherbert, @decker.net -- FOr the moment remove lines

295 from miframe-debug.js,
and/or
123 from multidom.js



var overload = function(pfn, fn ){
// fn = typeof fn == 'function' ? fn : function t(){};
I'll look a bit more into the issue of overloading functions that don't exist. :-?

@cherbert:
The new MIF builds should be used one of two ways:

Either just use the miframe[-debug].js (which contains all the package components)

or include each part of the package:


<script type="text/javascript" src="./js/miframe/uxvismode.js"></script>
<script type="text/javascript" src="./js/miframe/multidom.js"></script>
<script type="text/javascript" src="./js/miframe/mif.js"></script>but never both.

I updated to your latest code from svn and I am no longer getting errors for my example. They are still leaking according to sIEve despite the above change. Letting you know.

zombeerose
13 Jul 2009, 10:00 AM
I am trying to make the background of the MIF transparent in IE. Based on my search, I have to set the background-color of the body to transparent AND set the ALLOWTRANSPARENCY property of the frame to true. I tried using frameConfig but no luck.

Secondly, I have a MIFP that is the center region in a border layout. The content I am loading into the frame goes past the viewable area. I set autoScroll to true but I'm still not getting any scroll bars.


@hendricd
1) Did you have any suggestions about the allowTransparency flag?
2) I figured out why I have not been getting a load mask over my MIF. Basically, I am extending your MIF Panel and was setting a default loadMask in my extension. However, it was not getting applied. It only works if I specify it within the config of the object. Was this by design?
3) I am still trying to determine why the autoScroll is not being applied to the Ext.ux.ManagedIFrame.Component.

hendricd
13 Jul 2009, 10:18 AM
@hendricd
1) Did you have any suggestions about the allowTransparency flag?
2) I figured out why I have not been getting a load mask over my MIF. Basically, I am extending your MIF Panel and was setting a default loadMask in my extension. However, it was not getting applied. It only works if I specify it within the config of the object. Was this by design?
3) I am still trying to determine why the autoScroll is not being applied to the Ext.ux.ManagedIFrame.Component.

@zombeerose -- Can you please post short code fragments for each of those cases you have so far?

zombeerose
13 Jul 2009, 11:45 AM
Here is a test case. As a side-effect of putting this together, I noticed that the allowTransparency property does get set as long as it's defined in the initial config, which is the same issue I was having.

In the mif-example.js file, you will notice 3 lines of commented config options. Basically everything works if they are uncommented. I would really like to not have to repeat these config options but instead be able to use my "Ext.ux.ExtendedMIF" that is pre-configured.

I am still looking at the scroll issue b/c the test case is very simple but my actual usage still has problems with scrolling.

hendricd
13 Jul 2009, 11:58 AM
Here is a test case. As a side-effect of putting this together, I noticed that the allowTransparency property does get set as long as it's defined in the initial config, which is the same issue I was having.

In the mif-example.js file, you will notice 3 lines of commented config options. Basically everything works if they are uncommented. I would really like to not have to repeat these config options but instead be able to use my "Ext.ux.ExtendedMIF" that is pre-configured.

I am still looking at the scroll issue b/c the test case is very simple but my actual usage still has problems with scrolling.

Thanks,
I'll look at this.

BTW: you need to update to ext-basex 3.5 for the IE leak-fix. ;)

zombeerose
13 Jul 2009, 4:22 PM
Thanks. I grabbed the new basex and I'm getting an error in IE6, line 1567. "Object doesn't support this property or method"

hendricd
13 Jul 2009, 8:12 PM
Thanks. I grabbed the new basex and I'm getting an error in IE6, line 1567. "Object doesn't support this property or method"

@zombeerose --
Download THE latest from both ext-basex and mif 2.0 (both zips have been updated on the Forums and SVN/trunk.) There was a problem with passing base class prototypes on to the nested MIF.Component hosted by MIF.Panel and MIF.Window.

Also, have a look at your revised transparency example here (http://demos.theactivegroup.com/demodesk.html?demo=mif&script=mif-example&debug=1). (It's a start, and IE needs some TLC to finalize transparency.) I'm still not clear what you want to actually be transparent, but go nuts. ;)

decker.net
14 Jul 2009, 1:39 AM
hendricd, watch here

http://x-decker.narod.ru/sample.zip

cherbert
14 Jul 2009, 8:13 AM
Installed RC3. No Errors.

But I am still seeing my DIVS with x-hidden class being displayed during the loading cycle?

hendricd
14 Jul 2009, 8:17 AM
Installed RC3. No Errors.

But I am still seeing my DIVS with x-hidden class being displayed during the loading cycle?

@cherbert -- I'm not following. Where is the markup rendered? Post something?

cherbert
14 Jul 2009, 9:53 AM
This is my application loading.

The above rubbish at the top is a mixture of content in my own hidden divs or is the content being loaded into managediframes. It vanishes after the app has loaded and the app behaves normally. Its just not very tidy seeing that rubbish as the screen loads.

Interestingly it doesn't do this with Safari. I'm using Firefox 3.5. And it does it with Firefox 3.1 too.

My own divs use the built in Ext CSS class x-hidden. It seems like your class is stopping the x-hidden CSS class from functioning correctly.

If I remove your miframe.js the problem goes away.

hendricd
14 Jul 2009, 5:55 PM
This is my application loading.

The above rubbish at the top is a mixture of content in my own hidden divs or is the content being loaded into managediframes. It vanishes after the app has loaded and the app behaves normally. Its just not very tidy seeing that rubbish as the screen loads.

Interestingly it doesn't do this with Safari. I'm using Firefox 3.5. And it does it with Firefox 3.1 too.

My own divs use the built in Ext CSS class x-hidden. It seems like your class is stopping the x-hidden CSS class from functioning correctly.

If I remove your miframe.js the problem goes away.

@cherbert -- Without seeing your start page markup, and assuming your early markup is designed for use with 'renderTo', try using x-hide-[display|visibility|offsets] that matches the default hideMode (:display) of each of your Components.

Are you loading your ext-all.css first in the <head> section (some UA's load things in odd orders)?

What browsers/OS's are affected?

cherbert
15 Jul 2009, 12:56 AM
I have managed to find a workaround but I am pretty sure the problem is still in your code somewhere.

I tracked it down to being when you have a managediframe in a tab. This causes the said tab that contains the iframe to show its individual components being rendered during the page load (as per the screenshot).



new Ext.TabPanel({
region: 'center',
id: 'tabs',
activeTab: 0,
autoDestroy: true,
deferredRender: true,
items: [{
xtype: 'iframepanel',
id: 'tabOpusForum',
title: 'Community',
defaultSrc: 'http://www.businessnetwork.co.uk/forum/',
loadMask: true,
autoScroll:true,
closable:false,
frameConfig: { autoCreate:{ id:'opusForum'}}
}]
})

If I take out the tab item above and manually add it after the tabpanel has rendered everything looks fine during loading.

The behavior suddenly appeared when you released RC2. It didn't do it with RC1.

hendricd
15 Jul 2009, 5:35 AM
I have managed to find a workaround but I am pretty sure the problem is still in your code somewhere.

I tracked it down to being when you have a managediframe in a tab. This causes the said tab that contains the iframe to show its individual components being rendered during the page load (as per the screenshot).



new Ext.TabPanel({
region: 'center',
id: 'tabs',
activeTab: 0,
autoDestroy: true,
deferredRender: true,
items: [{
xtype: 'iframepanel',
id: 'tabOpusForum',
title: 'Community',
defaultSrc: 'http://www.businessnetwork.co.uk/forum/',
loadMask: true,
autoScroll:true,
closable:false,
frameConfig: { autoCreate:{ id:'opusForum'}}
}]
})If I take out the tab item above and manually add it after the tabpanel has rendered everything looks fine during loading.

The behavior suddenly appeared when you released RC2. It didn't do it with RC1.

@cherbert -- Diagnosis will be difficult without a working sample or some page markup to see what's up....:-?

wiznia
15 Jul 2009, 8:32 AM
I just downloaded the RC3 version and I'm trying it in an application with Ext3 final.
I think there's a problem with the overrides made to Ext.Element because I'm getting an error (not in a miframe but in the miframe code) when getVisibilityMode calls data(dom, VISMODE) and dom is null (I still don't know why it's null, maybe it's not rendered, maybe it's already destroyed).

I don't understand why there are 2 places for overrides, at the begining of the code with an Ext.override(El, ... with El being Ext.Element, that overrides getVisibilityMode, setVisible and isVisible. And then with El.addMethods({... that overrides those same methods and much more. It seems that there is duplicated code here.
Besides I see there are a lot of overrides (or simply adding properties/functions) to Ext.Element (visibilityCls, NOSIZE, ASCLASS, addMethods), is this necessary? Can't we put all this in the ux classes?? (I know that some override is necessary but all of it?)

dhrystones
21 Jul 2009, 1:37 AM
I am also tryng to use it with Ext 3.0 Final and it dos not seem to work, it leaves the loading mask in place.

zombeerose
28 Jul 2009, 1:00 PM
I have another weird case regarding applying a style sheet to the document that is loaded within the MIF. I have attached a test case.

When you load the example initially, a local style sheet is applied to the document and the font appears red & bold. However, if you click on the Link to Self, the page is reloaded within the MIF and the code is executed but the style sheet does not appear to have any effect.

Any ideas?

zombeerose
28 Jul 2009, 2:45 PM
Yet again another IE6 issue...

I have a MIF inside a tab panel that is initially disabled. When you first click on the MIF tab after it is enabled, the MIF does not resize correctly. I have to click back on the first tab then the MIF again to get the layout corrected.

Attached is a test case. Load in IE6, click the button, click on the MIF tab.

For my application, deferredRender must be false.

dhrystones
29 Jul 2009, 12:55 AM
I am also tryng to use it with Ext 3.0 Final and it dos not seem to work, it leaves the loading mask in place.


please ignore sorted it out.

pico
29 Jul 2009, 2:15 AM
Hello, I think I've found an issue on ie(8, maybe less) by using quicktips and mif (only with 3.0, it works with 2.+).

I've used an ext.toolbar for my menu and added tooltips on it.
This menu is the north region of a viewport, and the center region is my MIF.
Then when I load a frame in the mif (only occures after loading) and only if I've init the QuickTips, then I can't click anymore on my menu, the submenu isn't showed either.

In attachment the source of my example.

I hope this can help...

hendricd
29 Jul 2009, 12:01 PM
Hello, I think I've found an issue on ie(8, maybe less) by using quicktips and mif (only with 3.0, it works with 2.+).

I've used an ext.toolbar for my menu and added tooltips on it.
This menu is the north region of a viewport, and the center region is my MIF.
Then when I load a frame in the mif (only occures after loading) and only if I've init the QuickTips, then I can't click anymore on my menu, the submenu isn't showed either.

In attachment the source of my example.

I hope this can help...
@pico -- Have you tried calling
Ext.QuickTips.init(); before creating Components?

pico
29 Jul 2009, 1:18 PM
yes, unfortunately it doesn't work whenever i init the quicktips.

I also use custom tooltips to prevent this bug but that's less optimized i think :
new Ext.ToolTip({ target: Ext.get('the_menu'),...

hendricd
30 Jul 2009, 5:10 AM
I have another weird case regarding applying a style sheet to the document that is loaded within the MIF. I have attached a test case.

When you load the example initially, a local style sheet is applied to the document and the font appears red & bold. However, if you click on the Link to Self, the page is reloaded within the MIF and the code is executed but the style sheet does not appear to have any effect.

Any ideas?


Yet again another IE6 issue...

I have a MIF inside a tab panel that is initially disabled. When you first click on the MIF tab after it is enabled, the MIF does not resize correctly. I have to click back on the first tab then the MIF again to get the layout corrected.

Attached is a test case. Load in IE6, click the button, click on the MIF tab.

For my application, deferredRender must be false.

@zombeerose -- Fixed. Try the latest build from SVN. I put your page up here (http://demos.theactivegroup.com/demodesk.html?demo=mif&script=styleswap)so you could see both issues at play.

hendricd
30 Jul 2009, 5:30 AM
Hello, I think I've found an issue on ie(8, maybe less) by using quicktips and mif (only with 3.0, it works with 2.+).

I've used an ext.toolbar for my menu and added tooltips on it.
This menu is the north region of a viewport, and the center region is my MIF.
Then when I load a frame in the mif (only occures after loading) and only if I've init the QuickTips, then I can't click anymore on my menu, the submenu isn't showed either.

In attachment the source of my example.

I hope this can help...

@pico -- Examine this demo (http://demos.theactivegroup.com/demodesk.html?demo=mif&script=mifsimple) (built with the latest MIF 2.0 from SVN). It has a Toolbar with tooltips and things appear normal on IE and Fx.

zombeerose
3 Aug 2009, 7:27 AM
@hendricd - I grabbed your changes and played with the demo. The style issue is fixed but I found a discrepancy between your example and mine regarding the tabs. You added
tab.setActiveTab(c); to the button handler, which makes the test case work. However, I don't want to automatically activate a tab just because I enable it. If you disable this line, and run the example in IE6, the issue is still there.

hendricd
3 Aug 2009, 8:35 AM
@hendricd - I grabbed your changes and played with the demo. The style issue is fixed but I found a discrepancy between your example and mine regarding the tabs. You added
tab.setActiveTab(c); to the button handler, which makes the test case work. However, I don't want to automatically activate a tab just because I enable it. If you disable this line, and run the example in IE6, the issue is still there.

@zombeerose -- Since rendering is deferred until tab activation in your desired config, use defaultSrc in the MIF item config, so it gets loaded immediately after it's rendered:



var tab = new Ext.TabPanel({
height: 300,
width: 300,
activeTab: 0,
renderTo : Ext.getBody(),
deferredRender: false,
items: [{
buttons: [{
text: 'Enable MIF',
handler: function(b) {

Ext.getCmp('mif-tab').enable();
}
}],
html: 'Tab 1',
title: 'Tab 1'
},{
disabled: true,
id: 'mif-tab',
title: 'MIF',
xtype: 'iframepanel',
autoScroll : true,
defaultSrc : 'demos/mif/style.html'
}]
});
I just modified the online demo to reflect this.

zombeerose
3 Aug 2009, 9:15 AM
I'm not sure why your demo is working but I can't get the same results in IE6. I am still looking.

However, the button handler must load the mif with a new url. I can't use defaultSrc because I don't know what the user wants up-front.

Basically, the user selects an item in a grid on tab 1, which then loads the remaining tabs with secondary info including a preview in the mif.

hendricd
3 Aug 2009, 9:30 AM
I'm not sure why your demo is working but I can't get the same results in IE6. I am still looking.

However, the button handler must load the mif with a new url. I can't use defaultSrc because I don't know what the user wants up-front.

Basically, the user selects an item in a grid on tab 1, which then loads the remaining tabs with secondary info including a preview in the mif.

The setSrc method should only be used to set/change the URL after the Component is rendered. Until it is, defualtSrc rules. Try it this way:



var tab = new Ext.TabPanel({
height: 300,
width: 300,
activeTab: 0,
renderTo : Ext.getBody(),
deferredRender: false,
items: [{
buttons: [{
text: 'Enable MIF',
handler: function(b) {
var MIF = Ext.getCmp('mif-tab');
MIF.enable();
MIF.rendered ? MIF.setSrc(someUrl) : (MIF.defaultSrc = someUrl);
}
}],
html: 'Tab 1',
title: 'Tab 1'
},{
disabled: true,
id: 'mif-tab',
title: 'MIF',
xtype: 'iframepanel',
autoScroll : true,
listeners : {
exception : function(frame, exc){
(frame.ownerCt && frame.ownerCt.rendered) ||
alert('Not rendered yet?' + exc.message);
}
}

}]
});

zombeerose
3 Aug 2009, 10:12 AM
Unfortunately, setSrc is not sufficient because unless I am missing something, it does not allow me to pass parameters.

I will see if I can rework things a bit so it will work correctly in I-hate-E

hendricd
3 Aug 2009, 10:49 AM
Unfortunately, setSrc is not sufficient because unless I am missing something, it does not allow me to pass parameters.

I will see if I can rework things a bit so it will work correctly in I-hate-E

Huh?

Both the setSrc method and defaultSrc cfg property expect a url-encoded string or a function that returns the same:

MIF.setSrc(App.buildUrl);
or
defaultSrc : 'http://extjs.com/forum/newreply.php?do=newreply&p=367861'

zombeerose
3 Aug 2009, 11:40 AM
I understand your point. All I am saying is that the setSrc method is not nearly as flexible as load, which is really all I need for my xhr call.

chiphi13
3 Aug 2009, 6:36 PM
Api: Ext JS 3.0+
MIF V2.0 RC3.

Browser Problem: FF 3.X
I am currently using iframewindow to open documents in a desktop environment. The iframewindows are created as followed:



win = desktop.createWindow({
id: 'win-' + unique,
layout: 'fit',
title: Ext.util.Format.ellipsis(title, 16),
width: winWidth,
height: winHeight,
iconCls: 'bogus',
shim: false,
animCollapse: false,
defaultSrc: link,
listeners: {
domready: function(frameEl){
.....
},
documentloaded: function(frameEl){
........
}
}
}, Ext.ux.ManagedIFrame.Window);


The window is created in the createWindow method:


var win = new (cls||Ext.Window)(
Ext.applyIf(config||{}, {
manager: windows,
minimizable: true,
maximizable: true
})
);
win.render(desktopEl);


The window opens up properly. The issue I am having is when the document in the window is submitted thru a post, a script is sent back to close the window.

The code that is run is the following:


updateAfterSaveOrClose= function(windowId,frmType,docId){
//get the cache obj
var app = window.parent.MyDesktop;
var desktop = window.parent.MyDesktop.getDesktop();
var win = desktop.getWindow(windowId.toLowerCase());
var frm = win.setSrc(url);
}

}
}


The problem is that the iframe in the Ext.window does not changed the src of the page. When I have firebug enabled, the code works properly and the page refreshes, but when firebug is disabled, it no longer works.

I have also tried


var frm = win.getFrame();
frm.reset(url);


But, this doesn't appear to refresh either. The window refreshes properly in IE. Is there another way to refresh the content of the iframe once the document has been submitted?

danderson
4 Aug 2009, 11:35 AM
I have a scrolling bug which i have replicated in an attached file. I'm using a viewport layout and have added a MIF tab in the center region pointing to lipsum.com (just for giggles. any url should do). The issue arises when resizing the south panel using the splitter bar. If the south panel is at it's minSize (either by default or by resizing) and the splitter bar is grabbed again in an attempt to further reduce the height of the south panel, the contents of the MIF are 'locked' for lack of a better term. In this state, scrolling is broken, and links in the MIF are unavailable.

This also appears to be the case if the south panel is at it's maxSize and an attempt is made to increase it's height.

any thoughts?
thanks.

hendricd
4 Aug 2009, 12:29 PM
I have a scrolling bug which i have replicated in an attached file. I'm using a viewport layout and have added a MIF tab in the center region pointing to lipsum.com (just for giggles. any url should do). The issue arises when resizing the south panel using the splitter bar. If the south panel is at it's minSize (either by default or by resizing) and the splitter bar is grabbed again in an attempt to further reduce the height of the south panel, the contents of the MIF are 'locked' for lack of a better term. In this state, scrolling is broken, and links in the MIF are unavailable.

This also appears to be the case if the south panel is at it's maxSize and an attempt is made to increase it's height.

any thoughts?
thanks.

@danderson -- Does it behave that way here (http://demos.theactivegroup.com/demodesk.html?demo=mif&script=treenav), when you resize the West region? (That site uses the LATEST SVN builds for EXT and MIF).

EDIT: Short answer it does do it there as well, because the Splitter and adjoining panels do not fire a resize event (which removes the transparent mask) unless the size of the adjacent region is changed with call to setSize which only happens when the drag ends (if something actually changed), but it does always fire the beforeresize event (which places the transparent mask) as soon as mousedown begins.
It's a pretty narrow edge-case, but lemme think about possible solutions... (perhaps force the shim off after 5 seconds?) ;)

danderson
4 Aug 2009, 1:40 PM
Doug,

I apologize. I posted this in the Ext JS 3.0 forum instead of the 2.0 forum. I'm not sure if this makes a difference or not. Also, i did not see the issue in the link you posted. all the scrollbars worked fine for me after the various resizes.

thanks.
dave

hendricd
4 Aug 2009, 1:49 PM
Doug,

I apologize. I posted this in the Ext JS 3.0 forum instead of the 2.0 forum. I'm not sure if this makes a difference or not. Also, i did not see the issue in the link you posted. all the scrollbars worked fine for me after the various resizes.

thanks.
dave

@Dave -- MIF 2.0 binds to the same 'resize' events (in all surrounding regions) for Ext 3 as it does for MIF 1.x on Ext 2.x.

And I was able to duplicate that on the MIF 2 release on the demo site by just clicking the splitter (at min-Panel size) and releasing the mousebutton and the resize event (required to clear the transparent mask) is never fired since the mouse is not moved.

Again, narly edge-case. ;)

danderson
11 Aug 2009, 1:45 PM
Doug,

what is the purpose of the transparent mask in this instance?

hendricd
11 Aug 2009, 2:06 PM
Doug,

what is the purpose of the transparent mask in this instance?


See this FAQ (http://extjs.com/learn/w/index.php?title=ManageIframe:Manual:Frame_FAQ#I_cannot_seem_to_drag_anything_over_a_MIF.2FMIFPanel_body._The_mouse_cursor_just_stops_at_the_edge_of_the_frame.).

boonkerz
11 Aug 2009, 4:21 PM
Hello

I use this in an Tabpanel.

I use in my Code an autoScroll yes for the tabpanel so i can scroll dynamic loaded other content.

But when i use the iframe then i have 2 scrollbars for height.

hendricd
11 Aug 2009, 4:50 PM
Hello

I use this in an Tabpanel.

I use in my Code an autoScroll yes for the tabpanel so i can scroll dynamic loaded other content.

But when i use the iframe then i have 2 scrollbars for height.

@boonkerz -- Cannot say what the problem is without seeing your layout strategy for it.

boonkerz
12 Aug 2009, 6:42 AM
Ah it works my conf are bad :)

mailme_gx
13 Aug 2009, 10:33 PM
Hi all

I have come across some peculiar behaviour in IE 7 (works in FF).

As this is somewhat a large application I cannot post code but will try my best.

I have a borderlayout , the center contains a gridpanel the south contains a series of nested panels one of which is an iframe (mif), when selecting a row in the grid a new panel is created which contains the MIF using up/down arrows on the grid creates a new panel.

the problem is when the MIF is loaded the grid looses focus and arrow keys no longer work, I have to click the grid again.

here are some snippits of code:

creation of MIF

var mif = new Ext.ux.ManagedIFrame.Panel({ flex: 1, autoScroll: true, defaultSrc: 'www.google.com' });
var p = new Ext.Panel({ layout: { type:'vbox', align:'stretch' }, items: [ actions, details, mif] });

container.removeAll();
container.add(p);
container.doLayout();


GX

mailme_gx
14 Aug 2009, 2:51 AM
Hi All not to worry I found a fix. Quite simple really hidden components cant gain focus ;)


var mif= new Ext.ux.ManagedIFrame.Panel({ flex: 1, autoScroll: true, hidden: true, defaultSrc: App.oUtils.getRAHPath('DATAHANDLER', 'GETINTERACTIONDETAILS', {id: id, type_id: type_id, only_email_body: true}) });
mif.addListener(' documentloaded ', function() {
this.show();
}, body);



However neither does the document load :s -- any suggestions??

GX


Hi all

I have come across some peculiar behaviour in IE 7 (works in FF).

As this is somewhat a large application I cannot post code but will try my best.

I have a borderlayout , the center contains a gridpanel the south contains a series of nested panels one of which is an iframe (mif), when selecting a row in the grid a new panel is created which contains the MIF using up/down arrows on the grid creates a new panel.

the problem is when the MIF is loaded the grid looses focus and arrow keys no longer work, I have to click the grid again.

here are some snippits of code:

creation of MIF

var mif = new Ext.ux.ManagedIFrame.Panel({ flex: 1, autoScroll: true, defaultSrc: 'www.google.com' });
var p = new Ext.Panel({ layout: { type:'vbox', align:'stretch' }, items: [ actions, details, mif] });

container.removeAll();
container.add(p);
container.doLayout();
GX

niterain
16 Aug 2009, 2:01 PM
Hi everyone, & Hendricd:

Was trying to follow the code in your WestSide TreeNav Demo, where are you creating the object Demo object.

Because I am trying to reconstruct it, and I am getting a:

Demo is not defined
On Line 68

Demo.MIFTreeNav || Demo.MIFTreeNav = Ext.extend( Demo.Window, {\n

niterain
16 Aug 2009, 2:46 PM
Firebug is showing no errors, but there is an error behind that window in a dialog box saying Syntax error.

hendricd
17 Aug 2009, 4:05 AM
Hi all

I have come across some peculiar behaviour in IE 7 (works in FF).

As this is somewhat a large application I cannot post code but will try my best.

I have a borderlayout , the center contains a gridpanel the south contains a series of nested panels one of which is an iframe (mif), when selecting a row in the grid a new panel is created which contains the MIF using up/down arrows on the grid creates a new panel.

the problem is when the MIF is loaded the grid looses focus and arrow keys no longer work, I have to click the grid again.

here are some snippits of code:

creation of MIF

var mif = new Ext.ux.ManagedIFrame.Panel({ flex: 1, autoScroll: true, defaultSrc: 'www.google.com' });
var p = new Ext.Panel({ layout: { type:'vbox', align:'stretch' }, items: [ actions, details, mif] });

container.removeAll();
container.add(p);
container.doLayout();
GX

@GX-- What you are experiencing are the side-effects of this (http://extjs.com/forum/showthread.php?p=349543#post349543) on IE. However, I just added a new config option for the MIF components that will permit control over this 'feature' for IE.

focusOnLoad : false

You'll likely wish to set this to false (so your grid retains focus), using the very latest version of MIF from SVN.

mailme_gx
17 Aug 2009, 4:27 AM
Thanks hendricd

Once I updated from svn it worked fine.. :D

Thank you. your help is appriciated

GX

Dumbledore
26 Aug 2009, 8:48 AM
Hi,

i have a problem with th load function(). I make a small test-script (adapted form the FAQ).
When i call window.myload() from the firebug commandline, the iFrame will reset, but not loaded. Where is my mistake?

Bye, Dumbledore


Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = 'lib/js/ext/resources/images/default/s.gif';
var MIF = new Ext.ux.ManagedIFrame.Panel({
border: false,
bodyBorder: false,
defaultSrc: 'http://www.google.de',
listeners: {
'domready': function(frame){
var fbody = frame.getBody();
var w = Ext.getCmp('myFrameWin');
if (w && fbody) {
//calc current offsets for Window body border and padding
var bHeightAdj = w.body.getHeight() - w.body.getHeight(true);
var bWidthAdj = w.body.getWidth() - w.body.getWidth(true);
//Window is rendered (has size) but invisible
w.setSize(Math.max(w.minWidth || 0, fbody.scrollWidth + w.getFrameWidth() + bWidthAdj), Math.max(w.minHeight || 0, fbody.scrollHeight + w.getFrameHeight() + bHeightAdj));
//then show it sized to frame document
w.show();
}
}
}
});
var windowFrame = new Ext.Window({
title: name,
width: 400, //give it something to start with until the frame renders
height: 600,
hideMode: 'visibility',
id: 'myFrameWin',
hidden: true, //wait till you know the size
title: 'Sized To Frame Document',
plain: true,
constrainHeader: true,
minimizable: true,
ddScroll: false,
border: false,
bodyBorder: false,
layout: 'fit',
plain: true,
maximizable: true,
buttonAlign: 'center',
items: MIF
});
windowFrame.render(Ext.getBody());

windowFrame.show();

window.myload = function(){
MIF.load({
url : 'http://www.heise.de',
//callback: yourFunction,
//scope: yourObject, // optional scope for the callback
discardUrl: false,
nocache: false,
text : 'Loading...',
timeout: 30,
scripts: false
})
}

hendricd
26 Aug 2009, 8:55 AM
@Dumbledore -- Try setting a callback function on the load request. Success?

MIF.load uses an Ajax request to load the content, so it will fail on requests that are not "same-origin".

Dumbledore
26 Aug 2009, 9:19 AM
@Dumbledore
MIF.load uses an Ajax request to load the content, so it will fail on requests that are not "same-origin".

Ok, thats sounds logical for me..

Is it possible to load the iFrame via setSrc and filter some scripts. My problem is i want to load a website with soma javascripts on it. This website contains a IE6 png-fix (http://www.dillerdesign.com/experiment/DD_belatedPNG/).

And when this script fire, my content is empty. I have a listener like:



'documentloaded' : function(frame){
doc = frame.getFrameDocument();

alert("pause");


this.setIconClass('webbrowser');
},

When the Alert-Box appear, the content is fine, after that it seems that the png-fix from this site will run and my content is complety empty (only in IE, Firefox runs fine).

Any ideas?

Bye Dumbledore

Dumbledore
26 Aug 2009, 9:36 AM
@Dumbledore
MIF.load uses an Ajax request to load the content, so it will fail on requests that are not "same-origin".

Thats sounds logical for me...

Is it possible to modified the content when loading via setSrc? I try to loading a page containing a special function for IE (pngfix - http://www.dillerdesign.com/experiment/DD_belatedPNG/.

In firefox all is fine, in IE the page is loaded and when the pngfix fired, the page-content is empty.

My only idea is to load manual the content via a proxy script, filter the pngfix-call and update the iframe.content via update()

Or is there a nicer way?


Bye, Dumbledore

hendricd
26 Aug 2009, 10:06 AM
You'll only be able to add scripts to a previously loaded page if it's a "same-origin" frame (the MIF's domready event fires).

If it is, MIF has an execScript method:


MIF.on('domready', function(frame){

Ext.isIE && Ext.Ajax.request({
url: 'fixes/DD_belatedPNG_0.0.8a.js' //load from your site
success : function(response){
frame.execScript(response.responseText);
}

});You cannot touch external site documents.

ish90an
29 Aug 2009, 5:51 AM
I cant get this extension to work. I am using FF3 and ExtJS3 and have included all the files but I keep getting an error like "uncaught exception: MIF 2.0 requires multidom support".
Here's the code from index.php:

<!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>Toolbar with Menus</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script><script type="text/javascript">_uacct = "UA-1396058-1";urchinTracker();</script>
<!-- LIBS -->
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="ext/ext-all.js"></script>

<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="miframe/mif.js"></script>
<script type="text/javascript" src="miframe/multidom.js"></script>

<!-- Common Styles for the examples -->
</head>
<body>
<div id="toolbar"></div>
<h1>Toolbar with Menus</h1>
<br /><br /><br /><br /><br />
</body>
</html>

Here's main.js:


Ext.onReady(function(){
var MIF = new Ext.ux.ManagedIFrame.Component({
width : 100,
height : 70,
defaultSrc : 'http://www.extjs.com'});
});
I cant see what I am doing wrong, could you please help me?

});

hendricd
29 Aug 2009, 5:59 AM
<script type="text/javascript" src="miframe/uxvismode.js"></script>
<script type="text/javascript" src="miframe/multidom.js"></script>
<script type="text/javascript" src="miframe/mif.js"></script>
or, from the zip's build/:

<script type="text/javascript" src="miframe/miframe-debug.js"></script>(has all three in a single file).

disizben
2 Sep 2009, 4:21 AM
Hi hendricd,

Since I updated Ext 3.0 and Ext.ux.ManagedIfame 2.0 RC3 (R53), I noticed a performance problem in one of my applications.

I launched the Firebug profiler and it seems that GS function is called more than 6,000 times, and takes more than 4 seconds to run, which represents 50% of the overall execution of JavaScript.

My page has 35 ManagedIframePanels (I know that's a lot) but with previous versions of Ext and Ext.ux.ManagedIframe, JavaScript execution was much faster!

Do you know why this function takes so much time!?

Thanks.

hendricd
2 Sep 2009, 9:08 AM
Hi hendricd,

Since I updated Ext 3.0 and Ext.ux.ManagedIfame 2.0 RC3 (R53), I noticed a performance problem in one of my applications.

I launched the Firebug profiler and it seems that GS function is called more than 6,000 times, and takes more than 4 seconds to run, which represents 50% of the overall execution of JavaScript.

My page has 35 ManagedIframePanels (I know that's a lot) but with previous versions of Ext and Ext.ux.ManagedIframe, JavaScript execution was much faster!

Do you know why this function takes so much time!?

Thanks.

@disizben -- As you've likely noticed, Element.getStyle(GS) is the BUSIEST function in the entire framework.

You didn't say what Ext 3.0.x version you were on, but several Layout enhancements went into the latest Ext SVN builds (which would impact the getStyle call frequency).

Try the latest MIF SVN build as well (some improvement will be likely there as well).

I'll be releasing the official MIF 2.0 release in the next few days.

disizben
3 Sep 2009, 7:13 AM
@disizben -- As you've likely noticed, Element.getStyle(GS) is the BUSIEST function in the entire framework.

You didn't say what Ext 3.0.x version you were on, but several Layout enhancements went into the latest Ext SVN builds (which would impact the getStyle call frequency).

Try the latest MIF SVN build as well (some improvement will be likely there as well).

I'll be releasing the official MIF 2.0 release in the next few days.

Well, I've just tested my application without any MIF, and rendering still takes so much time... as you said the problem must come from Ext 3.0.0 version :( and I don't have access to the SVN repository to get the latest builds :(

Sorry hendricd for accusing your great extension :s

alessandro
3 Sep 2009, 7:52 AM
Hi all.
We have two ManagedIframe.
we would like to execute function1 inside iframe1 from frame2, and read/set variable1 from iframe2.

Is that possibile?
Both iframe are on the same domain.

From iframe2 we have:



top.Ext.getCmp('contentPanel').mytest();


and in iframe1 we have:



function test() {
alert("This is a test");
}


but function test is not called properly from iframe2.

What can we do?

Thank you.

hendricd
3 Sep 2009, 9:27 AM
Hi all.
We have two ManagedIframe.
we would like to execute function1 inside iframe1 from frame2, and read/set variable1 from iframe2.

Is that possibile?
Both iframe are on the same domain.

From iframe2 we have:



top.Ext.getCmp('contentPanel').mytest();
and in iframe1 we have:



function test() {
alert("This is a test");
}
but function test is not called properly from iframe2.

What can we do?

Thank you.
@alessandro--

First, fix this:



function test() { [ var | window.]test = function() {
alert("This is a test");
}
Then,



top.Ext.getCmp('contentMIFPanel').getFrameWindow().test();
the test() function is resolvable (anonymous functions are not!) in each frame's window context.

alessandro
3 Sep 2009, 9:54 AM
function test() { [ var | window.]test = function() {
alert("This is a test");
}
top.Ext.getCmp('contentMIFPanel').getFrameWindow().test();


Thank you very much.
Now it works.
But I have another two questions:
1) what will change with or without "var" before the function declaration? I'm not a JS expert, but actually the function can be called even without the "var" before.

2) I have another similiar problem: a variabile named "myvar" is not visible from another iframe.
I've tried:


var myvar = 'test';


and then (from another iframe):


alert(top.Ext.getCmp('contentPanel').getFrameWindow().myvar);


Should I even put that var in "window" context? If so, i'll have to rewrite much code that are currently using that variable.

Stju
3 Sep 2009, 3:57 PM
HI!
I am trying to implement functionality like in regular browser, i.e refresh, back and forward buttons..
Unfortunately setSrc() method sets back to first source assigned to that iframe, same withsetLocation()..
As seen from documentation there are no methods to directly call iframe history back and forward.
Any advice would be great!
Stju

alessandro
4 Sep 2009, 4:11 AM
Use the following code:



var MIF = top.Ext.getCmp('id_MIF');
MIF.submitAsTarget({
url: 'http://www.google.it',
method: 'GET'
});


to refresh, try without any arguments, like this:



var MIF = top.Ext.getCmp('id_MIF').submitAsTarget();

alessandro
4 Sep 2009, 4:13 AM
I'm generating the following error but I'm unable to solve:


missing ; before statement
var window.countDomini = function(e) {\n


I have the following code:



<script>
Ext.onReady(function(){

var window.countDomini = function(e) {
statusZona = e.get('statusZona');

[ ... ]
};

[ ... ]

});
</script>

hendricd
4 Sep 2009, 4:57 AM
HI!
I am trying to implement functionality like in regular browser, i.e refresh, back and forward buttons..
Unfortunately setSrc() method sets back to first source assigned to that iframe, same withsetLocation()..
As seen from documentation there are no methods to directly call iframe history back and forward.
Any advice would be great!
Stju

@Stju -- MIF does not provide such methods because they are already available via the the frame's window object (if it permits access to it from the parent page in the first place -- it may not !):


myMIFPanel.getFrameWindow().back();
myMIFPanel.getFrameWindow().history.forward(); //either may be restricted

I'm generating the following error but I'm unable to solve:


missing ; before statement
var window.countDomini = function(e) {\n
I have the following code:


@alessandro -- /:)
I was afraid you would mis-interpret my meaning with this:


function test() { [ var | window.]test = function() {
alert("This is a test");
}
top.Ext.getCmp('contentMIFPanel').getFrameWindow().test();var window.anything is invalid. window is the global object.

Inside Ext.onReady or any other function, you must declare the "global namespace" of your function/variable as simply:


<script>
// this == window here.
var someOtherValue = 3500;

Ext.onReady(function(){

window.countDomini = function(e) {
statusZona = e.get('statusZona');
[ ... ]
};
window.someOtherValue++; //now it's == 3501

});
</script>Use Firebug : Dom Tab and play with it until you understand it. ;)

alessandro
4 Sep 2009, 5:58 AM
Thank you.
Now it works.
Another question:

let's suppose that we have a function called "test".

Inside that function I have a global variable "imported" from outside function's scope, like "var myvar"



var myvar = 'hello word';
window.test = function() {
var myvar;
alert(myvar);
}

Can I recall that function from another iframe, without loosing the scope for myvar?
I would like to execute function inside frame1 from frame2 like as I'm running that function directly from frame1.

bkraut
4 Sep 2009, 7:43 AM
Hi,

I managed to run ManagedIFrame, but ocasionally I get this erro in FireFox:

Permission denied to call method Location.toString



Permission denied to call method Location.toString
anonymous()miframe-debug.js (line 502)
anonymous()miframe-debug.js (line 1067)
anonymous()miframe-debug.js (line 1767)
anonymous()miframe-debug.js (line 1846)
anonymous()miframe-debug.js (line 1719)
anonymous()miframe-debug.js (line 1946)
anonymous()miframe-debug.js (line 1922)
anonymous()


Here is my index.html head includes




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




and function where I open a new Window with IFrame:




treeNodeDblClick: function(node, e) {

var win = new Ext.Window({
title: 'Report',
width: 800,
height: 600,
maximizable: true,
closable: true,
border: false,
layout: 'fit',
items: [{
xtype: 'iframepanel',
border: false,
width: 800,
height: 600,
loadMask: {
msg:"Loading..."
},
defaultSrc : 'http://www.google.com/'
}]
});

win.show();
},



any help appreciated.

hendricd
4 Sep 2009, 7:51 AM
@bkraut -- That is to be expected with Firebug running and its Script: 'Break on All Errors' setting on!

Warning: You have no idea what an external domain page might do to your parent (hosting) page. Expect the unexpected (framebusting, snooping at parent.location.href), and resist using them.

alessandro
4 Sep 2009, 8:15 AM
Is possibile to use a loadMask with "submitAsTarget" ?

hendricd
4 Sep 2009, 9:16 AM
Is possibile to use a loadMask with "submitAsTarget" ?

Yes, RC3 and later, does attempt to render the loadMask if you have it enabled.

But, whether it's visible or not depends on what you are returning to the frame (<OBJECTS>, <EMBEDS> are windowed controls are not true DOM elements and may render over all else on the page, making you think the loadMask isn't working.) B)

Stju
5 Sep 2009, 5:27 PM
None of the methods worked..


MIF.getFrameWindow().location.reload(true);




MIF.getFrameWindow().back();




MIF.getFrameWindow().history.forward();


All of them are giving me Permission denied :-?

andynuss
9 Sep 2009, 7:41 AM
Hi,

I'm using this extension to load xhtml pages from a database which have relative links to images and css files. My question is the issue with setSrc() function. When I first load the panel, the defaultSrc will be about:blank. Then based on what the user does with the various navigations, I will call setSrc(). What happens if there is a 2 second delay in getting the page from the database, with all of its dependencies, and the user clicks the next page button several times, causing me to call setSrc() again and again(). On approach is that if rendered is false, I just defer the setSrc() until true, but this has the problem that a frustrated user would queue several pages by clicking repeatedly on forward.

Andy

orugo
9 Sep 2009, 9:21 AM
I've found this "bug" using firebug. I have something like this:

<iframe id="ext-gen55" class=" ux-mif" frameborder="0" name="ext-gen55" style="overflow: auto;" src="editor/index.html"></iframe>
<noframes>Inline frames are NOT enabled/supported by your browser.</noframes>

<img id="ext-gen56" class="ux-mif-shim " galleryimg="no" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>

When i click in a border to resize the class get this: class="ux-mif-shim ux-mif-shim-on" . When i do a resize, it get's back to "ux-mif-shim " but if i just clicked and NOT resize (i mean, i keep the same original size) it keeps "ux-mif-shim ux-mif-shim-on" and the frame becomes unavailable until y resize the border again.

I run Ext.get('ext-gen56').removeClass('ux-mif-shim'); but i think that's not a good solution. Am i doing something wrong? or it's just a bug?

Thanks a lot!

bkraut
9 Sep 2009, 1:22 PM
@dubrovsky -- The only way to trap a catastrophic server failure like that (and using an iframe to host the page) is with an Ajax call to populate the frame with the server's entire page response. In other words, use autoLoad instead of defaultSrc.

Then you have trappable control over the server failure:



var tab = tabpanel.add({
xtype:'iframepanel'
,title: 'CIM/SMGS'
,closable: true
,cls:'x-panel-body'
,loadMask:{msg:"Loading..."}
,autoLoad: {
url : 'Smgs_create.do',
params: { task : 'create' },
scripts : true,
method : 'GET',
callback : function(el, success, response, options){
//sent back HTTP status 50x?
if(!success){ return complain( response.status ); }
}
});
However, the trade-off is you'll likely need to use absolute URL's in your child page's script/link tags.


How can you resubmit with another url but with the same parameters?
For example - if you are using reporter, I'd like to change render type (PDF, RTF)..

hendricd
9 Sep 2009, 1:45 PM
None of the methods worked..


MIF.getFrameWindow().location.reload(true);


MIF.getFrameWindow().back();


MIF.getFrameWindow().history.forward();
All of them are giving me Permission denied :-?

@Stju -- As the Error indicates, you CANNOT access a frame document AT ALL for a page loaded in the frame from a foreign domain. That action violates the browsers' "same-origin" policy.



Hi,

I'm using this extension to load xhtml pages from a database which have relative links to images and css files. My question is the issue with setSrc() function. When I first load the panel, the defaultSrc will be about:blank. Then based on what the user does with the various navigations, I will call setSrc(). What happens if there is a 2 second delay in getting the page from the database, with all of its dependencies, and the user clicks the next page button several times, causing me to call setSrc() again and again(). On approach is that if rendered is false, I just defer the setSrc() until true, but this has the problem that a frustrated user would queue several pages by clicking repeatedly on forward.

Andy

@andynuss -- It sounds like you could disable your 'next' button until the current page loaded by the frame (the one they are acting on via the setSrc method) raises the 'documentloaded' event.

That would prevent all the "thrashing" you are concerned about. :-?



I've found this "bug" using firebug. I have something like this:

<iframe id="ext-gen55" class=" ux-mif" frameborder="0" name="ext-gen55" style="overflow: auto;" src="editor/index.html"></iframe>
<noframes>Inline frames are NOT enabled/supported by your browser.</noframes>

<img id="ext-gen56" class="ux-mif-shim " galleryimg="no" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="/>

When i click in a border to resize the class get this: class="ux-mif-shim ux-mif-shim-on". When i do a resize, it get's back to "ux-mif-shim " but if i just clicked and NOT resize (i mean, i keep the same original size) it keeps "ux-mif-shim ux-mif-shim-on" and the frame becomes unavailable until y resize the border again.

I run Ext.get('ext-gen56').removeClass('ux-mif-shim'); but i think that's not a good solution. Am i doing something wrong? or it's just a bug?

Thanks a lot!

@orugo -- This is a known problem. MIF relies on the the 'resize' event of surrounding border regions. If the splitter is not moved the resize event is never fired.

I've yet to safely find a way to guess (some timeout ? ) that something like that occurred.
Ideas? I'm all ears. :-?

hendricd
9 Sep 2009, 1:47 PM
How can you resubmit with another url but with the same parameters?
For example - if you are using reporter, I'd like to change render type (PDF, RTF)..

MIF also has a load method (which uses the same options signature as autoLoad). ;)

mystix
9 Sep 2009, 6:32 PM
@orugo -- This is a known problem. MIF relies on the the 'resize' event of surrounding border regions. If the splitter is not moved the resize event is never fired.

I've yet to safely find a way to guess (some timeout ? ) that something like that occurred.
Ideas? I'm all ears. :-?

how about storing/checking splitter position on mousedown/mouseup?
would that help?

dusoo
9 Sep 2009, 11:59 PM
Can you please help me, cos I just cant get this extension to work.

adding code below into Ext.onReady returns ManagedIFrame Undefined error in firebug.



var MIF = new Ext.ux.ManagedIFrame.Component({
width : 100,
height : 80,
defaultSrc : 'http://www.google.com});
Im including files below (ext-*js = Ext JS Library 3.0.0):


<!-- LIBS -->
<script type="text/javascript" src="menu/js/extj/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="menu/js/extj/ext-all.js"></script>
<script type="text/javascript" src="menu/js/miframe-debug.js"></script>



Thanks
D.

bkraut
10 Sep 2009, 1:15 AM
When opening a page in iframe i have to submit parameters.
Here is my code, which creates a blank page.

if I execute the same code on the button, the report is loaded. It is just not created on initial load.



var MIM, MIF = Ext.ux.ManagedIFrame, MIFC;
var iframe = new MIF.Panel({
//xtype: 'iframepanel',
border: false,
width: 800,
height: 600,
loadMask: {
msg:"Loading..."
}/*,
defaultSrc: 'Controller/Reporter/Display/' + node.attributes.attributes[0].nodeId*/
});

iframe.submitAsTarget({
url: 'Controller/Reporter/Display/' + node.attributes.attributes[0].nodeId,
params: {
task: 'create'
},
scripts: true,
method: 'POST',
callback: function(el, success, response, options){
if (success) {
if (!Ext.decode(response.responseText).success) {
Ext.MessageBox.alert("Error", Ext.decode(response.responseText).message);
}
}
}
});



Am I doing something wrong?

hendricd
10 Sep 2009, 1:31 AM
how about storing/checking splitter position on mousedown/mouseup?
would that help?

Yeah, been toying with something even simpler [psuedoed]:


Splitter.on( dragstart,
document.on ( mousemove, set-mif-shim-on , single=true ) //wait for it
);

MIF.on(resize, set-mif-shim-off);

hendricd
10 Sep 2009, 2:04 AM
When opening a page in iframe i have to submit parameters.
Here is my code, which creates a blank page.

if I execute the same code on the button, the report is loaded. It is just not created on initial load.
Am I doing something wrong?

@bkraut -- You may be confusing the submitAsTarget method with load method vs autoLoad configs.

The load method (and autoLoad config at startup) performs an Ajax request (XHR) to satisfy any content requests for the frame (essentially: frame-writing the content just like the standard Ext Panel load/autoLoad would behave).

The submitAsTarget method differs in that it synthesizes an HTML Form (adding any additional params as hidden fields) and submits the form action to the URL (with the MIF as its 'target' window). This method is not available in autoLoad fashion.

To use submitAsTarget when the MIF Component is rendered, just call the method inside a 'render' listener.

hendricd
10 Sep 2009, 2:14 AM
Can you please help me, cos I just cant get this extension to work.

adding code below into Ext.onReady returns ManagedIFrame Undefined error in firebug.



var MIF = new Ext.ux.ManagedIFrame.Component({
width : 100,
height : 80,
defaultSrc : 'http://www.google.com});
Im including files below (ext-*js = Ext JS Library 3.0.0):


<!-- LIBS -->
<script type="text/javascript" src="menu/js/extj/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="menu/js/extj/ext-all.js"></script>
<script type="text/javascript" src="menu/js/miframe-debug.js"></script>

Thanks
D.

@dusoo -- Using Firebug yet? Can you see any source code when the snoop at those script tags?

dusoo
10 Sep 2009, 2:38 AM
@hendricd -- Ahh, my mistake. I was looking at the src path like 5 times and did not see any problem in there. Sooorry

bkraut
10 Sep 2009, 2:48 AM
@bkraut -- You may be confusing the submitAsTarget method with load method vs autoLoad configs.

The load method (and autoLoad config at startup) performs an Ajax request (XHR) to satisfy any content requests for the frame (essentially: frame-writing the content just like the standard Ext Panel load/autoLoad would behave).

The submitAsTarget method differs in that it synthesizes an HTML Form (adding any additional params as hidden fields) and submits the form action to the URL (with the MIF as its 'target' window). This method is not available in autoLoad fashion.

To use submitAsTarget when the MIF Component is rendered, just call the method inside a 'render' listener.

I agree, but with autoLoad or with load, I don't receive PDF in my browser, but in the frame binary stream of PDF is displayed. So I have to use sumbitAsTarget.

Or no?

hendricd
10 Sep 2009, 3:57 AM
So I have to use sumbitAsTarget. Or no?

@bkraut --
Yes, you will need to use submitAsTarget to handle binary streams (NOT LOAD/AUTOLOAD)
Get creative: ;)




new MIF.Panel({

border: false,

width: 800,

height: 600,

loadMask: {

msg:"Loading..."

},

contentLoaded : function(frame){
alert('Say Something');
},

getSomeContent : function(params){
this.submitAsTarget(
{
url: 'Controller/Reporter/Display/' + node.attributes.attributes[0].nodeId,
params: Ext.apply( {
task: 'create'
}, params || {}),
callback : this.contentLoaded,
scope : this
});
},
listeners : {
render : function(mifp){
this.getSomeContent( { file : 'file1.pdf' } );
}
}
});

andynuss
12 Sep 2009, 8:13 AM
Hi Doug,

I was playing around with your extremely cool ux, and I created a border style viewport, with east, west, center, where I have normal extjs stuff in east and west, and your iframe panel in center, where I loaded www.yahoo.com. Then I created a basic popup window which initially comes up over the iframe center. When I grab the title bar of popup which is situated over the iframe of yahoo, and start dragging, I encountered this bug: drag down (quickly) and there's no problem. The ghost of popup keeps up with mouse movement. But try dragging up, and the only way you can drag is by moving the mouse so slowly that it stays within the title bar of the ghost of the popup. Otherwise, a sharp movement up, causes the mouse to get ahead of the ghost, and then all action is aborted. You have to release the mouse and try again slowly. By the way, with the east/west panels, if I move the popup over either, there's no problem dragging up or down.

Andy

hendricd
12 Sep 2009, 11:48 AM
Hi Doug,

I was playing around with your extremely cool ux, and I created a border style viewport, with east, west, center, where I have normal extjs stuff in east and west, and your iframe panel in center, where I loaded www.yahoo.com (http://www.yahoo.com). Then I created a basic popup window which initially comes up over the iframe center. When I grab the title bar of popup which is situated over the iframe of yahoo, and start dragging, I encountered this bug: drag down (quickly) and there's no problem. The ghost of popup keeps up with mouse movement. But try dragging up, and the only way you can drag is by moving the mouse so slowly that it stays within the title bar of the ghost of the popup. Otherwise, a sharp movement up, causes the mouse to get ahead of the ghost, and then all action is aborted. You have to release the mouse and try again slowly. By the way, with the east/west panels, if I move the popup over either, there's no problem dragging up or down.

Andy
@Andy -- Yes, MIF is Border-Layout aware (it activates a transparent image shim over the IFRAME when it senses adjacent regions are being resized). Not the case, however, with other 'draggables'.

Fortunately, you can activate those goodies yourself. For more on that, see this FAQ (http://www.extjs.com/learn/w/index.php?title=ManageIframe:Manual:Frame_FAQ#I_cannot_seem_to_drag_anything_over_a_MIF.2FMIFPanel_body._The_mouse_cursor_just_stops_at_the_edge_of_the_frame.).

andynuss
12 Sep 2009, 2:33 PM
Doug,

I'm not sure what I'm supposed to do. I just create a window (on the click of a button, for example) with:



var w = new Ext.Window({
height: 350,
width: 450,
title: 'Popup',
html: 'Hello there everyone',
});
w.show();


and then as a browser user, drag the window around with its title bar and notice that when I drag "downwards", everything is fine, but when I drag "upwards", I must drag very slowly or the shim stops moving. But the point is, if I move the mouse slowly, and allow the shim title bar to "keep up", then I can indeed drag the window anywhere over the iframe panel. Are you indicating with the FAQ reference that I'm supposed to write intercept mouse-move listeners for the shim dragging code of Ext.Window to turn on/off your iframe panel shim behavior?

Andy

hendricd
13 Sep 2009, 2:22 AM
Doug,

I'm not sure what I'm supposed to do. I just create a window (on the click of a button, for example) with:



@Andy --I see you're already hard at work on a solution. ;) Good idea.
See this (http://www.extjs.com/forum/showthread.php?p=386049#post386049) version of the same (will be included in MIF 2 final).

cdeclercq
13 Sep 2009, 11:59 PM
I have an iframe :

MyIframe = new Ext.ux.ManagedIFrame.Window({
title : title,
width : eval(width),
height : eval(height),
maximizable : true,
collapsible : true,
closable : true,
shadow : Ext.isIE,
animCollapse : false,
autoScroll : true,
hideMode : 'nosize',
defaultSrc : url,
loadMask : {msg:'Chargement...'},
closeAction : 'close'
});

MyIframe.show();
MyIframe.getFrameWindow().name = cible; When I destroy the iframe MyIframe with MyIframe.destroy(), the object window.frames['cible'] is not destroyed on Firefox.

I remarked also a strange behavior on IE :window.frames['cible'] is null.

Are these bugs ?

Thanks,

Charlotte

aranacarlospe
14 Sep 2009, 10:29 AM
I had a problem.
All works ok
Exjs3.0
imanagedframe RC3

I put an iframe inside a tab , all went ok
When i close the tab in the controls inside the iframe (extjs also) none of the destroy functions are called

Exist a way to do this?

hendricd
14 Sep 2009, 10:36 AM
I had a problem.


I put an iframe inside a tab , all went ok
When i close the tab in the controls inside the iframe (extjs also) none of the destroy functions are called

Exist a way to do this?

Can you post a code example of what you are trying?

aranacarlospe
14 Sep 2009, 10:45 AM
Ext.namespace('Atletismo.gui');
Atletismo.gui.TabManager = Ext.extend(Ext.TabPanel, {
resizeTabs:true, // turn on tab resizing
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true,
defaults: {
autoScroll:true
},
plugins: new Ext.ux.TabCloseMenu(),
autoDestroy: true,

addTab: function(id) {
var tab = this.findById(id);
if (tab == undefined)
{
if (id == 'mnu_ligas') {
this.add({
xtype: 'iframepanel',
title: _i18n.txt('tab_league_title'),
id: id,
closable: true,
iconCls: 'tabs',
layout: 'fit',
loadMask: {msg:"Loading..."},
defaultSrc: 'atl_dispatcher/index/ligas_list'
}).show();

} else {
this.add({
id: id,
title: 'New Tab ' ,
iconCls: 'tabs',
html: 'Tab Body ' + '<br/><br/>'
+ 'ssaaasss',
closable:true
}).show();
}
} else {
tab.show();
}
},

// private
initComponent : function(){
Atletismo.gui.TabManager.superclass.initComponent.call(this);
}
});
When i close the tab for mnu_ligas none of the destructor inside the iframe code are called
(inside exist a grid panel with a new instance of extjs code)

hendricd
14 Sep 2009, 11:00 AM
@aranacarlospe -- An IFRAME is a separate browser instance. MIF has no idea about what is in the page you load into the frame it manages.

Does your nested Ext page (in 'mnu_ligas') have anything in it that destroys its layout (ie viewport, etc)? How are you forcing 'destruction' in that page?

aranacarlospe
14 Sep 2009, 11:21 AM
Yes as usual all the controls override the destroy (for destory my own stuff) and call the default destrucor methods.
Whe i do the same task but without the iframe (direct into the tab) al the destroy methods are called
whe i close the tab.

Yes i know that and iframe is isolated but because are from the same domain i read in another place that exist some way to comunication between the external instance and the internal none (probably some message between them)

You have any idea how to advice the inner instance that the external tab is closing?

runintostar
14 Sep 2009, 9:21 PM
i used the managedframe yesterday,and found some problem with it,this is my code:


var MIF = {
xtype:'iframepanel',
id: 'testmif',
title:'testmif',
closable: true,
cls:'x-panel-body',
loadMask:{msg:"Loading..."},
defaultSrc: 'htmltest.html'
}
var tabs = new Ext.TabPanel({
activeTab : 0,
defaults : {
autoScroll : true
},
items : [{
layout : 'fit',
title : 'default',
id : 'testarea',
items : [MIF]
}]
var mediumWindow=MIF.getFrameWindow();
var mediumValue=mediumWindow.document.getElementById('code');the element with the id of 'code' is standard textarea in the dom of 'htmltest.html' embeded in the frame,and i am going to get the value in the textarea,with my code running,i got a error of "the mediumWindow do not have a property of document",
so what can i do? how can i get the value of the textarea from the frame.

thx

hendricd
15 Sep 2009, 3:55 AM
@aranacarlospe -- You can use this 'unobtrusive' (all driven by the host page) approach at notification:

Include the MIF messaging driver script:


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


addTab: function(id) {
var tab = this.findById(id);
if (tab == undefined)
{
if (id == 'mnu_ligas') {
this.add({
xtype: 'iframepanel',
title: _i18n.txt('tab_league_title'),
id: id,
closable : true,
iconCls : 'tabs',
layout : 'fit',
loadMask : {msg:"Loading..."},
defaultSrc: 'atl_dispatcher/index/ligas_list',
bindShutDown : function(){
if(window.onhostmessage){
onhostmessage (
function(message){
//nested pages destruction code here...
App.viewport.destroy();
},
App,
false,
'shutdown' //listen for this topic
);
} else {
alert('No Messaging');
}
},
frameConfig : {disableMessaging : false},
listeners : {
beforedestroy : function(mifp){
mifp.getFrame().sendMessage({}, 'shutdown');
},
domready : function(frame){
frame.loadFunction(
{name : 'shutDown',
fn : frame.ownerCt.bindShutDown
}
,false, true);
}
}
}).show();

......

hendricd
15 Sep 2009, 4:10 AM
@runintostar -- Welcome to the MIF thread.
First, you'll need to fix your tabPanel layout a bit (it's overnested somewhat):


var MIF = {
xtype:'iframepanel',
id: 'testmif',
title:'testmif',
closable: true,
cls:'x-panel-body',
loadMask:{msg:"Loading..."},
defaultSrc: 'htmltest.html'
}
var tabs = new Ext.TabPanel({
activeTab : 0,
defaults : {
autoScroll : true
},
items : MIF [{
layout : 'fit',
title : 'default',
id : 'testarea',
items : [MIF]
}]
Then (after the MIF is rendered), access the DOM of the frame's document using the published MIF methods:


var mediumValue=Ext.getCmp('testmif').getFrame().get('code').value;

aranacarlospe
15 Sep 2009, 11:53 AM
Thanks doug i will try and send my results

runintostar
15 Sep 2009, 6:22 PM
@runintostar -- Welcome to the MIF thread.
First, you'll need to fix your tabPanel layout a bit (it's overnested somewhat):


var MIF = {
xtype:'iframepanel',
id: 'testmif',
title:'testmif',
closable: true,
cls:'x-panel-body',
loadMask:{msg:"Loading..."},
defaultSrc: 'htmltest.html'
}
var tabs = new Ext.TabPanel({
activeTab : 0,
defaults : {
autoScroll : true
},
items : MIF [{
layout : 'fit',
title : 'default',
id : 'testarea',
items : [MIF]
}]
Then (after the MIF is rendered), access the DOM of the frame's document using the published MIF methods:


var mediumValue=Ext.getCmp('testmif').getFrame().get('code').value;



thank you hendricd,i modified my code and recieve a error of " the Ext.getCmp('testmif').getFrame() is null "
is there any problem in my code of creating a ManagedIframePanel?

jkerschb
16 Sep 2009, 9:36 PM
Hi,

i´m using miframes in my extjs project in combination with a tab panel. Creating new tabs works pretty good but if i close one tab and open a new tab afterwards, i get the wrong content in my iframe ( the content from the last url wich has been opened before i closed thetab). Can somebody help me plz?



// the add methode

addMainTab = function(titleTxt,url){
var id = this.getFrameID();
this.mainTab.add({
xtype: 'iframepanel',
id: 'newtab'+id,
title: titleTxt,
defaultSrc: url,
loadMask: true,
autoScroll:true,
closable:true,
frameID: 'fid_'+id
}).show();

//the close function
closeTab = function(){
if(!this.mainTab)
this.loadObjects();
this.mainTab.remove(this.mainTab.getActiveTab(),true);




cheers Joerg

andynuss
18 Sep 2009, 3:54 AM
Hi Doug,

I have the need of scrolling a portion of a large MIF document into view. Seeing that there was no api for this in Ext.ux.ManagedIFrame.Panel, I thought I would try HTML anchors. I have anchors at every paragraph in the document, with <a name> tag. (I tried id too.) You do not seem to support this. Is there any way you can leverage browser behavior to make this work? Or is there some other way to scroll a child node of the embedded document into view?

Andy

hendricd
18 Sep 2009, 4:02 AM
Hi Doug,

I have the need of scrolling a portion of a large MIF document into view. Seeing that there was no api for this in Ext.ux.ManagedIFrame.Panel, I thought I would try HTML anchors. I have anchors at every paragraph in the document, with <a name> tag. (I tried id too.) You do not seem to support this. Is there any way you can leverage browser behavior to make this work? Or is there some other way to scroll a child node of the embedded document into view?

Andy

@Andy -- That would be:


MIFP.getFrame().scrollChildIntoView('someElId');

andynuss
18 Sep 2009, 5:19 AM
I tried that to no avail. I have a very complex xhtml document with lots of images.

Sprinkled throughout is:



<a id='para29'/>
... html para
<a id='para30'/>
... another html para
<a id='para31'/>
... more paragraphs
etc.


I did get the anchored setSrc() to work, using classical HTML anchors. However, when I try using scrollChildIntoView(), nothing happens, and no javascript errors show up, though the code is executed.



var panel = Ext.getCmp('centerPanel'); // created with xtype=iframepanel
//panel.setSrc('content/center/chapter03.xhtml#para30'); // this works!
var uxelem = panel.getFrame();
uxelem.scrollChildIntoView('para30'); // nothing happens


Andy

Artistan
19 Sep 2009, 1:49 PM
Current svn
miframe.js 53.0 KB r55 Sep 02, 2009 BeamGate
breaks any combobox elements.
* The options to not show, but they are created.

hendricd
21 Sep 2009, 4:37 AM
Current svn
miframe.js 53.0 KB r55 Sep 02, 2009 BeamGate
breaks any combobox elements.
* The options to not show, but they are created.

@Artistan -- Try the latest version 2.0 (Final Candidate) from SVN.

Beyond that, you'd need to describe in more detail what the problem with Combos is?

dusoo
21 Sep 2009, 6:48 AM
Hi,
im having a problem with setting height to 100% of a page displayed by ManagedIFrame situated in a TabPanel.
Height is correctly set only with a number - like in example below (in tabs.add() function). But when i change the 300 to auto, or 100%, it shrinks the div into 152px enabling scrollbar.
Thanks for any tips to change this.
D.



...
var accordion = new Ext.Panel({
region: 'center',
title: 'Accordion Layout',
layout:'accordion',
layoutConfig: {
titleCollapse: true,
hideCollapseTool:false
},
items:[
{
title: 'Menu',
id: 'panel1',
height: '100%',
items:[tabs]
},
{
title: 'List',
id: 'panel2'
}]
});

tabs = new Ext.TabPanel({
title: 'Menu',
height: '100%',
activeTab: 0,
enableTabScroll : true,
autoScroll: false,
items: [{
contentEl: 'center1',
title: 'Start Page',
closable: true,
autoScroll: true
}]
});

function addTab(){

var newIframe = new Ext.ux.ManagedIFrame.Component({
xtype:'iframepanel',
autoScroll: true,
deferredRender: false,
bodyStyle:'padding:10px',
frameConfig:{name:'tabIframe'+tabID,
id:'tabIframe'+tabID
},
border:false,
frame:true,
defaultSrc: tabSource
});

tabs.add({
title: tabTitle,
id: tabTitle+tabID,
buttonAlign: 'left',
iconCls: tabType+'_tab_style',
closable:true,
height: 300, // having 'auto' or '100%' here does not work
autoScroll: true,
items:[newIframe]
}).show();
}

hendricd
21 Sep 2009, 8:53 AM
@Dusoo -- Somehow, early in your Ext career, you've picked up an unfortunate habit: 'overnesting'.
Further, height/width:
a) as % are not supported config options
b) should NOT be used at all for child items in a Ext.Layout. (Hint: Let the Layout figure out how, it doesn't need your help! ) ;)

If you want Ext to forego h/w calcs, use autoHeight/autoWidth : true/false. Read the API Docs on everything to do with Component height/widths.

Please, review Docs again(for the first time?) and some of the basic Ext layout examples, and apply this to what you learn:



var accordion = new Ext.Panel({
region: 'center',
title: 'Accordion Layout',
layout:'accordion',
layoutConfig: {
titleCollapse: true,
hideCollapseTool:false
},
items:[ tabs ,
{
title: 'Menu',
id: 'panel1',
height: '100%', <- Overnested, and Illegal Height !!
items:[
},
{
title: 'List',
id: 'panel2'
}]
});

tabs = new Ext.TabPanel({
title: 'Menu',
id : 'panel1',
height: '100%', <-- ILLEGAL !
activeTab: 0,
enableTabScroll : true,
deferredRender: false,
defaults: {
autoScroll: false,
closable : true
},
items: [{
contentEl: 'center1',
title: 'Start Page',
}]
});

function addTab(){

var newIframe = { new Ext.ux.ManagedIFrame.Component({
xtype:'iframepanel', <-- TabPanels are designed for Panels (for Title support)
autoScroll: true,
title: tabTitle,
id: tabTitle+tabID,
iconCls: tabType+'_tab_style',
buttonAlign: 'left',
deferredRender: false, <- belongs on the TabPanel !! not here
bodyStyle:'padding:10px',
frameConfig:{name:'tabIframe'+tabID,
id:'tabIframe'+tabID
},
border:false,
frame:true,
defaultSrc: tabSource
};

newIframe = tabs.add( newIframe);
{
title: tabTitle,
id: tabTitle+tabID,
buttonAlign: 'left',
iconCls: tabType+'_tab_style',
closable:true,
height: 300, // having 'auto' or '100%' here does not work
autoScroll: true,
items:[ ] <-- OVERNESTED

tabs.rendered || tabs.doLayout(); //Must call doLayout if already rendered
tabs.setActiveTab(newIframe );

return newIframe;
}

dusoo
21 Sep 2009, 11:42 PM
@Doug -- thanks for your tips to correct the code. I actually did not know that i'm overnesting, but i see the problem now. Heigth is fixed.
One problem came up though, clicking on tab title forces second accordion to expand and collapse :) Strange. I'll try to find the problem. Thanks!

jphillips
24 Sep 2009, 5:11 AM
We are upgrading from 2.0.2 to 3.0.2, and all of this code was working against the 2.0.2 baseline.

We are adding a managedIFrame panel to an existing tab panel, when the user performs a search operation. The contents of the embedded page is just a grid containing the search results. In 2.0.2, it rendered fine, in 3.0.2 it threw an exception, I tracked down to setting the width and height to 100%, so I commented those out. Now it renders without an exception, but the grid only takes up a few pixels and is unreadable. When I hard code
a height of say 400 I get that height, but I need it to use 100% of the space available on the tab panel.

Your help is greatly appreciated.

Here is the new tab being added to the tabPanel.


newTab = new Ext.ux.ManagedIframePanel({
autoLoad: false,
defaultSrc:'searchResults.jsp?query=' + htmlQuery,
frameConfig:{height:'100%',width:'100%'},
title: newTabTitle,
closable: true,
layout: 'fit',
fitToParent: true,
id: newTabId
});
newTab.on("destroy", this.onCloseTab.createDelegate(this));

this.tabPanel.add(newTab);

searchResults.jsp is simple
<div id="search-results-grid"> </div>

Here is the grid


var grid = new Ext.grid.GridPanel({
el: 'search-results-grid',
// width: '100%',
// height: '100%',
title: parent.MEL.msg['home.page.tab.searchresults'],
store: store,
stateful: true,
stateId: 'mel-search-results-grid',
cm: cm,
trackMouseOver:true,
sm: new Ext.grid.RowSelectionModel(
{
singleSelect: true
}),
stripeRows: true,
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:true,
getRowClass : function(record, rowIndex, p, store) {
if (this.showPreview) {
p.body = '<p class="search-results-description">' + Ext.util.Format.ellipsis(record.data.description, 250) + '</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
},
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: parent.MEL.msg['msel.search.results.page'],
emptyMsg: parent.MEL.msg['msel.search.noresults'],
items:[
'-', {
pressed: false,
enableToggle:true,
text: parent.MEL.msg['msel.search.hide.description'],
cls: 'x-btn-text-icon',
icon: 'images/show_details.png',
toggleHandler: toggleDetails
}]
})
});

hendricd
24 Sep 2009, 5:25 AM
@jphillips --Assuming you are using MIF 2 now:



newTab = new Ext.ux.ManagedIframePanel({
autoLoad: false,
defaultSrc:'searchResults.jsp?query=' + htmlQuery,
frameConfig:{height:'100%',width:'100%'},
title: newTabTitle,
closable: true,
layout: 'fit', //MIF has no items
fitToParent: true, //ignored in a layout(tabPanel)
id: newTabId
});
newTab.on("destroy", this.onCloseTab.createDelegate(this));

this.tabPanel.add(newTab);Forget this: <div id="search-results-grid"> </div>
and place your GridPanel in a Viewport (as region:'center' ). The Viewport will handle resizing in that document for you.

jphillips
24 Sep 2009, 7:14 AM
Thanks for the quick response. I was running 1.2.6 version of the miframe.js. I dropped in the 2.0RC3 version to see if that helps. It no longer renders the tab with that version. Also the tabPanel is already in a viewport and we are adding the managed IFrame to the tab panel.


this.panel = new Ext.Viewport({
layout:'border',
region: 'center',
items:[
new Ext.BoxComponent({ // raw
region:'north',
el: 'north',
height: (Ext.get('header-links-no-title') ? 38 : 85)
}),{
region:'south',
contentEl: 'south',
height: (Ext.get('header-links-no-title') ? 0 : 28),
margins:'0 0 0 0'
}, {
region: 'west',
id: 'west-panel',
title: MEL.msg['global.settings.label'],
split: true,
width: 230,
minSize: 200,
maxSize: 450,
collapsible: true,
margins: '0 0 0 5',
layout: 'fit',
layoutConfig:{
animate:true
},
items: [ MEL.Bootstrap.sidebar.getPanelInstance() ]
}, this.tabPanel

]
});

hendricd
24 Sep 2009, 7:17 AM
No.

I said the gridPanel belongs in a Viewport (in searchResults.jsp ).

zombeerose
24 Sep 2009, 9:23 AM
BUG - I grabbed the latest from svn. In the mif.js on line 2340, media is not defined.

this.hashRule(rule, ss, media);

Makes Firebug/break on all errors painful to use.

hendricd
24 Sep 2009, 9:53 AM
BUG - I grabbed the latest from svn. In the mif.js on line 2340, media is not defined.

this.hashRule(rule, ss, media);Makes Firebug/break on all errors painful to use.

Doh! Forgot the extra Param from the test suite. ;)

Fixed in SVN !

jphillips
24 Sep 2009, 10:48 AM
Ok So I changed the grid to return in a viewport. Still not resizing. I tried both layout border and layout anchor.
When I investigate using ff, the Iframe has width and height of 100%, but the grid results are set to 15px.

new Ext.Viewport({
layout:'anchor',
region: 'center',
items:[
grid
]
});

hendricd
24 Sep 2009, 10:54 AM
@jphillips -- At this point, I'd need to see the source of your entire (current) layout and JSP page or a live URL. Got either?

jphillips
24 Sep 2009, 11:06 AM
From the index.jsp, this is the main layout.


<%if (null == excludeHeaderAndFooter || excludeHeaderAndFooter.equals("false")) {%>
<div id="north" class="header-banner"><jsp:include page="inc/header.jsp"/></div>
<%} else { %>
<div id="north" class="header-banner"><jsp:include page="inc/headerLight.jsp"/></div>
<%}%>

<div id="west"><jsp:include page="inc/sidebar.jsp"/></div>
<div id="center"><jsp:include page="inc/mel-grid.jsp"/></div>
<%if (null == excludeHeaderAndFooter || excludeHeaderAndFooter.equals("false")) {%>
<div id="south" class="footer-banner"><jsp:include page="inc/footer.jsp"/></div>
<%} else { %>
<div id="south" class="footer-banner" style="visibility:hidden;display:none"><jsp:include page="inc/footer.jsp"/></div>
<%}%>


This is from the main initialization routine. MelGrid extends GridPanel and sets the column model and several other things for the GridPanel.

this.melGrid = new MEL.MelGrid({
title: MEL.msg['home.page.tab.mastereventslog'],
filterPanels: MEL.Bootstrap.sidebar
});

this.activeTab = this.melGrid;

Ext.ComponentMgr.register(this.melGrid);

this.tabPanel = new Ext.TabPanel({
region:'center',
id: 'center-panel',
deferredRender:false,
enableTabScroll: true,
defaults: {autoScroll: true},
activeTab:0,
items:[
this.melGrid
]
});

this.tabPanel.on('tabchange', this.onActivateTab.createDelegate(this));

this.panel = new Ext.Viewport({
layout:'border',
region: 'center',
items:[
new Ext.BoxComponent({ // raw
region:'north',
el: 'north',
height: (Ext.get('header-links-no-title') ? 38 : 85)
}),{
region:'south',
contentEl: 'south',
height: (Ext.get('header-links-no-title') ? 0 : 28),
margins:'0 0 0 0'
}, {
region: 'west',
id: 'west-panel',
title: MEL.msg['global.settings.label'],
split: true,
width: 230,
minSize: 200,
maxSize: 450,
collapsible: true,
margins: '0 0 0 5',
layout: 'fit',
layoutConfig:{
animate:true
},
items: [ MEL.Bootstrap.sidebar.getPanelInstance() ]
}, this.tabPanel

]
});

hendricd
24 Sep 2009, 11:16 AM
@jphillips --Every time you post, your layout changes (now the GridPanel is defined as an item of the tabPanel). Where is your MIFPanel now?

What's the goal here?

zombeerose
24 Sep 2009, 11:17 AM
IE6 issue:
"Invalid procedure call or argument" on line 2273 of mif.js
ss.cssText = cssText;

Unfortunately, this issue is completely terminating my app.

hendricd
24 Sep 2009, 11:20 AM
IE6 issue:
"Invalid procedure call or argument" on line 2273 of mif.js
ss.cssText = cssText;

I'll need more than that, dude. :-?
What are you passing createStyleSheet? Is it a same-origin URL ?

jphillips
24 Sep 2009, 11:21 AM
The layout hasn't changed. When logging into the application, the MelGrid panel is displayed by default. If the user performs a search a new on the fly tab with the search results is added to the existing tabPanel. The search results grid is the one with the problem. You asked to see more of the initial layout, sorry for the confusion.

There are several other dynamic tabs that can get created, but they are not just a grid. I sent you an private email.

hendricd
24 Sep 2009, 11:26 AM
@jphillips -- Please post your ManagedIframe config and the source of the src:page loaded by the IFRAME.

jphillips
24 Sep 2009, 11:46 AM
searchResults.jsp

<html>
<head>
<jawr:style src="/all.css"/>
<jawr:script src="/ext-all.js"/>
<jawr:script src="/mel.js"/>
<script type="text/javascript" src="../../scripts/MEL/bundle.js?lang=<%= request.getParameter("locale") %>"></script>
<script type="text/javascript" src="scripts/MEL/Search.js"></script>
<script type="text/javascript" src="scripts/MEL/Bootstrap.js"></script>
</head>
<body>
<div id="search-results-grid"> </div> // this is obsolete now that the grid is in a ViewPort
</body>
</html>

Search.js fragments

Ext.onReady(function() {
Ext.Ajax.request({
async: false,
method: 'GET',
url: searchUri,
success: function(response, options) {
this.searchResults = Ext.decode(response.responseText).searchResults;
},
scope: this
});

var store = new Ext.data.JsonStore({
root: 'results',
id: 'id',
fields: [
'id', 'title', 'description', 'priority', 'label', 'type', 'ccir', 'significant', 'locations', 'createTime'
],
data: this.searchResults
});
var cm = new Ext.grid.ColumnModel([{
id: 'search-results-title',
header: parent.MEL.msg['msel.search.events'],
dataIndex: 'title',
width: 0.5,
renderer: renderTopic
},{
id: 'search-results-type',
header: parent.MEL.msg['home.page.column.type'],
dataIndex: 'title',
width: 0.3,
renderer: renderType
},{
id: 'search-results-time',
header: parent.MEL.msg['msel.related.createdon'],
dataIndex: 'createTime',
width: 0.2,
renderer: renderDate
}]);
var grid = new Ext.grid.GridPanel({
// el: 'search-results-grid',
width: '100%',
height: '100%',
title: parent.MEL.msg['home.page.tab.searchresults'],
store: store,
stateful: true,
stateId: 'mel-search-results-grid',
cm: cm,
trackMouseOver:true,
sm: new Ext.grid.RowSelectionModel(
{
singleSelect: true
}),
stripeRows: true,
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:true,
getRowClass : function(record, rowIndex, p, store) {
if (this.showPreview) {
p.body = '<p class="search-results-description">' + Ext.util.Format.ellipsis(record.data.description, 250) + '</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
},
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: parent.MEL.msg['msel.search.results.page'],
emptyMsg: parent.MEL.msg['msel.search.noresults'],
items:[
'-', {
pressed: false,
enableToggle:true,
text: parent.MEL.msg['msel.search.hide.description'],
cls: 'x-btn-text-icon',
icon: 'images/show_details.png',
toggleHandler: toggleDetails
}]
})
});


new Ext.Viewport({
layout:'anchor',
region: 'center',
items:[
grid
]
});

grid.getSelectionModel().on('rowselect', onRowSelect);



Config - dropped back to 1.2.6 as the 2.0RC3 was throwing several exceptions and would not even render.


var newTabTitle = MEL.msg['global.search'] + ': "' + escapedQuery + '"';

newTab = new Ext.ux.ManagedIframePanel({
autoLoad: false,
defaultSrc:'searchResults.jsp?query=' + htmlQuery,
frameConfig:{height:'100%',width:'100%'},
title: newTabTitle,
closable: true,
layout: 'fit',
fitToParent: true,
id: newTabId
});

newTab.on("destroy", this.onCloseTab.createDelegate(this));

this.tabs.add(newTabId, newTab);

this.tabPanel.add(newTab);

this.tabPanel.activate(newTabId);

jphillips
24 Sep 2009, 12:08 PM
The error I get in vs. 2.0RC3 is on line 1327, element is null, so it doesn't even add the tab and does a complete refresh of the entire app. It may be that I am creating the ManagedIframe wrong for the new version.

newTab = new Ext.ux.ManagedIframe({
autoLoad: false,
defaultSrc:'searchResults.jsp?query=' + htmlQuery,
title: newTabTitle,
closable: true,
id: newTabId
});

Is there an error with the way I am trying to construct a MIF using 2.0?

zombeerose
24 Sep 2009, 1:30 PM
@hendricd

It's nothing I'm doing ... your
Ext.onReady(function() { method in mif.js, line 2670

I only have the issue with IE6.

The value of param cssText is
".ux-mif{height:100%;width:100%;} .ux-mif-mask-target{position:relative;zoom:1;} .ux-mif-el-mask {z-index: 100;position: absolute;top:0;left:0;-moz-opacity: 0.5;opacity: .50;*filter: alpha(opacity=50);width: 100%;height: 100%;zoom: 1;} .ux-mif-el-mask-msg {z-index: 1;position: absolute;top: 0;left: 0;border:1px solid;background:repeat-x 0 -16px;padding:2px;} .ux-mif-el-mask-msg div {padding:5px 10px 5px 10px;border:1px solid;cursor:wait;} .ux-mif-shim {z-index:8500;position:absolute;top:0px;left:0px;background:transparent!important;overflow:hidden;display:none;} .ux-mif-shim-on{width:100%;height:100%;display:block;zoom:1;} .ext-ie6 .ux-mif-shim{margin-left:5px;margin-top:3px;}"

The value of param id is undefined.

jphillips
24 Sep 2009, 1:55 PM
I was finally able to get the tab to render using 2.0RC3, but I have the same problem with the height.

Here is my updated config.


var newTabConfig = {
xtype:'iframepanel',
id: newTabId,
title:newTabTitle,
closable: true,
cls:'x-panel-body',
defaultSrc: 'searchResults.jsp?query=' + htmlQuery
};

this.tabPanel.add(newTabConfig);
newTab = this.tabPanel.getItem(newTabId);
newTab.on("destroy", this.onCloseTab.createDelegate(this));

this.tabs.add(newTabId, newTab);



Would a picture help?

hendricd
25 Sep 2009, 12:38 AM
@hendricd

It's nothing I'm doing ... your
Ext.onReady(function() { method in mif.js, line 2670

I only have the issue with IE6.

The value of param cssText is
".ux-mif{height:100%;width:100%;} .ux-mif-mask-target{position:relative;zoom:1;} .ux-mif-el-mask {z-index: 100;position: absolute;top:0;left:0;-moz-opacity: 0.5;opacity: .50;*filter: alpha(opacity=50);width: 100%;height: 100%;zoom: 1;} .ux-mif-el-mask-msg {z-index: 1;position: absolute;top: 0;left: 0;border:1px solid;background:repeat-x 0 -16px;padding:2px;} .ux-mif-el-mask-msg div {padding:5px 10px 5px 10px;border:1px solid;cursor:wait;} .ux-mif-shim {z-index:8500;position:absolute;top:0px;left:0px;background:transparent!important;overflow:hidden;display:none;} .ux-mif-shim-on{width:100%;height:100%;display:block;zoom:1;} .ext-ie6 .ux-mif-shim{margin-left:5px;margin-top:3px;}"The value of param id is undefined.

I'll give it another test on IE6 here but, it could be that Ext is firing onReady too soon. This is known problem on Ext/IE, especially if you are trying to load Ext in the <BODY> tag instead of the <head> section.

If possible, apply this (http://www.extjs.com/forum/showthread.php?p=390188#post390188) new version of EventManager.js and rebuild Ext with it.

hendricd
25 Sep 2009, 1:35 AM
@jphillips --

A couple points.

MIF 2.0 is the only release compatible with Ext 3.
Why are you rendering an Ext grid into an IFRAME at all? Just add it to the tabPanel on the host page!

If you must use an iframe, steps for success:

1) During development, use the miframe-debug.js script (included in the zip build) in the <head> section of your main page. It has the recommended visibilityMode (hideMode:'nosize' support) fixes included in it (without it, your IFRAMEs will reload when the tab changes on all browsers except IE).

2) Start with a simple remote page (like Google) to get the basics of your main layout working properly.

3) Add
defaults : {
hideMode : 'nosize'
}to your tabPanel config.

3) Learn how to add items to Containers properly. You are not adding items to the tabPanel correctly. Examine:


var newTabConfig = {
xtype:'iframepanel',
id: newTabId,
hideMode : 'nosize',
title:newTabTitle,
closable: true,
cls:'x-panel-body', //<- Trouble!!
defaultSrc: 'http://www.google.com' //start simple to work on sizing/layout issues
};

var newTab = this.tabPanel.add(newTabConfig);
newTab.on("destroy", this.onCloseTab.createDelegate(this));

this.tabPanel.rendered && this.tabPanel.doLayout(); //Must call this if tabPanel is rendered already
this.tabPanel.setActiveTab(newTab);

Now, on to search.js (mess):

Ext.onReady(function() {

//this is bad! This is an asychronous call. Execution will continue immediately
Ext.Ajax.request({
async: false,
method: 'GET',
url: searchUri, //where is this coming from ?
success: function(response, options) {
this.searchResults = Ext.decode(response.responseText).searchResults;
},
scope: this //scope here is window, what's the goal here?
});

var store = new Ext.data.JsonStore({
root: 'results',
id: 'id',
fields: [
'id', 'title', 'description', 'priority', 'label', 'type', 'ccir', 'significant', 'locations', 'createTime'
],
data: this.searchResults //<- this will be undefined (see async Ajax call above)
});
var cm = new Ext.grid.ColumnModel([{
id: 'search-results-title',
header: parent.MEL.msg['msel.search.events'],
dataIndex: 'title',
width: 0.5,
renderer: renderTopic
},{
id: 'search-results-type',
header: parent.MEL.msg['home.page.column.type'],
dataIndex: 'title',
width: 0.3,
renderer: renderType
},{
id: 'search-results-time',
header: parent.MEL.msg['msel.related.createdon'],
dataIndex: 'createTime',
width: 0.2,
renderer: renderDate
}]);
var grid = new Ext.grid.GridPanel({
// el: 'search-results-grid',
// width: '100%', //Illegal, ints only
// height: '100%', //and the center region of a border layout sizes itself
title: parent.MEL.msg['home.page.tab.searchresults'],
region : 'center',
store: store,
stateful: true,
stateId: 'mel-search-results-grid',
cm: cm,
trackMouseOver:true,
sm: new Ext.grid.RowSelectionModel(
{
singleSelect: true
}),
stripeRows: true,
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:true,
getRowClass : function(record, rowIndex, p, store) {
if (this.showPreview) {
p.body = '<p class="search-results-description">' + Ext.util.Format.ellipsis(record.data.description, 250) + '</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed';
}
},
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: parent.MEL.msg['msel.search.results.page'],
emptyMsg: parent.MEL.msg['msel.search.noresults'],
items:[
'-', {
pressed: false,
enableToggle:true,
text: parent.MEL.msg['msel.search.hide.description'],
cls: 'x-btn-text-icon',
icon: 'images/show_details.png',
toggleHandler: toggleDetails
}]
})
});


new Ext.Viewport({
layout:'anchor''border',
region: 'center', //what !! ??
items:[
grid
]
});

grid.getSelectionModel().on('rowselect', onRowSelect); //where is this defined

The grid and Viewport code should be placed in the success handler of the AJax request, so that when it finally arrives (asynchronously) the layout can be built with the results.

Advice: Please, spend some more time studying basic Ext layout examples. You'll minimize guess-work that way!

zombeerose
25 Sep 2009, 7:08 AM
"Invalid procedure call or argument" on line 2273 of mif.js

ss.cssText = cssText;

I will see if I can integrate the link you provided. I have never had to custom build ext though and am rather uneasy in doing so.

I am loading all my js (just not deferred) as well as calling Ext.onReady in the body.

Thanks for looking at this.

jphillips
25 Sep 2009, 7:20 AM
Doug, Thanks again for your help.

the Ajax call is not asynchronous. async: false, It is a synchronous call and will be complete before the code continues. ext-basex extension provides the synchronous call capability. (Although I am not sure why the original developer chose that path.) But given that choice, the reason the scope is set to this, is so that this.searchResults which is set in the inline success handler will be accessible for the store definition further down in the file.

This is but a tiny portion of a huge application that has been in production for 2+ years and deployed at multiple customer sites. Many developers with varying abilities have worked on the project. This was some of the very first code written once we moved from JSF to ExtJS, so the developers who wrote it were still a little "green", however it has been working flawlessly for the customer using ExtJS 2.0.2.

I think your idea of the doLayout on tabpanel might be the key, I actually woke up last night with that thought in mind. I'll let you know the results.

If that doesn't work I am going to completely gut this so that I can render the gridPanel directly into the tabPanel and make it asynchronous to boot. I may do that even if it does work to see if it improves the performance.

hendricd
25 Sep 2009, 9:22 AM
If that doesn't work I am going to completely gut this so that I can render the gridPanel directly into the tabPanel and make it asynchronous to boot. I may do that even if it does work to see if it improves the performance.

Wisdom in that. An IFRAME is totally unnecessary for that. ;)

jphillips
25 Sep 2009, 1:09 PM
So with the gutting complete. It is now asynchronous, and it loads in less than 1 second, instead 30+ seconds. That will make for a happy customer. Oh, and it solves the height issue. Thanks for your help.

herry
27 Sep 2009, 7:23 PM
the content of the iframe is the xml file, when close the Ext window ,the IE will show a
whitespace window for about 2 seconds.
but when I set the defaultSrc to other site,such as google.com ,it's ok

andynuss
27 Sep 2009, 7:24 PM
Hi Doug,

I have a source html document with several spans whose ids I know. Can you show me a way to select at once say two elements "my_id1" and "my_id2" in the MIF?

Andy

hendricd
28 Sep 2009, 3:06 AM
Hi Doug,

I have a source html document with several spans whose ids I know. Can you show me a way to select at once say two elements "my_id1" and "my_id2" in the MIF?

Andy

{
xtype:'iframepanel',
listeners: {
domready : function(frame){
frame.get('my_id1').hide();

//or by selector
frame.select('span.some-class').highlight();

}
}
}

hendricd
28 Sep 2009, 3:08 AM
the content of the iframe is the xml file, when close the Ext window ,the IE will show a
whitespace window for about 2 seconds.
but when I set the defaultSrc to other site,such as google.com ,it's ok

@herry -- Perhaps show some of your Window layout code. I can't tell what you're up to. :-?

zombeerose
28 Sep 2009, 8:15 AM
After updating to the latest MIF code (mif.js, multidom.js, uxvismode.js), I am experiencing a rendering issue with my tree panels. I have attached a picture of one of them. After expanding/collapsing different nodes, the node text gets all garbled.

If I revert to a previous version of MIF, the issue goes away.

Tested on FF 3.5.3 and 3.0.10; Ext 3

hendricd
28 Sep 2009, 8:27 AM
After updating to the latest MIF code (mif.js, multidom.js, uxvismode.js), I am experiencing a rendering issue with my tree panels. I have attached a picture of one of them. After expanding/collapsing different nodes, the node text gets all garbled.

If I revert to a previous version of MIF, the issue goes away.

Tested on FF 3.5.3 and 3.0.10; Ext 3
Confirmed, looks like a problem with uxvismode. :-?

I'll check it out.

zombeerose
28 Sep 2009, 8:50 AM
Have you been able to look at the other issue - Invalid Procedure Call in IE6 ?

I didn't do a custom build of Ext but I did include the EventManager.js immediately after my ext-all-debug, which should overlay the default code (right?). Unfortunately, I am still receiving this error.

What additional info can I provide?

hendricd
28 Sep 2009, 8:58 AM
Confirmed, looks like a problem with uxvismode. :-?

I'll check it out.

Fixed in SVN. (Darned Flyweights) ;)

zombeerose
28 Sep 2009, 11:52 AM
I've spent the latest couple hours trying to debug the "invalid procedure call" error in IE and have at least narrowed down some circumstances. For whatever reason, it appears related to the number of CSS files I am including. When I include 29 or fewer (including ext), I do not have the error. However, as soon as I include 30 CSS files, IE (6 & 8) barfs.

If you are curious why I have so many CSS files, they are isolated pieces for modular development. During the build, they are all minified and combined into 2 files (1 for ext and 1 for custom).

Any ideas how to fix this besides the obvious of reduce css?

zombeerose
28 Sep 2009, 12:47 PM
Stupid M$ - http://support.microsoft.com/default.aspx?scid=kb;en-us;262161

Does anyone know how Ext dealt with this since they have well over 30 development stylesheets?

zombeerose
28 Sep 2009, 1:11 PM
I ended up changing to the following and things appear to be working.

<style type="text/css">
@import url('stylesheet1.css');
@import url('stylesheet2.css');
</style>

hendricd
28 Sep 2009, 3:56 PM
Yes, as you've noticed, IE imposes a limit of 31 stylesheets on a page. 8-|

andynuss
29 Sep 2009, 9:24 AM
Hi Doug,

I have navigation controls which change cause setSrc to be called in my mif. Other controls manipulate the dom of the iframe. Thus I need to trap the "domready" event to know when the page is in a ready state. I noticed that if on initial creation of the iframepanel, if I don't use defaultSrc config, but instead call setSrc() immediately after the panel.doLayout() call, that the domready listener never fires, though the page loads into the iframe. This makes me think its unsafe in general to set a global flag is_dom_ready to false just before setSrc, expecting the domready event listener to set it to true.

Eric24
29 Sep 2009, 10:28 PM
@Doug,

Do you have any examples of using MIF to POST data to the server and return a file that triggers the browser to download the response (via content-disposition header)? The MIF would be hidden, I presume?

I'm doing this now using a simple window.open(), but I obviously can't POST and even if I could fit everything on the URL to use a GET, it causes an annoying "flash" as the browser opens a new tab or window and then immediately closes it again and finally shows the download dialog.

Tnx!
Eric

alessandro
30 Sep 2009, 12:56 AM
Very simple question:
I have a managediframe with some extjs code inside of it.
From that code, I have to open an Ext window.

The problem is that window mask is bounded to the iframe and the windows is not movable outside the iframe.

How can I open a window with a "top" scope ?

I've tryed to do something like this:



myVar = "Test";

top.myWin = new Ext.Window({
title: myVar,
[ ... ]
})
top.myWin.show();


it works, but variables inside that window (for example "myVar" are out of scope).

How can I create a window with a "local" scope but showing it over the whole browser window and not just inside the frame?

hendricd
30 Sep 2009, 3:57 AM
@Doug,

Do you have any examples of using MIF to POST data to the server and return a file that triggers the browser to download the response (via content-disposition header)? The MIF would be hidden, I presume?

I'm doing this now using a simple window.open(), but I obviously can't POST and even if I could fit everything on the URL to use a GET, it causes an annoying "flash" as the browser opens a new tab or window and then immediately closes it again and finally shows the download dialog.

Tnx!
Eric

@Eric24 - Most of what you are looking for is demonstrable here (http://demos.theactivegroup.com/demodesk.html?demo=mif&script=mifsubmit)(submitAsTarget). In your case, just render an MIF.Component with hideMode:'offsets', and use Content-Disposition: attachment in the response instead.

mthaynie
1 Oct 2009, 9:25 AM
I realize the DD methods are still in development, but does anyone have a simple example of dragging from a parent and dropping into the managed iframe? I'm still pretty new to all this and have been able to do most of what I need, but any simple example would be a great time saver. Thanks in advance.

mschwartz
4 Oct 2009, 1:26 PM
henricd,

See attached image.

If I click on "Company" in the window that's behind, that iframe loads the company info, but the window stays in back.

In fact, the only way to bring that window to the front is to click on the window's titlebar or on one of the tabs.

I do not think this is right. In a desktop style app, people would try to click anywhere on the window to activate it and accidentally clicking on a link in a window behind and having it navigate away from where you want the window/iframe to be is confusing.

My suggestion is to put a shim over the disabled window when it is deactivated. Click on the shim should activate the window and bring it to the front, even if you appear to be clicking on a link.

Any suggestions on how to achieve this effect?

mschwartz
4 Oct 2009, 1:32 PM
OK, I figured it out.

for each window:



win.on({
activate: function() {
this.enable();
},
deactivate: function() {
this.disable();
}
});


Simple.

hendricd
4 Oct 2009, 3:40 PM
Hey, that's a nice one! Gotta FAQ that one somehow. :-?

mschwartz
5 Oct 2009, 6:01 AM
Unfortunately, WindowMgr doesn't provide events, like a change in window depth arrangement. Or you could override that and do it automagically.

Or you could override Ext.Window and do the enable/disable there.

andynuss
6 Oct 2009, 5:11 AM
Hi Doug,

I have the following problem. In the toolbar of the border layout north region (with mif in center region) I have menus. I noticed that if the user drops down one of the menus just to look, changes his mind, and then clicks the mif region, the menu does not disappear. Is there a way, on catching the focus of the mif, to make the dropped-down menu disappear? I'll use a hack if there's no proper way to do it. Clicking in any of the other Ext panels cause the menu to disappear.

Andy

hendricd
6 Oct 2009, 5:40 AM
Hi Doug,

I have the following problem. In the toolbar of the border layout north region (with mif in center region) I have menus. I noticed that if the user drops down one of the menus just to look, changes his mind, and then clicks the mif region, the menu does not disappear. Is there a way, on catching the focus of the mif, to make the dropped-down menu disappear? I'll use a hack if there's no proper way to do it. Clicking in any of the other Ext panels cause the menu to disappear.

Andy

@Andy --
See FAQ-9 (http://www.extjs.com/learn/w/index.php?title=ManageIframe:Manual:Frame_FAQ#My_Ext.Menu_does_not_disappear_when_it_overlays_an_Iframe_and_I_click_on_the_document_contained_in_the_Iframe.)

end-user
8 Oct 2009, 5:32 AM
How do I add a listener that detects window events to the MIF? I'm looking to defer a frame refresh if a frame's contents are altered.

So, if I have a frame displaying a page, it just sits until a user interacts with it. If the user scrolls via keyboard or mouse, the frame will defer a "scroll to top" call. If the user clicks a link or types on the page, the frame will defer a reload to the original location after a period of inactivity.

I need a way to listen to activity within the frame.

hendricd
8 Oct 2009, 7:50 AM
How do I add a listener that detects window events to the MIF? I'm looking to defer a frame refresh if a frame's contents are altered.

So, if I have a frame displaying a page, it just sits until a user interacts with it. If the user scrolls via keyboard or mouse, the frame will defer a "scroll to top" call. If the user clicks a link or types on the page, the frame will defer a reload to the original location after a period of inactivity.

I need a way to listen to activity within the frame.

That would look something like this:




{
xtype: 'iframepanel',
listeners : {
domready : function(frame){
frame.getDoc().on( // <-- set listeners on the frame's document object
'click' ,
function(){
(function(){
this.dom && this.setSrc(this.src);
}).defer(15000, this); //restore to original src
},
frame,
{delegate : 'a'}
);

frame.getWindow().on( // <-- set listeners on the frame's window object
'scroll' ,
function(){
(function(){
var D;
this.dom && (D = this.getDocument()) && D.scrollIntoView(D.body);
}).defer(15000, this); //scroll to the top after 15 secs
},
frame
);

}
}
}

Tweak to suit your needs (and browsers). ;)

end-user
8 Oct 2009, 8:19 AM
hmmm... not so much. Here's what I'm doing:


win = new Ext.ux.ManagedIFrame.Window({
id:'http://google.com/'
,defaultSrc: 'http://google.com/'
,header:false
,closable:false
,resizable:false
,draggable:false
,frame:false
,shadow:false
,maximized:true
,listeners:{
domready : function(frame){
frame.getDoc().on( // <-- set listeners on the frame's document object
'click' ,
function(){
console.info('click')
},
frame,
{delegate : 'a'}
);
frame.getWindow().on( // <-- set listeners on the frame's window object
'scroll' ,
function(){
console.info('scroll')
},
frame
);
}
}
}).show()You can see by the use of 'console' I'm using FF+FB

hendricd
8 Oct 2009, 8:20 AM
same-origin frames only. You can't touch a page from a foreign domain. /:)

hendricd
8 Oct 2009, 8:31 AM
And, this :


id:'http://google.com/'

is not a valid component id.

charleshimmer
9 Oct 2009, 5:52 AM
hendricd - have you ever tried this extension with a browser pop up window?

hendricd
9 Oct 2009, 5:54 AM
hendricd - have you ever tried this extension with a browser pop up window?

Ha!

What on earth for? :-?

AgentSmith
9 Oct 2009, 6:01 AM
In FF, the link tag (<a>) within an iframepanel would not reload the content after hitting the browser's back button. Scenario: load page, click link in iframepanel (new page loads in iframepane), click browser's back button, click link again, no action (new page would not load again). Works in IE. Any suggestions? Code is below. I did tried the load({url: 'myurl' , nocache: true}) option but still not working.

Thanks,
AS



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="../../ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext/ext-all.js"></script>

<script type="text/javascript" src="../../ext/ux/ext-basex.js"></script>

<!-- This JS file is required to incorporate the ManagedIFrame user extension. -->
<script type="text/javascript" src="../../ext/ux/mif/miframe.js"></script>

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../ext/resources/images/default/s.gif';

Ext.onReady(function(){

var viewport =
new Ext.Viewport({
layout: "border",
id: 'viewport_id',
renderTo: Ext.getBody(),
items: [{
region: "north",
id: 'north_id',
xtype: 'panel',
height: 100,
html: 'North'
},{
region: 'center',
id: 'center_id',
xtype: 'iframepanel',
frameCfg: {name: 'center_iframepanel_id'},
autoLoad: 'CenterFrame1.html'
}]
});
}); // Ext.onReady()

function displayCenter(){
Ext.getCmp('viewport_id').findById('center_id').getFrame().load({url: 'CenterFrame2.html'});
}

</script>
</head>
<body>
</body>
</html>



CenterFrame1.html


<h3>CenterFrame1.html</h3>
<a href="javascript:void(0);" onClick="parent.displayCenter();">Load CenterFrame2.html</a>
CenterFrame2.html


<h3>CenterFrame2.html</h3>

hendricd
9 Oct 2009, 6:33 AM
@AgentSmith --
Please post questions/problems with the user-extensions in the thread of the extension. Thx.

See inlines:




<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../ext/resources/images/default/s.gif';

Ext.onReady(function(){

var viewport =
new Ext.Viewport({
layout: "border",
id: 'viewport_id',
renderTo: Ext.getBody(),
items: [{
region: "north",
id: 'north_id',
xtype: 'panel',
height: 100,
html: 'North'
},{
region: 'center',
id: 'center_id',
xtype: 'iframepanel',
frameCfg: {name: 'center_iframepanel_id'},
autoLoad: 'CenterFrame1.html'
}]
});
}); // Ext.onReady()

function displayCenter(){ //Anonymous functions are not visible from child frames
window.displayCenter = function(){
Ext.getCmp('viewport_id').findById('center_id').getFrame().load({url: 'CenterFrame2.html'});
Ext.getCmp('center_id').setSrc('CenterFrame2.html'); //go direct and use setSrc
}

</script>


CenterFrame1.html


<h3>CenterFrame1.html</h3>
<a href="javascript:void(0);" onClick="parent.displayCenter();">Load CenterFrame2.html</a>
CenterFrame2.html


<h3>CenterFrame2.html</h3>


You might want to study the Link Interception code in this demo as well: http://demos.theactivegroup.com/demodesk.html?demo=mif&script=treenav

AgentSmith
9 Oct 2009, 6:57 AM
It is still giving me the same problems. Click back button and click link in iframepanel and nothing happens?

hendricd
9 Oct 2009, 7:01 AM
It is still giving me the same problems. Click back button and click link in iframepanel and nothing happens?

Because load/autoLoad is frame-writing (content received from an Ext.Ajax request). There is no frame.src property to go back to. ;)

hendricd
9 Oct 2009, 7:07 AM
Back button behavior would simply require:


{
region: 'center',
id: 'center_id',
xtype: 'iframepanel',
frameCfg: {name: 'center_iframepanel_id'},
autoLoad: 'CenterFrame1.html'
defaultSrc: 'CenterFrame1.html'
}

AgentSmith
9 Oct 2009, 7:26 AM
Why does this work in IE then? Is there another approach you would recommend?

AgentSmith
9 Oct 2009, 7:38 AM
Why does this work in IE then? Is there another way to accomplish this then?

hendricd
9 Oct 2009, 7:44 AM
@AgentSmith -- I have no idea what your goals are (or why) with all this?

Are all the frames going to be "same-origin" (your site only) frames?

AgentSmith
9 Oct 2009, 7:47 AM
Sorry, messed up on post order. Anyway, still not working. Here the lasted changes:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="../../ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext/ext-all.js"></script>

<script type="text/javascript" src="../../ext/ux/ext-basex.js"></script>

<!-- This JS file is required to incorporate the ManagedIFrame user extension. -->
<script type="text/javascript" src="../../ext/ux/mif/miframe.js"></script>

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../ext/resources/images/default/s.gif';

/* Main application entry point. */
Ext.onReady(function(){

var viewport =
new Ext.Viewport({
layout: "border",
id: 'viewport_id',
renderTo: Ext.getBody(),
items: [{
region: "north",
id: 'north_id',
xtype: 'panel',
height: 100,
html: 'North'
},{
region: 'center',
id: 'center_id',
xtype: 'iframepanel',
frameCfg: {name: 'center_iframepanel_id'},
defaultSrc: 'CenterFrame1.html'
}]
});
}); // Ext.onReady()

window.displayCenter =
function(){
Ext.getCmp('center_id').setSrc('CenterFrame2.html');
}

</script>
</head>
<body>
</body>
</html>

No changes to CenterFrame1.html and CenterFrame2.html

AgentSmith
9 Oct 2009, 7:52 AM
> I have no idea what your goals are (or why) with all this?

Goal is if a user clicks the back button and clicks the same or another link in the iframepanel it should go to that link. You don't want to user to click on a link that no longer works simply because they used the browser's back button.

> Are all the frames going to be "same-origin" (your site only) frames?

Yes, just the three files show on my local file system.

AgentSmith
9 Oct 2009, 8:08 AM
Interesting find. When I try to debug in Firebug it works! Turn off Firebug and it doesn't work. Any clues?

charleshimmer
9 Oct 2009, 8:08 AM
I have an app where my users have multiple monitors and they want to be able run the main app window in one monitor, but drag one of the app's popup windows to a second monitor.

A separate browser window is the only way I can think of possibly doing this. Can you think of another way?

hendricd
9 Oct 2009, 8:13 AM
Interesting find. When I try to debug in Firebug it works! Turn off Firebug and it doesn't work. Any clues?

There may be a console.log statement in the iframe[-debug].js builds. (The browsers error console should indicate that or another error). if so, remove them.

hendricd
9 Oct 2009, 8:16 AM
I have an app where my users have multiple monitors and they want to be able run the main app window in one monitor, but drag one of the app's popup windows to a second monitor.

A separate browser window is the only way I can think of possibly doing this. Can you think of another way?

Sorry @Charlie, ;)

This extension is for Managing Iframes not other browser instances.

I'm assuming the 'dream' is to be able to drag an Ext.Window out of the current browser and plop it somewhere else? Ain't gonna happen in our life-times. ;)

charleshimmer
9 Oct 2009, 8:23 AM
Right, I know you can't take an Ext.Window and move it out of the browser, but I was wondering how similar iFrames and browser popup windows are.

Because an independent browser window could be moved to another monitor. I guess I need to find out how hard would it be the parent browser window and the newly created child browser window to communicate. I was also curious if there were any similarities between that communication and managing an iframe in the ext framework.

Thought I might as well ask in the off-chance they were similar or somebody had experience with this ;)

AgentSmith
9 Oct 2009, 8:30 AM
Attached is the console screen shot of the error which occurs when I click on the Load CenterFrame.html link after clicking the browser back button.

hendricd
9 Oct 2009, 8:31 AM
Right, I know you can't take an Ext.Window and move it out of the browser, but I was wondering how similar iFrames and browser popup windows are.

Because an independent browser window could be moved to another monitor. I guess I need to find out how hard would it be the parent browser window and the newly created child browser window to communicate. I was also curious if there were any similarities between that communication and managing an iframe in the ext framework.

Thought I might as well ask in the off-chance they were similar or somebody had experience with this ;)

Think about it. If we could 'legally' do that we could corrupt your machine with un-briddled violence.

hendricd
9 Oct 2009, 8:40 AM
Attached is the console screen shot of the error which occurs when I click on the Load CenterFrame.html link after clicking the browser back button.

@AgentSmith --

Switch to miframe-debug.js for better line identification.

I'd really need to see/understand your long-range plans for all this to identify problems (with history->back) you're gonna have.

AgentSmith
9 Oct 2009, 9:04 AM
>Switch to miframe-debug.js for better line identification.

Used debug version. Same error message but line number is now 1271.

>I'd really need to see/understand your long-range plans for all this to identify problems (with history->back) you're gonna have.

Not sure what you're asking for but my "long-range plans" is to build a border layout with the center region listing some documents. User selects document, center region now displays document selected. Another region (call it west) now changes to display other information relating to the document displayed in center region. If user clicks the browser back button, the center region and west regions now shows the original contents (list of documents for center region and default content for west region). User should now be able to select the same or another document.

Have you tried running this yourself? Are you getting the same problem?

hendricd
9 Oct 2009, 9:10 AM
Finally, ManagedIFrame 2.0 suite has moved to a tag release. =D>

Get the latest zip on the first post of this thread.


Known issues:
Opera 10 iframe load events appear to be raised when anything in the frame is loaded (eg images, etc). This wreaks havoc with domready/documentloaded detection.

Pending:
X-frame drag-drop is still under development. Will advise when something is demonstrable.

hendricd
9 Oct 2009, 9:14 AM
>Switch to miframe-debug.js for better line identification.

Used debug version. Same error message but line number is now 1271.

>I'd really need to see/understand your long-range plans for all this to identify problems (with history->back) you're gonna have.

Not sure what you're asking for but my "long-range plans" is to build a border layout with the center region listing some documents. User selects document, center region now displays document selected. Another region (call it west) now changes to display other information relating to the document displayed in center region. If user clicks the browser back button, the center region and west regions now shows the original contents (list of documents for center region and default content for west region). User should now be able to select the same or another document.

Have you tried running this yourself? Are you getting the same problem?



Using the 'back' button will only be successful if you use defaultSrc config and/or setSrc method when updating the URL of your center region. You cannot use frame-writing (load/autoLoad) in that scenario until support is added for Ext.History (planned for next release).


Try the latest MIF 2.0 release before thrashing too much more on that. ;)

AgentSmith
9 Oct 2009, 9:52 AM
I am using your suggestion and still having problems. See code below.



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="../../ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext/ext-all-debug.js"></script>

<!-- This is required to load html content from local filesystem.
See "Loading HTML from Local Filesystem.jpg" in "ext/ux" folder
for more information. -->
<script type="text/javascript" src="../../ext/ux/ext-basex.js"></script>

<!-- This JS file is required to incorporate the ManagedIFrame user extension. -->
<script type="text/javascript" src="../../ext/ux/mif/build/miframe-debug.js"></script>

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../ext/resources/images/default/s.gif';

Ext.onReady(function(){

var viewport =
new Ext.Viewport({
layout: "border",
id: 'viewport_id',
renderTo: Ext.getBody(),
items: [{
region: "north",
id: 'north_id',
xtype: 'panel',
height: 100,
html: 'North'
},{
region: 'center',
id: 'center_id',
xtype: 'iframepanel',
frameCfg: {name: 'center_iframepanel_id'},
defaultSrc: 'CenterFrame1.html'
}]
});
}); // Ext.onReady()

window.displayCenter =
function(){
Ext.getCmp('center_id').setSrc('CenterFrame2.html');
}

</script>
</head>
<body>
</body>
</html>

hendricd
9 Oct 2009, 9:55 AM
What's the problem?
What Error?
What line?

How do I recreate it, with that sparse explanation? /:)

AgentSmith
9 Oct 2009, 10:23 AM
>What's the problem?
>What Error?
>What line?

>How do I recreate it, with that sparse explanation?

Somehow this conversation has been posted under multiple treads. Here's another link associated with the thread:

http://www.extjs.com/forum/showthread.php?t=71961&page=23 (http://www.extjs.com/forum/showthread.php?t=71961&page=23)

mschwartz
10 Oct 2009, 7:43 AM
hendricd - have you ever tried this extension with a browser pop up window?


Ha!

What on earth for? :-?

henricd,

It's a valid question.

An opened browser popup window can behave exactly like a frame or iframe. It has document, body, document.write, events, etc. All the tricks you pull for iframe would be of great use in such popups.

charleshimmer asked about using ExtJS with such popups in another thread and was told by other posters that MIF might be of interest to him.

I don't question why people choose to design their apps to use popups or not; often design is a political and not technical issue.

EDIT:

I read charles' posts again. His requirement is to support dual monitors. He wants some of the interface to be in a second browser window (not Ext.Window) so the user can drag one of the browser windows to another screen. Seems reasonable.

I don't see anywhere that he is intending to/asking to be able to do any cross site violations.

But things like how you do cross frame messaging, getFrameDocument(), and so on, make sense in such a scenario. Particularly your trick for instantiating Ext in an iframe without script tags...

My own use for miframe is similar, though not in browser popup windows. The app I'm working on is a legacy app that did use browser popups and tab panels to render forms from the same server (i.e. dialogs and such). There are literally hundreds of such forms, and I've gradually converted many to ExtJS styled forms...

Cheers

hendricd
13 Oct 2009, 6:53 AM
henricd,

It's a valid question.

An opened browser popup window can behave exactly like a frame or iframe. It has document, body, document.write, events, etc. All the tricks you pull for iframe would be of great use in such popups.

charleshimmer asked about using ExtJS with such popups in another thread and was told by other posters that MIF might be of interest to him.

I don't question why people choose to design their apps to use popups or not; often design is a political and not technical issue.

EDIT:

I read charles' posts again. His requirement is to support dual monitors. He wants some of the interface to be in a second browser window (not Ext.Window) so the user can drag one of the browser windows to another screen. Seems reasonable.

I don't see anywhere that he is intending to/asking to be able to do any cross site violations.

But things like how you do cross frame messaging, getFrameDocument(), and so on, make sense in such a scenario. Particularly your trick for instantiating Ext in an iframe without script tags...

My own use for miframe is similar, though not in browser popup windows. The app I'm working on is a legacy app that did use browser popups and tab panels to render forms from the same server (i.e. dialogs and such). There are literally hundreds of such forms, and I've gradually converted many to ExtJS styled forms...

Cheers

Yeah, put that way, I can see what the appeal for that sort of thing might be.

I actually started a ManagedBrowserWindow class in my 'pre-Ext' days. Might be worth re-kindling that one but as it stands now, the Event management is drastically different for another browser window context than that of a frame/iframe element.

:-?

benmclendon
13 Oct 2009, 7:24 AM
I am having trouble moving to the new versions.

I get this error from firebug:

Ext.ux.ManagedIFrame is undefined



function AddCenterTabIF(tabUrl, tabTitle, tabIcon) {
centerTabs = Ext.getCmp('tabs');
tab = centerTabs.add(new Ext.ux.ManagedIframePanel({
title : tabTitle,
iconCls : tabIcon,
defaultSrc : tabUrl,
loadMask : false,
closable : true,
bodyStyle : 'overflow: auto'
}));
centerTabs.setActiveTab(tab);
}

hendricd
13 Oct 2009, 7:29 AM
@benmclendon --

MIF 2.0 namespaces are bit more formal than Ext 2/ MIF 1.x.

Use


function AddCenterTabIF(tabUrl, tabTitle, tabIcon) {
centerTabs = Ext.getCmp('tabs');
tab = centerTabs.add(
// new Ext.ux.ManagedIFrame.Panel({ //or
{ xtype : 'iframepanel',
title : tabTitle,
iconCls : tabIcon,
defaultSrc : tabUrl,
loadMask : false,
closable : true,
bodyStyle : 'overflow: auto'
autoScroll : true
}));
centerTabs.setActiveTab(tab);
}

benmclendon
13 Oct 2009, 8:35 AM
@Doug

Thanks, that got me going in the right direction... I think?

I am creating tabs again, but they are empty...



function AddCenterTabIF(tabUrl, tabTitle, tabIcon) {
centerTabs = Ext.getCmp('tabs');
tab = centerTabs.add(new Ext.Panel({
xtype : 'iframepanel',
title : tabTitle,
iconCls : tabIcon,
defaultSrc : tabUrl,
loadMask : false,
closable : true,
autoScroll : true
}));
centerTabs.setActiveTab(tab);
}

hendricd
13 Oct 2009, 8:40 AM
@benmclendon--

If the tabPanel is already rendered you must:



function AddCenterTabIF(tabUrl, tabTitle, tabIcon) {
var centerTabs = Ext.getCmp('tabs');
var tab = centerTabs.add(new Ext.Panel({
xtype : 'iframepanel',
title : tabTitle,var
iconCls : tabIcon,
defaultSrc : tabUrl,
loadMask : false,
closable : true,
autoScroll : true
}));
centerTabs.rendered && centerTabs.doLayout();
centerTabs.setActiveTab(tab);
return tab;
}

benmclendon
13 Oct 2009, 9:12 AM
@Doug

I made the changes...I don't think it s actually creating an iframe. You can see it here.

https://employee.barneshc.com/pages/homepagemif2.php

hendricd
13 Oct 2009, 9:27 AM
One more time!


function AddCenterTabIF(tabUrl, tabTitle, tabIcon) {
var centerTabs = Ext.getCmp('tabs');
var tab = centerTabs.add( new Ext.Panel({
{
xtype : 'iframepanel',
title : tabTitle,var
iconCls : tabIcon,
defaultSrc : tabUrl,
loadMask : false,
closable : true,
autoScroll : true
}));
centerTabs.rendered && centerTabs.doLayout();
centerTabs.setActiveTab(tab);
return tab;
}

benmclendon
13 Oct 2009, 9:51 AM
@Doug

MONEY!! Thanks for your patience.

-=BEN=-

andynuss
13 Oct 2009, 12:14 PM
@Doug,

I think I found a bug. I'm using RC2, with 3.0.0 on latest firefox on linux. I have a large document on a local tomcat instance with many pages, and navigation controls that cause mif.setSrc() to be called. I also have a find hits control that scrolls the document thru found term hits, where the bug shows up. In order to highlight the hits, I trap the domready listener with:



listeners : {
domready : function (frame) {
OnDocumentLoad();
},
focus : function (frame, e) {
//console.log('focus');
RemoveFindHighlights();
},
blur : function (frame, e) {
//console.log('blur');
},
}


and my OnDocumentLoad function is what highlights the hits. What I found is that occasionally and randomly, this event listener never gets called, yet the next page with a hit that I want to highlight does indeed render. The guarantee of the call of this function is extremely important, as I manipulate the dom in many other ways.

Let me know if you can reproduce and fix. In the meantime, I guess I have to install a timer task that calls OnDocumentLoad if I test the dom to be ready, else repeats itself.

Also, I noticed the following bugs of lessor importance to me, because I found workarounds:

1) I could never get scrollChildIntoView('myid') to work. Nothing happens, though there are no javascript errors reported. So I resorted to calculating positions and using javascript scrollTo() function.

2) when mif is asked to setSrc() to URL with a # anchor, the server is not hit (good), and the mif just scrolls the document. But domready listener is not invoked. This might be a feature, but I didn't expect it.

3) when mif is asked to setSrc() to URL with an anchor, the focus/blur event mechanism of the mif becomes broken. Apparently, the focus is brought back to the mif, (from the find control that triggered the anchor scroll), but mif does not call the focus listener.

4) focusOnLoad did not work for me, in that it did not cause my focus listener to be called.

Andy