PDA

View Full Version : [2.0 only] ux.ManagedIframe/Panel (1.2.7)



Pages : [1] 2 3 4 5

hendricd
13 Apr 2008, 8:30 AM
ux.ManagedIFrame/Panel (Current Release 1.2.7, for Ext 2.2.x or under only)

A version for Ext 3.0 can be found here (http://extjs.com/forum/showthread.php?t=71961).

The latest build is also available on code.google (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

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)
unload (fired when the frame document is unloaded)

ux.ManagedIframePanel (Current Release 1.2, extends Ext.Panel) leverages the cool layout management features of a Panel, but embeds a ManagedIframe into the body of the panel. This preserves the native header, footer, and toolbar support of a standard panel, but permits creation of complex body layouts surrounding an IFrame.

Licensing: MIF/MIFP v1.2 or higher is dual-licensed: LGPL 3.0 or CDL (http://licensing.theactivegroup.com) for commercial use.

Related Links:

Wiki Manual here (http://extjs.com/forum/../learn/Extension:ManagedIframe).
MIF Frame Security (http://extjs.com/forum/../learn/ManageIframe:Manual:Frame_Security) and the "same-origin" policy.
FF IFRAME Refresh Troubles (http://extjs.com/forum/showthread.php?p=110004#post110004)?
For an advanced demonstration, see post: "Load Ext once, and apply it to your frames" (http://extjs.com/forum/showthread.php?p=120384#post120384).
Previous 1.0 Baseline Forum thread (http://extjs.com/forum/showthread.php?p=79491#post79491).

Usage Example:



var newFrame = yourTabPanel.add({
xtype : 'iframepanel',
id : 'mifp_1',
title : 'Loading...',
loadMask : true,
frameConfig: {{autoCreate:{id: 'frame1'}}, //optional, give the frame your own id and name
defaultSrc : 'assets/someURL.html',
listeners: {
domready : function(frame){ //only raised for "same-origin" documents
//Set the tab Title to the Document Title
var doc= frame.getDocument();
if(doc){ frame.ownerCt.setTitle(doc.title); }

//Add some custom CSS Rules to the frame document
var rule = 'p.fancyP {padding:5px 10px 5px 10px;border:1px solid;' +
'font:normal 11px tahoma,arial,helvetica,sans-serif;}';
frame.CSS.createStyleSheet( rule, 'fancyP' );

//Find all the 'p' tags in the frame docuement, and add the fancyP className to them
frame.select('p').addClass('fancyP');
}
}
});
yourTabPanel.doLayout(); //if TabPanel is already rendered
yourTabPanel.setActiveTab(newFrame);
More Examples:
Extract the current source and demo files from miframe1_2.zip directly into a new/existing: /examples/miframe directory of your standard 2.x Ext.distribution (except for the desktop.zip demo -- that should go in /examples/desktop).

Updated: Version 1.1 This new baseline (1.1) adds:

frame Ext.Element support (ie. MIF.get, getDom, getDoc, fly ),
frame CSS selector queries (eg. MIF.select/query) ,
frame CSS.styleSheet interface (create, modify, remove frame-embedded style rules)
frame Ext.EventManager support to DOM elements embedded in a frames document. (Use the MIF interface to query embedded DOM elements just like you would in the parent document; all without loading the Ext framework within the embedded page):



MIF.select('img',true).setOpacity(.5); or
MIFPanel.getFrame().select('img',true).setOpacity(.5);
Set EventListeners on a frames DOM elements for handling with scripts hosted in the parent page:


MIF.getDoc().on('click',function(e){ alert( 'Image ' + e.getTarget().id + ' was Clicked.') },null, {delegate:'img'});
Updated (8/22/08): Version 1.2 released. Adds FF3 compatibility fixes, and improved loadMask support.

Updated (4/26/09): Version 1.2.4 released. Adds [s]Ext 3.0 compatibility[s/] no longer (http://extjs.com/forum/showthread.php?p=343569#post343569), and adds 'resize' event support.
Updated (5/16/09): V 1.2.5 fixes X-Frame Messaging bug.
Updated (6/30/09): V 1.2.6 fixes domready bug, adds submitAsTarget method.
Updated (11/10/09): V 1.2.7 fixes another domready bug.

Thanks to all for the valuable feedback.
Note: the current vBulletin config gzips attachments which IE hates. Download this with Firefox (or other browser) instead of IE.

wm003
13 Apr 2008, 10:44 AM
Great Stuff! Thanks for such a useful Extension!=P~

Zakaroonikov
13 Apr 2008, 1:54 PM
If I were to point this to say a PDF file or Word document would any event fire after the file had been launched?

hendricd
13 Apr 2008, 2:31 PM
@Zakaroonikov -- If you are speaking of "same-origin" documents, you can get the MIF's 'domready' event working for you as it would fire immediately after the frames' new page markup as been DOMized.

Also, there is the 'documentloaded' event which is raised when all the 'assets' are finally loaded.

Short of that, you'd need a browser.plugin event to guarantee full 'load' status.

fangzhouxing
13 Apr 2008, 10:35 PM
Can anyone give some scenario that must use ManagedIframePanel instead of other component?

hendricd
14 Apr 2008, 3:21 AM
@fangzhouxing -- other component?

nkohari
14 Apr 2008, 6:18 AM
This is fantastic! Thanks hendricd. You might also want to note that in 1.1 you have to hook listeners to the ManagedIframePanel itself, rather than putting them in the frameConfig as you did with 1.0x. Unless, that is, I was just doing something "unsupported" that happened to work. :)

Keep up the great work on this extension, it's been a lifesaver for me.

mykes
14 Apr 2008, 6:21 AM
Can anyone give some scenario that must use ManagedIframePanel instead of other component?

Any place you would display user generated content. If the user can somehow create bad HTML (no close tags for tables or divs or whatever), it can screw up the page display in "other" components.

hendricd
14 Apr 2008, 6:29 AM
@nkohari -- No, that is by design. The MIF events are actually "relayed" to the MIFPanel listeners if you define them on the Panel.

The frameConfig allows the same listeners to be passed to MIF class too (via the Panel), your choice.

mykes
14 Apr 2008, 9:49 AM
OK, maybe this is a little over the top, but...



window.onload = function() {
var base = top.location.href;
base = base.replace(/\?.*$/, "");
base = base.replace(/\#.*$/, "");
var base_len = base.length;
var anchorTags = document.getElementsByTagName('a');
for (var i = 0; i < anchorTags.length; i++)
{
var url = anchorTags[i].href;
if (url.substr(0, base_len) != base) {
anchorTags[i].onclick = function() {
var i = 0;
window.open(url);
return false;
}
}
else {
anchorTags[i].onclick = function() {
location.href = url;
return false;
}
}
}
}
If you run the above code in the iframe, on document load, it fixes all the non-local-domain links so they open in a new window. I give you this code because it doesn't require you to load Ext into the iframe...

Now if you display some user generated HTML content in the iframe that has a link in it, when the user clicks on the link, it doesn't wipe out the entire desktop to load the new page in the browser.

You could run that code for people if some config variable is passed to iframe constructor.

Feel free to modify it to suit your purposes :)

hendricd
14 Apr 2008, 10:32 AM
@mykes - You could do that now with 1.1 from the parent (same-origin frame only):

With a delegated listener:


MIF.getDoc().on('click',function(e){
e.target.target = '_blank';
},null, {delegate:'a'});
or, in one pass each time the page is loaded:


MIF.on('domready', function(frame){
frame.select('a').set({target: '_blank'});
});

svdb
14 Apr 2008, 2:13 PM
Hi Doug,
It seems the Exception event doesn't get fired on IE6 when a invalid/broken url is fed to MIF (FF is fine though). Is that an IE bug, a MIF bug, a feature?...

sanjshah
14 Apr 2008, 2:50 PM
Hi,

How can I set the height of the center as in the example to full?

Also if I add a bbar in the north what code do I need to change the page loaded in the center region.

Thanks in advance.

hendricd
14 Apr 2008, 3:00 PM
@sanjshah -- the iframesdemo.html (in the demoPack.zip) demonstrates how to handle both of those.

hendricd
14 Apr 2008, 3:04 PM
@svdb -- The MIF.setSrc function is wrapped for exception event handling, so IE6 must not be raising one for a mangled URL.

Are you suggesting validation before applying it?

cmarin
14 Apr 2008, 3:11 PM
I'm experiencing the exact same problem that this person had and I can't seem to find a solution:
http://extjs.com/forum/showthread.php?t=21135

One I set a page using defaultSrc, then changing it in the future does not seem to make a difference, even after clearing the cache. For example, if I set it to http://www.google.com, and load the page, Google load up just fine in the iFrame. If I edit defaultSrc and point it to http://www.amazon.com, clear my cache, and reload the page, Google still loads, which totally totally mystifies me. I've also tried this with local docs and the same thing happens. Does anyone have any suggestions? I'd really appreciate some help.

Here's my code:

new Ext.TabPanel({
region:'center',
id:'tabPanel',
deferredRender:false,
activeTab:0,
items:[{
contentEl:'extform',
title: 'Form',
autoScroll:true
},{
title: 'Visual',
id : 'viz',
xtype :'iframepanel',
frameConfig: { autoCreate:{ id:'myFrame', name:'myFrame', frameborder:0 }
,eventsFollowFrameLinks : false
},
defaultSrc : 'http://www.amazon.com'
}]
})

hendricd
14 Apr 2008, 3:19 PM
The defaultSrc property is a Component config startup url, and it not considered again after the Panel is rendered.

To change the current url, use the setSrc method after rendering, when you're ready:



Ext.getCmp('viz').setSrc('http://www.google.com');

sanjshah
14 Apr 2008, 3:22 PM
Apologies,

Don't worry you've just posted an example!



@sanjshah -- the iframesdemo.html (in the demoPack.zip) demonstrates how to handle both of those.

hendricd
14 Apr 2008, 3:31 PM
@sanjshah -- You can handle several ways, the simplest is to pass your links the target name of the IFrame:

add a frameConfig to your IFramePanel, giving the frame a name and the MIFP an id:


id:'centerFrame',
frameConfig: { name : 'your_frame_name' }

<a href="something.html" target="your_frame_name">Google</a>Or if you have a fancy link handler, this would do it via script:


Ext.getCmp('centerFrame').setSrc('http://www.google.com');

jarrod
14 Apr 2008, 11:35 PM
Not sure if anyone else has this problem...

LoadMask appears and disappears very quickly - even while iframe page load request is still ongoing?

Edit: okay, found this in your sample config...
loadMask : {hideOnReady:true, msg:'Masked Until domready...'}

Setting hideOnReady:false, resolves the problem. However, not sure if it's just me, but I think the domready event seems to fire too soon?

sanjshah
15 Apr 2008, 6:33 AM
Aplogies, but I'm not sure what I'm doing wrong, here is my main page:



Ext.BLANK_IMAGE_URL = '../ext-2.0/resources/images/default/s.gif';

Ext.onReady(function(){
Ext.QuickTips.init();
Ext.QuickTips.getQuickTip().interceptTitles = true;
Ext.QuickTips.enable();

// create some portlet tools using built in Ext tool ids
var tools = [{
qtip:'Reset',
id:'gear',
handler: function(e, target, panel){
panel.setSrc();
}
},{
id:'close',
qtip:'Close',
handler: function(e, target, panel){
panel.ownerCt.remove(panel, true);
}
}];


var viewport = new Ext.Viewport({
layout:'border',
items:[{
region:'west',
id:'west-panel',
title:'O&M Sites',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: false,
animCollapse :Ext.isIE,
//margins :'35 0 5 5',
//cmargins :'35 5 5 5',
margins :'5 5 5 5',
cmargins :'5 5 5 5',
layout :'accordion',
defaultType :'iframepanel',
layoutConfig :{
animate: Ext.isIE
},
defaults :{
loadMask:false,
border:false
},
items : [{
html: Ext.example.shortBogusMarkup,
title:'Navigation'
},{
title:'Settings',
//html: Ext.example.shortBogusMarkup
defaultSrc : 'links.html'
}]
},
{
xtype :'portal',
hideMode :!Ext.isIE?'nosize':'display',
region :'center',
id:'centerFrame',
frameConfig: { name : 'mycenterFrame' },
margins :'5 5 5 5',
defaults:{
hideMode:!Ext.isIE?'nosize':'display'
},
title:'Manuals Portal',
items:[{
columnWidth:1,
style:{padding:'10px 10px 10px 10px'},
defaultType:'iframeportlet',
defaults:{
height:800
,loadMask:false
,tools: tools
},
items:[{
title:'Default Site'
,defaultSrc : 'login.asp'
}]
}]
}]
});
var toggle = false;
var comeHome = function(){ Ext.getCmp('sites').activeTab.setSrc();},
printPanel = function(){
try{
Ext.getCmp('sites').activeTab.iframe.print();
}catch(ex){Ext.Msg.alert('Sorry','Print Failure!<br />'+ex);}
},
_urlDelim = '\/',
getLocationAbsolute = function(){
var d= _urlDelim = location.href.indexOf('\/') != -1 ? '\/':'\\';
var u=location.href.split(d);
u.pop(); //this page
return u.join(d);
},
getSiteRoot = function(){
var url = getLocationAbsolute().split(_urlDelim );
url.pop();
return url.join(_urlDelim);
};


win = new Ext.Window({
title: 'WebBrowser Fun',
id:'browserfun',
layout:'fit',
minimizable: false,
maximizable: true,
width:600,
height: 500,
plain: false,
items:{
xtype:'tabpanel',
id:'sites',
defaultType: 'iframepanel',
defaults:{
closable:true,
loadMask:{msg:'Loading Site...'},
autoShow:true,

tbar : [{ text:'Return',handler: comeHome},
'-',
{text: 'Print',handler: printPanel},
'-',
{
split:true,
text:'Drop Down Menu',
iconCls: 'preview-bottom',
handler: null,
menu:{
id:'reading-menu',
cls:'reading-menu',
width:200,
listeners:{ //mask all frames while menu is visible.
beforeshow : Ext.ux.ManagedIFrame.Manager.showDragMask,
hide : Ext.ux.ManagedIFrame.Manager.hideDragMask,
scope : Ext.ux.ManagedIFrame.Manager

},
items: [{
text:'Bottom',
checked:true,
group:'rpgroup',
scope:this,
iconCls:'preview-bottom'
},{
text:'Right',
checked:false,
group:'rpgroup',
scope:this,
iconCls:'preview-right'
},{
text:'Hidden',
checked:false,
group:'rpgroup',
scope:this,
iconCls:'preview-hide'
}]
}
}
],
listeners:{
activate:function(panel){
///panel.getFrame().removeShim();
}
}
}, // prevent frames from bleeding thru overLayed tabs
listeners:{
beforetabchange:function(tabPanel,newTab,prevTab){
//if(prevTab)prevTab.getFrame().applyShim();
}
},
items: [{
id: 'google'
,title:'Google'
,defaultSrc : function(){return 'http://www.google.com';}
}, {
id: 'ajaxian'
,title:'Ajaxian'
,defaultSrc : 'http://www.ajaxian.com'

}, {
id: 'extjs'
,title:'Ext Forums'
,defaultSrc : 'http://extjs.com/forum/showthread.php?t=16590'
},{
id: 'bogus'
,title:'Bogus Markup'
,loadMask:{msg:'Loading Printable Bogus Markup...'}
//,frameStyle : {overflow:'scroll'}
//,frameConfig:{scrolling: 'yes', style:{overflow:'scroll'}}
,html: '<h1>This Iframe should be printable.</h1>'+Ext.example.bogusMarkup

,tbar:[{
text: 'Print',
handler: printPanel
},'-',{
text: 'Switch', //<-- Added this .reset sample
handler: function(){
var i;
if(i=Ext.getCmp('sites').activeTab){
toggle = !toggle;
if (toggle){
i.setSrc('http://www.google.com', true);
}else{
i.getFrame().reset(null, function(){
i.getFrame().update('<h1>This Iframe should be printable.</h1>'+Ext.example.bogusMarkup);

});

}
}
}
}]
}
]
}
});
win.show(Ext.getBody());

Ext.EventManager.on(window, "beforeunload", function(){

Ext.destroy(viewport, win);

},window,{single:true});


});

here is the links page which is loaded in the west region:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="exttools/ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="exttools/ext-2.0/ext-all-debug.js"></script>
<script type="text/javascript" src="exttools/iframe/Portal.js"></script>
<script type="text/javascript" src="exttools/iframe/PortalColumn.js"></script>
<script type="text/javascript" src="exttools/iframe/Portlet.js"></script>
<script type="text/javascript" src="exttools/iframe/miframe.js"></script>
<script type="text/javascript">
<!--
function MM_callJS(jsStr) { //v2.0
return eval(jsStr)
}
//-->
</script>
</head>
<script type="text/javascript">
function changepage()
{
Ext.getCmp('mycenterFrame').setSrc('http://www.google.com');
}
</script>

<body>
<a href="#" onclick="MM_callJS('changepage()')">Change mycenterframe</a><br />
</body>
</html>


Not sure whats wrong here?

hendricd
15 Apr 2008, 6:41 AM
@sanjshah -- Any particular reason why your loading an iframe into the west regions (with All of Ext in it) just to render a menu?

By doing that, your onclick handlers are out of scope with the main page. It'll never find the center-region frame running in its own frame.

sanjshah
15 Apr 2008, 6:50 AM
No reason other than I would like to show a different menu in that region depending on page is loaded in the centre region, although I might be able to get around that if I a bbar to the loaded in the center page, could you please provide a very simple example a menu in the west region so that I can work on it PLEASE (I apologise but I learning as I working on a project!)

Thanks!


@sanjshah -- Any particular reason why your loading an iframe into the west regions (with All of Ext in it) just to render a menu?

By doing that, your onclick handlers are out of scope with the main page. It'll never find the center-region frame running in its own frame.

hendricd
15 Apr 2008, 7:04 AM
OK, let's keep this simple then:



var viewport = new Ext.Viewport({
layout:'border',
items:[{
region:'west',
id:'west-panel',
title:'O&M Sites',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: false,
margins :'5 5 5 5',
cmargins :'5 5 5 5',
layout :'accordion',
defaultType :'iframepanel',
layoutConfig :{
animate: Ext.isIE
},
defaults :{
loadMask:false,
border:false
},
items : [{
html:'<a href="http://www.yahoo.com" target="mycenterFrame">Change mycenterframe</a><br />',
title:'Navigation'
}]
},
{
xtype :'portal',
hideMode :!Ext.isIE?'nosize':'display',
region :'center',
id:'centerFrame',
frameConfig: { name : 'mycenterFrame' }, margins :'5 5 5 5',
title:'Manuals Portal',
items:[{
columnWidth:1,
style:{padding:'10px 10px 10px 10px'},
defaultType:'iframeportlet',
defaults:{
height:800
,loadMask:false
,tools: tools
},
items:[{
title:'Default Site' ,
frameConfig: { name : 'mycenterFrame' },
defaultSrc : 'login.asp'
}]
}]
}]
});

sanjshah
15 Apr 2008, 7:30 AM
Thanks hendricd,

That's great! I can play around with code provided.

Regards,

Sanj

cmarin
15 Apr 2008, 12:29 PM
Doug,
Thank you so much, you're suggestion worked! The only issue I'm facing now is that the local page that is loaded in the iFrame is cut off at the bottom and no scroll bars are appearing. I notice that if I change the iFrame to point to Amazon's homepage though, the scroll bars appear automatically. Do you happen to have any suggestions to fix this?


The defaultSrc property is a Component config startup url, and it not considered again after the Panel is rendered.

To change the current url, use the setSrc method after rendering, when you're ready:



Ext.getCmp('viz').setSrc('http://www.google.com');

hendricd
15 Apr 2008, 12:41 PM
@cmarin -- The default styling for the rendered frame is overflow:auto, thus scollbars will not appear unless necessary. Is your start page a "short" one?

cmarin
15 Apr 2008, 1:22 PM
Doug, thank you again. Yes, the page that houses the iFrame takes up the height and width of the screen so in many cases it will be shorter than the one it will house in the iFrame. Is there any way around this?


@cmarin -- The default styling for the rendered frame is overflow:auto, thus scollbars will not appear unless necessary. Is your start page a "short" one?

hendricd
15 Apr 2008, 1:24 PM
Are you looking for scrollbars ON all the time?

cmarin
15 Apr 2008, 1:59 PM
For the iFrame itself autoscroll would be ideal but if that is not possible scrollbars at all times would be an improvement over not being able to see the bottom of the page. Thanks again.


Are you looking for scrollbars ON all the time?

hendricd
15 Apr 2008, 3:10 PM
Can you post a current MIF and surrounding panel configs. Something doesn't sound right (just can't see it yet) ;)

cmarin
15 Apr 2008, 4:00 PM
Really appreciate this. Is this enough code or would more be better? Also, is there any way to make it so that Visual tab can't be closed?



new Ext.TabPanel({
region:'center',
id:'tabPanel',
deferredRender:false,
activeTab:0,
items:[{
contentEl:'extform',
title: 'Form',
autoScroll:true
},{
title: 'Visual',
id : 'visual_tab',
xtype :'iframepanel',
frameConfig: { name : 'vizwin' }
}]
})
]
});
Ext.getCmp('visual_tab').setSrc('/cms/content/visual_edit?id=1&zone_id=1');



Can you post a current MIF and surrounding panel configs. Something doesn't sound right (just can't see it yet) ;)

hendricd
15 Apr 2008, 4:09 PM
Also, is there any way to make it so that Visual tab can't be closed?Add closable:false to each tabPanel item.

Not much help with the last post. The viewport is going to consume the entire browser client area, so content smaller than its borders (by default) will not generate scroll bars unless overflow occurs.

Do scrollers appear if you resize the browser (making it smaller)?
Do you have a live URL running to look at somewhere?

svdb
16 Apr 2008, 1:08 AM
@svdb -- The MIF.setSrc function is wrapped for exception event handling, so IE6 must not be raising one for a mangled URL.

Are you suggesting validation before applying it?

In fact no. I can live w/o validation. On FF i'm using the exception notification to display a user friendly message-mask over the mif when a 404 is returned. Somehow the 404 causes a MIF exception to be raised, and that's exactly what I need. So, this works on FF, but not on IE: no MIF exception gets raised on IE.

So my question in fact was, do you think this is because IE catches the 404 and replaces it by it's own default msg page before the iframe (and mif) gets a chance to notice there even was a 404, and there's nothing we can do about it?

hendricd
16 Apr 2008, 3:16 AM
@svdb -- MIF doesn't trap HTTP status on the frame :) It can't, unless you are using MIF.update (UpdateManager); then you could.

colinexl
16 Apr 2008, 9:44 AM
Hi All,

I'm putting and iframepanel inside a Panel which is inside a Window. I want the window with the iframe to show only after a button has clicked.

Here's the code for the Window:



Ext.onReady(function()
{
createSetupChannelWindow = function()
{
dialog = new Ext.Window(
{
title: 'Add New User',
autoScroll: true,
modal: true,
closable: false,
maximizable: false,
layout: 'fit',
listeners:
{
//close: function(p) { setTimeout('app.users.reload()', 1000); }
},
items:
{
layout: 'card',
xtype: 'panel',
id: 'iFrameContainer',
defaultType: 'iframecontent',
autoScroll: false,
items:
[{
xtype: 'iframepanel',
id: 'iFrameContent',
loadMask: true,
autoShow: true,
layout: 'fit',
defaultSrc: 'channelAdd'
}]
}
});
dialog.show();
dialog.setSize(800, 400);
dialog.center();
}


my Iframe is just a simple HTML page, for example "http://ww.google.com".

In Firefox and IE, when I click on the button that displays the Window with the iframe, I see the window but no content in the iframe.

I inspected the DOM and I noticed that the problem is my iFrameContent DIV has a class "x-panel x-hide-noresize" in Firefox. In IE I get a "x-panel x-hide-display".

I tried doing


Ext.get('iFrameContent').setVisible(true)

It works in FF, but in IE I'm still getting "x-panel x-hide-display" so nothing is displayed in IE.

I was wondering why I'm getting this behavior, why is my iframe set to "hidden" on default?

Thanks,
Colin

hendricd
16 Apr 2008, 10:04 AM
@colinexl -- the x-hide-nosize is designed to solve the iframe/object/embed reflow problem (outlined here (http://extjs.com/forum/showthread.php?t=31461)). As your layout involves a heavily nested heirarchy, start out by "living with the problem" to get the basics working. For now, add this in:



items:
{
layout: 'card',
xtype: 'panel',
id: 'iFrameContainer',
defaultType: 'iframepanelcontent', ??
defaults : { hideMode : 'display' },
autoScroll: false,
items:
[{
xtype: 'iframepanel',
id: 'iFrameContent',
loadMask: true,
autoShow: true,
layout: 'fit', //iframe panels have no items
defaultSrc: 'channelAdd'
}]
.... Later, if you care whether your frame(s) refresh when you least expect it, you'll have to apply similar fixes in your upstream containers. I have a plugin (for any Ext.Component) I'll be releasing shortly to make that easier for all.

hendricd
16 Apr 2008, 10:44 AM
@colinexl -- just tried your example. The reason why the panels (cards) are hidden is because they are not visible in a card layout until you have an activeItem:



items:
{
layout: 'card',
xtype: 'panel',
id: 'iFrameContainer',
defaultType: 'iframepanel',
activeItem : 'iFrameContent',
autoScroll: false,
items:
[{
xtype: 'iframepanel',
id: 'iFrameContent',
loadMask: true,
autoShow: true,
layout: 'fit', //iframe panels have no items
defaultSrc: 'channelAdd'
}]
....

colinexl
16 Apr 2008, 12:39 PM
@Doug Hendricks

Hi Doug,

Thank you very much for the reply. The problem was like you said, I didn't have an "activeTab" config option. Adding it in solved the problem!

However, I still have a problem with the loadMask in IE7. In FF it works fine, but in IE I get a "false" text instead of a load mask.

I've attached two screen shots to show this error.

Thanks,
Colin

hendricd
16 Apr 2008, 7:25 PM
@stever -- Sorry, browsers will not permit an embedded script tag with a src property unless the iframe itself has a src property referencing a valid URL.

That used to be the common iframe-injection tactic. That door is now closed. ;)

stever
16 Apr 2008, 8:00 PM
@stever -- Sorry, browsers will not permit an embedded script tag with a src property unless the iframe itself has a src property referencing a valid URL.

That used to be the common iframe-injection tactic. That door is now closed. ;)

Thanks!

simonbun
16 Apr 2008, 11:10 PM
Hi hendricd,

First of all, thanks for this very useful plugin. It's being put to good use.

Personally, I needed a way for the MIFPanel to evaluate scripts when the iframe's content was set using the "html" property. I needed to make a small hack on a line of your code:



this.iframe.update(typeof html == 'object' ? Ext.DomHelper.markup(html) : html, this.scripts);


from the "MIFPanel::afterRender" method:



afterRender : function(container){
var html = this.html;
delete this.html;
Ext.ux.ManagedIframePanel.superclass.afterRender.call(this);
if(this.iframe){
if(this.defaultSrc){
this.setSrc();
}
else if(html){
this.iframe.update(typeof html == 'object' ? Ext.DomHelper.markup(html) : html, this.scripts);
}
}
}


I omitted the "callback" parameter because it's of no use when setting the html directly. Also, I was too lazy to properly declare the "scripts" config parameter, seeing as it can be monkeypatched in without harm.

I'm not sure this is of general use, but I'm posting it here just in case.

Thanks again,
Simon

hendricd
17 Apr 2008, 12:24 PM
@simonbun - Thanks.

Yes, MIF/P was designed to mimick the API and Updater rules of a standard Ext.Panel, which raises the point:

There is currently no away (for an individual lazy-loaded Panel) to enable scripting on :html content @config-time (unless you set the global class default for Ext.Updater.loadScripts = true) Then, MIF would honor it in the that scenario.

I'll see if I can come up with something 'intuitive' for the next release.

colinexl
18 Apr 2008, 8:58 AM
no one has an idea to this?

hendricd
18 Apr 2008, 9:09 AM
@colinexl --if you mean:
However, I still have a problem with the loadMask in IE7. In FF it works fine, but in IE I get a "false" text instead of a load mask.
I would need to see your panel configs, but you mave have assigned 'false' somewhere as the srcURL for the frame?
Check it out..

colinexl
18 Apr 2008, 1:15 PM
@hendricd

Here's the code that I have:



createSetupChannelWindow = function(url, channelNumberToHighlight)
{
createCookie('channelNumberToHighlight', channelNumberToHighlight, 7); // set cookie to select row after page refresh

dialog = new Ext.Window(
{
title: 'Channel Form',
autoScroll: true,
modal: true,
closable: false,
maximizable: false,
layout: 'fit',
resizable: false,
listeners:
{
close: function()
{
setTimeout('window.location.reload()', 500);
}
},
items:
{
layout: 'card',
xtype: 'panel',
activeItem : 0,
id: 'iFrameContainer',
defaultType: 'iframecontent',
items:
[{
xtype: 'iframepanel',
id: 'iFrameContent',
loadMask: true,
layout: 'fit',
defaultSrc: url
}]
}
});
dialog.show();
dialog.setSize(700, 400);
dialog.center();
Ext.getCmp('iFrameContent').setSrc(url);
}


the url parameter is: "channelAdd?channelNumber=5&filter="

I've looked at all the include files to see if there's "false" anywhere but I cannot find anything.

hendricd
18 Apr 2008, 1:33 PM
No need to do this again, remove it.



Ext.getCmp('iFrameContent').setSrc(url);


What version MIF are you using?

colinexl
18 Apr 2008, 2:15 PM
Hi Hendricd,

I am using Version: 1.1 of MIF.

I removed the line and the "false" is still there.

I downloaded a tool to inspect IE's DOM and I found something interesting.

I copied the <HTML> innerHTML from the DOM in IE when the "false" was being displayed.

<HEAD>
<SCRIPT type=text/javascript>(function(){(window.hostMIF = parent.Ext.get("ext-gen46"))._windowContext=window;})();</SCRIPT>
</HEAD>
<BODY>false</BODY>

The body has false in it and I don't know why. I tried giving a different URL "http://www.google.com" and I'm still getting the same problem.

What would cause the <body> tag in the iframe to become false?

hendricd
18 Apr 2008, 2:50 PM
Odd, I can't duplicate it here. Do you have live URL for snooping this?

colinexl
18 Apr 2008, 3:00 PM
hi Hendricd,

Thanks for the help. I solved this problem by not using MIF =(

If I just use the HTML attribute and define an "iframe" in there, it works without displaying the "false".

I'm not sure why this happens but for now, I'm not using the MIF extension.

I guess I'll have to live without the loadmask.

Thanks,
Colin

pigopl
21 Apr 2008, 2:59 AM
It is possible to write an entirely new HTML document with embedded stylesheets and external script references to an existing iFrame?

I am loading an existing page into one managed iFrame and want to extract the navigation element out of this page and write it to another managed iFrame. (part of transition of an existing non-ext web app)

The navigation div extracted requires a number of external stylesheets and javascript files to work properly.

I have been extracting the navigation div from the first iFrame and embedding this in a page structure thus:

var mnu = '<html><head>\
<script type="text/javascript" src="/moin_static160/ea/js/switchcontent.js" ></script>\
<script type="text/javascript" src="/moin_static160/ea/js/switchicon.js"></script>\
<script type="text/javascript" src="/moin_static160/ea/js/dhtmlXCommon.js"></script>\
<script type="text/javascript" src="/moin_static160/ea/js/dhtmlXTree.js"></script>\
<script type="text/javascript" src="/moin_static160/ea/js/dhtmlXTree_kn.js"></script>\
<script type="text/javascript" src="/moin_static160/ea/js/dhtmlXTree_xw.js"></script>\
<script type="text/javascript" src="/moin_static160/ea/js/eatree.js"></script>\
<script type="text/javascript" src="/moin_static160/ea/js/cookie.js"></script>\
</head><body>'
+ Ext.getCmp('app-tab1').getFrameDocument().getElementById('sidebar').innerHTML +
'</body></html>';

and writing it to the new managed iframe thus:

Ext.getCmp('nav-panel').getFrame().update( mnu, true, null );

However, the body gets written, but the head containing all the javascripts and stylesheet references does not.

Is this possible like this or can I achieve this in some other way?

Thanks :) for your help,

Tim

timb
22 Apr 2008, 7:59 AM
I am currently working on showing an Ext.DatePicker in an IE popup (http://msdn2.microsoft.com/en-us/library/ms533025(VS.85).aspx). I have been able to get it working, but I would like to reduce the size of the html file loaded into the popup (see Storing Popup Code in a Separate Document (http://msdn2.microsoft.com/en-us/library/ms533025(VS.85).aspx#Code_In_Other_Documents) for an example).

Although the content of the popup can be loaded from an external document, it cannot load scripts and style sheets using the standard method of using <link> and <style> tags. I have been able to get around the style sheet issue by using @imports. The only way that I am able to get around the script issue is to embed it in the html document. This works, but it's not the nicest to maintain. :)

Since the popup object appears to be similar to an iframe, I was wondering if it's possible to use the your loader to load the js into the popup window.

I have been looking at the adviframes demo, but have been having a hard time understanding exactly what I'd need to do to accomplish this. Can you give me an info/tips to help me get going in the right direction?

Thanks,
Tim

sanjshah
22 Apr 2008, 8:59 AM
Is it possible to instead of loading a page into a frame, maximise a particular frame and minimise the other frames?

This is the west panel,


html:'<a href="maximisesite1" target="mycenterFrame">Jump to a site</a><br />'

These are the items in the 'mycenterFrame'


items:[{
title:'Site1',
frameConfig: { name : 'mycenterFrame' },
defaultSrc : 'http://111.111.111.111'
},{
title:'Site2',
frameConfig: { name : 'mycenterFrame' },
defaultSrc : 'http://111.111.111.111'
},{
title:'Site3',
frameConfig: { name : 'mycenterFrame' },
defaultSrc : 'http://111.111.111.111'
},{
title:'Site4',
frameConfig: { name : 'mycenterFrame' },
defaultSrc : 'http://111.111.111.111'
}]


Is this possible?

hendricd
25 Apr 2008, 10:19 AM
It is possible to write an entirely new HTML document with embedded stylesheets and external script references to an existing iFrame?
However, the body gets written, but the head containing all the javascripts and stylesheet references does not.

Is this possible like this or can I achieve this in some other way?

Thanks :) for your help,

Tim

@Tim - Due to security restrictions (as mentioned earlier on Post #41) it would be possible but you would need to set a local src Url to the frame first, then you could inject script references into the document once the shell page is loaded. MIF has a series of helper functions to accomplish that:


MIF.on('domready', function(frame){
frame.writeScript('',{src:"/moin_static160/ea/js/switchcontent.js"});
});


But, if this approach were to be used frequently, I'd recommend you study the adviframes.html (http://extjs.com/forum/showthread.php?p=120384#post120384) demo closely, as it demonstrates how to cache (using ext-basex:ux.ModuleManager) those js libraries and stylesheets and inject them at will into any iframe when needed with only a single trip to the server.

hendricd
25 Apr 2008, 10:36 AM
Since the popup object appears to be similar to an iframe, I was wondering if it's possible to use the your loader to load the js into the popup window.


@Timb --Although there are window/document object model similarities I have have no "hands -on" experience with IE's proprietary popup object. It could be possible to implement a similar functional capability, but it would likely need some customization "on someones part". Rather narrow platform interest for me at this point (unless your looking for $ome focused work on it). ;)

hendricd
25 Apr 2008, 10:52 AM
Is it possible to instead of loading a page into a frame, maximise a particular frame and minimise the other frames?

You're not real clear on the layout of the 'mycenterFrame', but if you revised the west panel somewhat, and switched to a card layout:


html:'<a href="maximisesite1" target="frame1">Jump to a site A</a><br />'+
'<a href="maximisesite2" target="frame2">Jump to a site B</a><br />'



layout :'card',
id :'mycenterFrames',
activeItem :'frame1',
defaults :{
listeners:{
domready[or documentloaded] : function(frame){
Ext.getCmp('mycenterFrames').setActiveItem(frame.ownerCt);
}
}
},
items:[{
title:'Site1',
frameConfig: { name : 'frame1' }, //frame names MUST be unique
defaultSrc : 'http://111.111.111.111'
},{
title:'Site2',
frameConfig: { name : 'frame2' },
defaultSrc : 'http://111.111.111.111'
},{
title:'Site3',
frameConfig: { name : 'frame3' },
defaultSrc : 'http://111.111.111.111'
},{
title:'Site4',
frameConfig: { name : 'frame4' },
defaultSrc : 'http://111.111.111.111'
}]
... then, when a particular frame is "targeted", it's domready(or documentloaded for foreign domains) listener switches cards for you.

Think about it. ;)

sanjshah
25 Apr 2008, 2:07 PM
Thanks Doug,

I've added your code (although I'm not entirely sure I have added this correctly) I cannot seem to get this working. I do not see the any cards, also I receive a error message shown in Firebug for 'domready [or documentloaded] :' which I have no idea what this means?

I apologise for bothering you again.




Ext.BLANK_IMAGE_URL = 'exttools/ext-2.0/resources/images/default/s.gif';

Ext.onReady(function(){
Ext.QuickTips.init();
Ext.QuickTips.getQuickTip().interceptTitles = true;
Ext.QuickTips.enable();

// create some portlet tools using built in Ext tool ids
var tools = [{
qtip:'Reset',
id:'gear',
handler: function(e, target, panel){
panel.setSrc();
}
}];


var viewport = new Ext.Viewport({
layout:'border',
items:[{//begin south
region:'south',
height: 25,
defaultType :'iframepanel',
html : "All rights Reserved"
},{//end south & begin north
region:'north',
height: 120,
defaultType :'iframepanel',
html : "<img src='images/logo.jpg' width='320' height='90' />",
bbar:[{
text:' Users',
tooltip:'Add Users',
iconCls:'addusericon',
handler: function(){
window.open("userlist.html", "mycenterFrame")
}
},'-', {
text:'Inventory',
tooltip:'Inventory',
iconCls:'inventoryicon',
handler: function(){
window.open("inventorylist.html", "mycenterFrame")
}
},'-',{xtype: 'tbfill'},

{
text:'<b>User Logged On</b)',
iconCls:'loggedinicon'
},'-',{
text:'&nbsp;&nbsp;Log Out',
tooltip:'Exit System',
iconCls:'logouticon',
handler: function(){
window.open("logout.html","_self")
}
}]
},{ //end north & begin west
region:'west',
id:'west-panel',
title:'Administration Panel',
split:true,
width: 160,
//minSize: 150,
//maxSize: 150,
collapsible: true,
margins :'5 5 5 5',
cmargins :'5 5 5 5',
layout :'accordion',
defaultType :'iframepanel',
layoutConfig :{
animate: Ext.isIE
},
defaults :{
loadMask:false,
border:false
},
items : [{
//html:'<a href="userlist.asp" target="mycenterFrame">Admininster Users</a><br /><a href="http://localhost/test1" target="mycenterFrame">List Items</a><br />',
title:'Navigation',
defaultSrc : 'ommanualsites.html'
}]
},
{ //end west & begin center
xtype :'portal',
//hideMode :!Ext.isIE?'nosize':'display',
region :'center',
id:'centerFrame',
margins :'5 5 5 5',
title:'Editor Panel',
items:[{
layout :'card',
id :'mycenterFrames',
activeItem :'frame1',
defaults :{
listeners:{
domready [or documentloaded] : function(frame){
Ext.getCmp('mycenterFrames').setActiveItem(frame.ownerCt);
}
}
},
items:[{
title:'Site1',
frameConfig: { name : 'frame1' }, //frame names MUST be unique
defaultSrc : 'http://111.111.111.111'
},{
title:'Site2',
frameConfig: { name : 'frame2' },
defaultSrc : 'http://111.111.111.111'
},{
title:'Site3',
frameConfig: { name : 'frame3' },
defaultSrc : 'http://111.111.111.111'
},{
title:'Site4',
frameConfig: { name : 'frame4' },
defaultSrc : 'http://111.111.111.111'
}]
}]
}]
});


var toggle = false;
var comeHome = function(){ Ext.getCmp('sites').activeTab.setSrc();},
printPanel = function(){
try{
Ext.getCmp('sites').activeTab.iframe.print();
}catch(ex){Ext.Msg.alert('Sorry','Print Failure!<br />'+ex);}
},
_urlDelim = '\/',
getLocationAbsolute = function(){
var d= _urlDelim = location.href.indexOf('\/') != -1 ? '\/':'\\';
var u=location.href.split(d);
u.pop(); //this page
return u.join(d);
},
getSiteRoot = function(){
var url = getLocationAbsolute().split(_urlDelim );
url.pop();
return url.join(_urlDelim);
};

});

Regards,

Sanj

hendricd
25 Apr 2008, 2:18 PM
@Sanj -- Seeing your entire viewport config indicates a portal style layout for the center region. WHat is your objective there? collapse all other iframe portlets?

sanjshah
25 Apr 2008, 2:31 PM
Doug,

Yes, what I was hoping for is having x number of sites but focus (maximise one - minimise others) - is this possible?


@Sanj -- Seeing your entire viewport config indicates a portal style layout for the center region. WHat is your objective there? collapse all other iframe portlets?

hendricd
25 Apr 2008, 2:53 PM
It will be tricky as now, you are using another iframe as your west menu (essentially). For a center region card layout, start with:

.....
layout :'accordion',
layoutConfig :{
animate: Ext.isIE
},
defaults :{
loadMask:false,
border:false
},
items : { //For now keep this plain <a> links to get targeting/cards working
html:'<a href="userlist.asp" target="frame1">Admininster Users</a><br /><a href="http://localhost/test1" target="frame2">List Items</a><br />',
title:'Navigation',
defaultSrc : 'ommanualsites.html'
// xtype :'iframepanel'}]
},
{ //end west & begin center
layout:'card',
region :'center',
id :'center',
margins :'5 5 5 5',
title :'Editor Panel',
defaultType :'iframepanel',
activeItem: 'frame1', //your choice for starting card
defaults :{
listeners:{
documentloaded : function(frame){
Ext.getCmp('center').setActiveItem(frame.ownerCt);
}
}
},
items:[{
title:'Site1',
id: 'frame1',
frameConfig: { name : 'frame1' }, //frame DOM names MUST be unique defaultSrc : 'http://111.111.111.111' //give your starting frame something to look at? leave the rest empty
},{
title:'Site2',
id: 'frame2',
frameConfig: { name : 'frame2' }
},{
title:'Site3',
id: 'frame3',
frameConfig: { name : 'frame3' }
},{
title:'Site4',
id: 'frame4',
frameConfig: { name : 'frame4' }
}]

});
Start with that and get the basic card layout working properly...

sanjshah
25 Apr 2008, 3:12 PM
Thanks Doug,

Is using the portal the best way, if there is a better way I'm OK with this, basically I would like to display several websites in the centre and be able to minimise/maximise these - even if these could be hidden is fine.

Regards,

Sanj

hendricd
25 Apr 2008, 3:26 PM
Thanks Doug,

Is using the portal the best way, if there is a better way I'm OK with this, basically I would like to display several websites in the centre and be able to minimise/maximise these - even if these could be hidden is fine.

Regards,

Sanj

Difficult to say, whats in those frames, foreign domains? If you want clear control over user interaction with them I would steer you towards the card layout. It offers more screen real-estate for their 'interaction' with it, the portal layout would make their views small and cumbersome.

sanjshah
25 Apr 2008, 3:41 PM
Yes they are foreign domains, I'm not sure of the difference between the cards and portals(I'm slowly learning extjs)


Difficult to say, whats in those frames, foreign domains? If you want clear control over user interaction with them I would steer you towards the card layout. It offers more screen real-estate for their 'interaction' with it, the portal layout would make their views small and cumbersome.

hendricd
25 Apr 2008, 4:05 PM
OK, Review previous post #60 (http://extjs.com/forum/showthread.php?p=159726#post159726)
again (back to the card layout). A card layout is similar to a tabpanel layout, except YOU control which center panel is displayed and when, not the user (no tabs for them to click).

Since these are foreign domain frames, you'll either have to wait until the page is loaded to switch cards, or set up a click handler on the west region and force it visible when they click on the link.

Do a forum search on 'delegation'. You'll find a few threads on how to set that up (later tho).

Get your basic layout working first. (Good training) ;)

sanjshah
25 Apr 2008, 5:54 PM
OK, just to make sure I understand, the frames2-4 are hidden until they are called via the links from the west region.

And the delegation will load the url into the frames (and use foreign domains)?

what makes the frames visible/hidden?


OK, Review previous post #60 (http://extjs.com/forum/showthread.php?p=159726#post159726)
again (back to the card layout). A card layout is similar to a tabpanel layout, except YOU control which center panel is displayed and when, not the user (no tabs for them to click).

Since these are foreign domain frames, you'll either have to wait until the page is loaded to switch cards, or set up a click handler on the west region and force it visible when they click on the link.

Do a forum search on 'delegation'. You'll find a few threads on how to set that up (later tho).

Get your basic layout working first. (Good training) ;)

hendricd
25 Apr 2008, 7:21 PM
documentloaded : function(frame){
Ext.getCmp('center').setActiveItem(frame.ownerCt);
}

setActiveItem is the function that switches cards (and tabs for tabPanel), although after thinking about this some more, I wonder if such an effort is really necessary. Are you sure the west navigation approach is the only mechanism you'll want to use in show/hiding your frames. You could simply target all your links to a single iframe instead (although the load times would be noticable while switching back and forth) ?

sanjshah
26 Apr 2008, 5:36 AM
Doug,

I orginally thought about having a tab layout for each site with a bbar in each for the functions but when I asked a question regarding loading a foregin domain I was told this was not possible.

Or even possibly removing the west panel altogther and having the bbar in each panel/iframe is this possible?

Regards,

Sanj



documentloaded : function(frame){
Ext.getCmp('center').setActiveItem(frame.ownerCt);
}

setActiveItem is the function that switches cards (and tabs for tabPanel), although after thinking about this some more, I wonder if such an effort is really necessary. Are you sure the west navigation approach is the only mechanism you'll want to use in show/hiding your frames. You could simply target all your links to a single iframe instead (although the load times would be noticable while switching back and forth) ?

hendricd
26 Apr 2008, 6:25 AM
@sanjshah -- Have a look at the iframesdemo.html in the demoPack.zip. It shows how to do exactly that (bbar and foreign domains). ;)

sanjshah
26 Apr 2008, 4:19 PM
Doug,

Almost there, I've moved the contents into the center panel, but the displayed area is is small (the height) is there a way to increase this area?



var viewport = new Ext.Viewport({
layout:'border',
items:[{
xtype :'portal',
hideMode :!Ext.isIE?'nosize':'display',
region :'center',
margins :'35 5 5 0',
defaults:{
hideMode:!Ext.isIE?'nosize':'display'
},
title:'ManagedIframe Portlets',
items: [{

xtype:'tabpanel',
id:'sites',
defaultType: 'iframepanel',
defaults:{
closable:true,
loadMask:{msg:'Loading Site...'},
autoShow:true,
tbar : [{ text:'Return',handler: comeHome},
'-',
{text: 'Print',handler: printPanel},
'-',
{
split:true,
text:'Drop Down Menu',
iconCls: 'preview-bottom',
handler: null,
menu:{
id:'reading-menu',
cls:'reading-menu',
width:200,
listeners:{ //mask all frames while menu is visible.
beforeshow : Ext.ux.ManagedIFrame.Manager.showDragMask,
hide : Ext.ux.ManagedIFrame.Manager.hideDragMask,
scope : Ext.ux.ManagedIFrame.Manager

},
items: [{
text:'Bottom',
checked:true,
group:'rpgroup',
scope:this,
iconCls:'preview-bottom'
},{
text:'Right',
checked:false,
group:'rpgroup',
scope:this,
iconCls:'preview-right'
},{
text:'Hidden',
checked:false,
group:'rpgroup',
scope:this,
iconCls:'preview-hide'
}]
}
}
],
listeners:{
activate:function(panel){
///panel.getFrame().removeShim();
}
}
}, // prevent frames from bleeding thru overLayed tabs
listeners:{
beforetabchange:function(tabPanel,newTab,prevTab){
//if(prevTab)prevTab.getFrame().applyShim();
}
},
items: [{
id: 'ajaxian'
,title:'Ajaxian'
,defaultSrc : 'http://www.ajaxian.com'
},{
id: 'bogus'
,title:'Bogus Markup'
,loadMask:{msg:'Loading Printable Bogus Markup...'}
,html: '<h1>This Iframe should be printable.</h1>'+Ext.example.bogusMarkup
,tbar:[{
text: 'Print',
handler: printPanel
},'-',{
text: 'Switch', //<-- Added this .reset sample
handler: function(){
var i;
if(i=Ext.getCmp('sites').activeTab){
toggle = !toggle;
if (toggle){
i.setSrc('http://www.google.com', true);
}else{
i.getFrame().reset(null, function(){
i.getFrame().update('<h1>This Iframe should be printable.</h1>'+Ext.example.bogusMarkup);
});
}
}
}
}]
}
]


}]
}]
});

hendricd
26 Apr 2008, 9:18 PM
@sanjshah -- Think about your layout first, iframes later.

What is that portal still doing in the viewport? Drop it, and declare the tabPanel as the center region.

pigopl
28 Apr 2008, 3:55 AM
@Tim - Due to security restrictions (as mentioned earlier on Post #41) it would be possible but you would need to set a local src Url to the frame first, then you could inject script references into the document once the shell page is loaded. MIF has a series of helper functions to accomplish that:


MIF.on('domready', function(frame){
frame.writeScript('',{src:"/moin_static160/ea/js/switchcontent.js"});
});


But, if this approach were to be used frequently, I'd recommend you study the adviframes.html (http://extjs.com/forum/showthread.php?p=120384#post120384) demo closely, as it demonstrates how to cache (using ext-basex:ux.ModuleManager) those js libraries and stylesheets and inject them at will into any iframe when needed with only a single trip to the server.

Doug,

I shall study the example as you suggest however, as I shall be loading plenty of frames with the same libraries and this looks like it would speed up the app considerably.

Many thanks for also showing me the simple way to get it done - this helps me with getting a proof of concept out of the door.

Regards,
Tim

timb
28 Apr 2008, 8:21 AM
@Timb --Although there are window/document object model similarities I have have no "hands -on" experience with IE's proprietary popup object. It could be possible to implement a similar functional capability, but it would likely need some customization "on someones part". Rather narrow platform interest for me at this point (unless your looking for $ome focused work on it). ;)

Thanks for the reply. I was able to workaround the issue of loading external resources in a popup. Please see this post (http://extjs.com/forum/showthread.php?t=33331)for more info.

Tim

sanjshah
28 Apr 2008, 5:13 PM
Thanks Doug,

I'll start from scratch and come back!


@sanjshah -- Think about your layout first, iframes later.

What is that portal still doing in the viewport? Drop it, and declare the tabPanel as the center region.

disizben
29 Apr 2008, 7:12 AM
Hi hendricd!

My pages require validation with the XHTML 1.0 Strict doctype and I'd like to use your great extension. In its description, you said :


Issues surrounding IFRAMEs in the presence of strict XHMTL can be avoided altogether by allowing the ManagedIFrame instance to manage element creation as necessary

I don't understand what you mean (my english is not so good). I guess there's a way to use your extension with the strict doctype, right ? Could you explain me how to do that ?

Thanks.
disizben

hendricd
29 Apr 2008, 7:37 AM
@disizben -- Strict XHTML validation would only be an issue if you included the <iframe> tag in your page markup. By using MIF/P, iframes are not created until they are needed, thus those tags are never present during validation "exercises".

For scenarios where you must include <iframe> tags in your page markup, consider an alternate: doctype designed for that purpose:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

disizben
29 Apr 2008, 7:49 AM
Oh thanks i wasn't aware of that :-?

sanjshah
1 May 2008, 3:35 PM
Doug,

I have cleaned this up as much as possible - also makes it easier to understand.

I need to add the handlers to the tabs and how to reference the correct tabs


@sanjshah -- Think about your layout first, iframes later.

What is that portal still doing in the viewport? Drop it, and declare the tabPanel as the center region.



Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';

Ext.onReady(function(){
Ext.QuickTips.init();
Ext.QuickTips.getQuickTip().interceptTitles = true;
Ext.QuickTips.enable();

var tools = [{
id:'gear',
handler: function(e, target, panel){
panel.setSrc();
}
},{
id:'close',
handler: function(e, target, panel){
panel.ownerCt.remove(panel, true);
}
}];

var viewport = new Ext.Viewport({
layout:'border',
items:[{//begin of north
region:'north',
height: 120,
defaultType :'iframepanel',
html : "something at the top",
bbar:[{
text:'Users',
tooltip:'Add Users',
iconCls:'addusericon',
handler: function(){
window.open("page1.asp", "mycenterFrame")
}
},'-',
{
text:'List',
tooltip:'Inventory',
iconCls:'inventoryicon',
handler: function(){
window.open("page2.asp", "mycenterFrame")
}
},'-',{xtype: 'tbfill'}
,{
text:'<b>Logged in Name</b)',
tooltip:'logged on at time',
iconCls:'loggedinicon'
},'-',{
text:'Log Out',
tooltip:'Exit System',
iconCls:'logouticon',
handler: function(){
window.open("page3.asp","mycenterFrame")
}
}]
},{
xtype :'tabpanel',
id :'sites',
hideMode :!Ext.isIE?'nosize':'display',
region :'center',
margins :'5 5 5 5',
tbar : [{ text:'Return',handler: comeHome}, //top bar end
'-',
{text: 'Print',handler: printPanel},
'-',
{
split:true,
text:'Administration',
iconCls: 'preview-bottom',
handler: null,
menu:{ //Start of menu item
id:'reading-menu',
cls:'reading-menu',
width:200,
listeners:{ //mask all frames while menu is visible.
beforeshow : Ext.ux.ManagedIFrame.Manager.showDragMask,
hide : Ext.ux.ManagedIFrame.Manager.hideDragMask,
scope : Ext.ux.ManagedIFrame.Manager
},
items: [{
text:'Add Trade',
checked:true,
group:'rpgroup',
scope:this,
iconCls:'preview-bottom'
},{
text:'Edit Full Record',
checked:false,
group:'rpgroup',
scope:this,
iconCls:'preview-right'
},{
text:'Edit Default Email Text',
checked:false,
group:'rpgroup',
scope:this,
iconCls:'preview-hide'
}]
} //end of menu item
}
], //top bar end
defaults:{
hideMode:!Ext.isIE?'nosize':'display'
},
title:'Possible Sites',
items: [{ // site tabs start
id: 'google'
,title:'Site 1'
,defaultSrc : function(){return 'http://www.bbc.co.uk/sport';}
,tbar:[{
text:'tbar for site 1',
tooltip:'users',
iconCls:'addusericon',
handler: function(){
window.open("page1.asp", "mycenterFrame")
}
}]
} , {
id: 'yahoo'
,title:'Site 2'
,defaultSrc : 'http://www.yahoo.com'
} , {
id: 'youtube'
,title:'Site 3'
,defaultSrc : 'http://www.youtube.com'
}] //site tab end
} //end of center
]//end of viewport items
});



var toggle = false;
var comeHome = function(){ Ext.getCmp('sites').activeTab.setSrc();},
printPanel = function(){
try{
Ext.getCmp('sites').activeTab.iframe.print();
}catch(ex){Ext.Msg.alert('Sorry','Print Failure!<br />'+ex);}
},
_urlDelim = '\/',
getLocationAbsolute = function(){
var d= _urlDelim = location.href.indexOf('\/') != -1 ? '\/':'\\';
var u=location.href.split(d);
u.pop(); //this page
return u.join(d);
},
getSiteRoot = function(){
var url = getLocationAbsolute().split(_urlDelim );
url.pop();
return url.join(_urlDelim);
};



});

hendricd
1 May 2008, 7:09 PM
@sanjshah -- Huh? What are you trying to do here with the popup windows?

sanjshah
2 May 2008, 8:10 AM
Doug,

I left som ethe orginal tbar in for examples of functions used, I have removed them as below - I hope these are what you were refering to.




Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';

Ext.onReady(function(){
Ext.QuickTips.init();
Ext.QuickTips.getQuickTip().interceptTitles = true;
Ext.QuickTips.enable();

var tools = [{
id:'gear',
handler: function(e, target, panel){
panel.setSrc();
}
},{
id:'close',
handler: function(e, target, panel){
panel.ownerCt.remove(panel, true);
}
}];

var viewport = new Ext.Viewport({
layout:'border',
items:[{//begin of north
region:'north',
height: 120,
defaultType :'iframepanel',
html : "something at the top",
bbar:[{
text:'Users',
tooltip:'Add Users',
iconCls:'addusericon',
handler: function(){
window.open("page1.asp", "mycenterFrame")
}
},'-',
{
text:'List',
tooltip:'Inventory',
iconCls:'inventoryicon',
handler: function(){
window.open("page2.asp", "mycenterFrame")
}
},'-',{xtype: 'tbfill'}
,{
text:'<b>Logged in Name</b)',
tooltip:'logged on at time',
iconCls:'loggedinicon'
},'-',{
text:'Log Out',
tooltip:'Exit System',
iconCls:'logouticon',
handler: function(){
window.open("page3.asp","mycenterFrame")
}
}]
},{
xtype :'tabpanel',
id :'sites',
hideMode :!Ext.isIE?'nosize':'display',
region :'center',
margins :'5 5 5 5',
defaults:{
hideMode:!Ext.isIE?'nosize':'display'
},
title:'Possible Sites',
items: [{ // site tabs start
id: 'google'
,title:'Site 1'
,defaultSrc : function(){return 'http://www.bbc.co.uk/sport';}
,tbar:[{
text:'tbar for site 1',
tooltip:'users',
iconCls:'addusericon',
handler: function(){
window.open("page1.asp", "mycenterFrame")
}
}]
} , {
id: 'yahoo'
,title:'Site 2'
,defaultSrc : 'http://www.yahoo.com'
} , {
id: 'youtube'
,title:'Site 3'
,defaultSrc : 'http://www.youtube.com'
}] //site tab end
} //end of center
]//end of viewport items
});



var toggle = false;
var comeHome = function(){ Ext.getCmp('sites').activeTab.setSrc();},
printPanel = function(){
try{
Ext.getCmp('sites').activeTab.iframe.print();
}catch(ex){Ext.Msg.alert('Sorry','Print Failure!<br />'+ex);}
},
_urlDelim = '\/',
getLocationAbsolute = function(){
var d= _urlDelim = location.href.indexOf('\/') != -1 ? '\/':'\\';
var u=location.href.split(d);
u.pop(); //this page
return u.join(d);
},
getSiteRoot = function(){
var url = getLocationAbsolute().split(_urlDelim );
url.pop();
return url.join(_urlDelim);
};



});

I need to a have specific tbar for each site as there will different requirements for each site.

Regards,

Sanj


@sanjshah -- Huh? What are you trying to do here with the popup windows?

hendricd
2 May 2008, 9:53 AM
@Sanj -- so, yes, just define tbar's for each MIFP and define the appropriate button handler for each to do what you want.

sanjshah
2 May 2008, 11:36 AM
Doug,

Before I start adding these, I would just need some help:

Even though I have set the defaultSrc when the tabs are clicked nothing is loaded?

'mycenterFrame' doesn't exist anymore - I tried 'sites' but this does not work either, so what is target of the relevant panel,

Also is there a setting that defines that the sites loaded in each tab open full (height and width)?

Regards,

Sanj


@Sanj -- so, yes, just define tbar's for each MIFP and define the appropriate button handler for each to do what you want.

hendricd
2 May 2008, 11:49 AM
Doug,

Before I start adding these, I would just need some help:

Even though I have set the defaultSrc when the tabs are clicked nothing is loaded?

'mycenterFrame' doesn't exist anymore - I tried 'sites' but this does not work either, so what is target of the relevant panel,

Also is there a setting that defines that the sites loaded in each tab open full (height and width)?

Regards,

Sanj

@Sanj -- nowhere in your last code post do you even have an xtype:'iframepanel' defined anywhere.

What you have so far is just a bunch of pasted code that has confused you greatly.

Before I can help futher, you'll need to explain your goals. What interaction (and under what conditions/events) do you want for your user 'experience'? What are you trying to accomplish?

sanjshah
2 May 2008, 12:16 PM
Doug,

What I'm after a north region (just for logos and who is logged in), then the south/centre for the tabs to the sites (foreign domains) each of these tabs will have a tbar for the functions relevant to the site in that particular tab.

I hope this makes sense.

Regards,

Sanj


@Sanj -- nowhere in your last code post do you even have an xtype:'iframepanel' defined anywhere.

What you have so far is just a bunch of pasted code that has confused you greatly.

Before I can help futher, you'll need to explain your goals. What interaction (and under what conditions/events) do you want for your user 'experience'? What are you trying to accomplish?

hendricd
2 May 2008, 12:22 PM
@Sanj - iframedemo.html demonstrates how one might add toolbars to any Ext component. But as these frames are loaded from foriegn-domains, there is very little you can do with the document/content anyway unless it content is served up by your domain.

How were you thinking about interacting with Yahoo and youTube?

sanjshah
2 May 2008, 12:32 PM
I apologize I will be using the my own virtual websites not yahoo etc, I just used these as an example.



@Sanj - iframedemo.html demonstrates how one might add toolbars to any Ext component. But as these frames are loaded from foriegn-domains, there is very little you can do with the document/content anyway unless it content is served up by your domain.

How were you thinking about interacting with Yahoo and youTube?

hendricd
2 May 2008, 12:35 PM
OK,

How were you thinking about interacting with Yahoo and youTube "same-origin" frames?

sanjshah
2 May 2008, 12:42 PM
Open a window (like the iframesdemo example) that would perform some simple tasks but might need to reload the base page that open from.

i.e. if the window was open from mydomain/site1/index.asp which is in Tab1 then after closing the window mydomain/site1/index.asp might require reloading.


OK,

How were you thinking about interacting with Yahoo and youTube "same-origin" frames?

hendricd
4 May 2008, 5:18 AM
@Sanj -- I guess this is confusing me (us?). What is this browser popup window in there (your toolbar hanlders) for?



window.open("page1.asp", "mycenterFrame")

The is no center frame target any more.

To start out, give all your MIFP components IDs so that they are addressable globally from anywhere.

mbogdanovich
6 May 2008, 7:50 AM
Hello,

I have a panel which is broken into two items, the first item is a page which requires an auto refresh every 60 sec. The second item is a video player. When the first item refreshes the second item does as well. How should I structure this so the second item does not refresh?



{
region: 'east',
collapsible: false,
width: 350,
defaultType: 'iframepanel',
defaults:{loadMask:{msg:'Loading Site...'},
loadMask:true,
autoShow: true
},
margins:'0 5 0 0',
items: [{
border:false,
height: 290,
defaultSrc: 'eastpanel/npanel.cfm'
},{
border: false,
height: 500,
defaultSrc: 'eastPanel/spanel.cfm'
}]
}


Thank you.

hendricd
6 May 2008, 8:13 AM
@MAtt -- What's triggering the refreshes anyway?

mbogdanovich
6 May 2008, 8:15 AM
I have a script in the page named in the inline:


var limit="1:00"

if (document.images){
var parselimit=limit.split(":")
parselimit=parselimit[0]*60+parselimit[1]*1
}
function beginrefresh(){
if (!document.images)
return
if (parselimit==1)
window.location.reload()
else{
parselimit-=1
curmin=Math.floor(parselimit/60)
cursec=parselimit%60
if (curmin!=0)
curtime=curmin+" "+cursec+" "
else
curtime=cursec+" "
window.status=curtime
setTimeout("beginrefresh()",1000)
}
}

window.onload=beginrefresh

hendricd
6 May 2008, 8:24 AM
If that script frag is included in both frames, isn't there a chance that there are images in both frames and the script is doing its job? Does your video player have image tags associated with it, hidden perhaps?

mbogdanovich
6 May 2008, 8:33 AM
That script is included in first item of the east panel, not the second item. Is it doing its job?

hendricd
6 May 2008, 8:37 AM
B) Blind out here. You have a public URL to see this in action?

mbogdanovich
6 May 2008, 8:50 AM
It must have been cached...ooops...It works great...sorry to waste your time. Thanks for the great coding, by the way, I use managedIframe a ton!

thanks

Boon
7 May 2008, 6:31 AM
Hi All,

Can somebody provide me with a simple example of how to use the managedIframe ext.
Nothing fancy. Just open a panel and load a external page is the iframe.
That's it.

Thanks & Regards,

erik

hendricd
7 May 2008, 6:50 AM
@Boon -- Since MIF inherits from Ext.Panel:



var MIFP = new Ext.ux.ManagedIframePanel({
title: 'Google'
,collapsible :true
,renderTo : Ext.getBody()
,width : 400
,height : 400
,defaultSrc : 'http://www.google.com'
});

See the Wiki (link in my sig below) for more examples.

tfulmino
7 May 2008, 11:52 AM
I am trying to create a TabPanel utilizing the ManagedIFrame. I would like to dynamically create the tabs on the fly. The 'addTab' method below should be doing this; however, it is not working correctly. What am I missing?

Thanks in advance.



<scripttype="text/javascript"language="javascript">
var tabPanel;

Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({
region:'north',
el: 'north',
height:50
}),new Ext.BoxComponent({
region:'south',
el: 'south',
height:25
}),{
region:'west',
contentEl: 'west',
title:'West',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 0 0 5',
layoutConfig:{
animate:true
}
},
tabPanel = new Ext.TabPanel({
region:'center',
xtype: 'tabpanel',
deferredRender:false,
defaults: {autoscroll: true},
defaultType: 'iframepanel',
activeTab:0,
margins:'0 5 0 0'
})
]
});
});

function addTab(tabTitle, targetUrl){
tabPanel.add(
new Ext.ux.ManagedIFrame({
autoCreate: {
src: 'http://www.google.com',
height: 350,
width: '100%'},
loadMask: false})
).show();
}
</script>

hendricd
7 May 2008, 12:14 PM
This Wiki page (http://extjs.com/learn/ManageIframe:Examples:examples_MIFP) might help, but, try using the MIFPanel:


function addTab(tabTitle, targetUrl){
tabPanel.add(
new Ext.ux.ManagedIframePanel({
id: '????',
defaultSrc: targetUrl,
loadMask: false,
title:tabTitle
})
).show();
tabPanel.doLayout(); //must call this if tabPanel has already been rendered.
}

shuang
12 May 2008, 2:35 AM
when open page IE, i'm need not load 'tab2'

i'm need load 'tab2' when click 'tab2' only

how to can i?

knowledgeable people help me ,plese

i want example for lerning

thank you very mush

hendricd
12 May 2008, 4:21 AM
@shuang -- the demoPack.zip located here (http://extjs.com/forum/showthread.php?p=152139#post152139), has a functional tabPanel example. Have you looked at it yet?

varsos
12 May 2008, 1:35 PM
My winzip fails when I open these two files, any ideas?

Thanks

superFly77
12 May 2008, 2:32 PM
Fantastic extension, really solved alot of the problems I was having.

One question I have is do you have any ideas on how one could go about making it so that when using an IframPanel with tabs (much like you do in the example where you have google/axajian/etc) The title of the tab would change dynamically based on the <title> tag inside the actual iframe?

hendricd
12 May 2008, 2:49 PM
@superFly77 -- As frame documents from foriegn-domains are 'protected' from snooping, the most you could hope for would be something like this:



MIFP.on('documentloaded', function(frame){
vat title = null;
try{
title = frame.getDocument().title;
catch(ex){}
if(title && !!title.length){
this.setTitle(title);
}

},MIFP);

superFly77
12 May 2008, 3:00 PM
Thx, ya i wouldnt really be doing it for pages not located on my server anyways.

hendricd
12 May 2008, 3:02 PM
Thx, ya i wouldnt really be doing it for pages not located on my server anyways.

If that's the case, use the 'domready' event instead. It would fire much sooner.

GreigM
13 May 2008, 3:35 AM
I wonder if anyone can help - I'm attempting to use the ManagedIframePanel to basically "skin" and existing frame-based application and am having some trouble with the "transform" functionality - i.e. load ext-all etc once and apply to the iframe.

I have attempted to modify/strip down the adviframe example to suit my purposes and all seems ok except the pages loaded into the iframe can't access ext.

I have constructed a small demo of my problem (attached) - if you load mainpage.htm the demo will start. The demo has a simple viewport, which has 2 regions - north which is a simple toolbar with a button, and center which is an iframepanel.

The page loaded into the iframe is home.htm - all it does is try to confirm that it can use Ext.onReady without directly loading ext-all, but I always get an error indicating that Ext has not been loaded into the iframe - the "transform" seems to be called correctly as far as I can tell - can anyone help?

Here is the ext code which loads the page & frame:

Ext.onReady(function()
{
var tb = new Ext.Toolbar();
var vp = new Ext.Viewport({
layout:'border',
listeners:{ render: Demo.init,
scope : Demo,
single : true},
items:[
{ // raw
region:'north',
autoHeight: true,
tbar: tb
},
{
region:'center',
width: '100%',
height: '100%',
items :[{
xtype :'iframepanel',
id :'mainFrame',
loadMask:{msg:'Loading...'},
defaultSrc: 'home.htm',
width:'100%',
height: '100%',
listeners:{
scope : Demo
,domready : Demo.transform
},
frameConfig:{name:'mainFrame',height: '100%'}}
]
}
]
});

buildMenu(tb);
vp.doLayout();
});

function buildMenu(tb)
{
tb.add({
text: 'Test',
handler: function(){Ext.getCmp('mainFrame').setSrc('exttest.htm')}
});
}

And the home.htm is simply:

<script type="text/javascript">
Ext.isReady = true;
Ext.onReady(function()
{
alert('ext ok')
});
</script>

hendricd
13 May 2008, 4:35 AM
@GreigM -- Your timing is a bit off, that's all. ;)

When you load home.html into the frame, it loads just like any page would and executes any embedded javascript immediately. Thus, as you've scripted it, it's going to attempt a call to Ext.onReady right away. It's going to fail because the frame runs in a separate thread from your main page and there is no way to block execution in that frame while transform does it's job.

MIF/P is aware of when the frames' DOM is ready (via domready event) and the Demo.transform script will only begin when the frame document is in a state where it might be updated (has a head, body, etc), but your frame document still continues it's normal business (asynchronously) without regard to what's going on in the parent.

So you need to assume there is a dumb page in there. Assume it knows nothing about Ext. You have to make it Ext-aware, and only drive Ext-related scripts when there is a good chance that Ext has been loaded into it.

With all that in mind, lets make home.html really stupid (altho in practice this could be any non-Ext-enabled page you want (with forms etc)):


<html><head><title>Awaiting Smarts</title>
<script type="text/javascript">
var startMeUp = function(){

win = new Ext.Window({

width:500,
height:300,
plain: true,
html:' I\'m Alive',

buttons: [{
text: 'Close',
handler: function(){
win.close();
}
}]
});

win.show(this);
document.title = "Ext is in here.";

};

</script>
</head>
<body>Waiting...</body>
</html>I've shown a revised Demo.transform here so you see what needs to happen:


Demo.transform = function(iframe){

if(!iframe.domWritable()){alert('Not writable');return;}

var iwin = iframe.getWindow();
var exception;
var MM = this.ModuleManager;

forEach(MM.modules,function(module,name){

//All css is injected into document's head section
if(module.extension == 'css'){

/* For an IFrame we have to adjust the relative url's in the CSS Rules specifically for ext-all.css */
MM.styleAdjust = (name == 'ext-all.css'?{pattern:/url\(\s*\.\.\//ig, replacement:'url(../../resources/'}:null);
MM.applyStyle(module,null,iwin);


} else {
exception = function(i,ex,module){
alert('Iframe Exception:');
}.createDelegate(this,[module.name],true);

iframe.on('exception',exception,this);
iframe.execScript(module.content, false ); //true = write script tags for debugging.
iframe.un('exception',exception,this);
}

},this);

iframe.execScript("Ext.lib.Ajax.forceActiveX = true;");
//dom is already in-place so we tell (the revised) EventManger "it's so."
iframe.execScript("Ext.isReady=true");

//load our ExtFixes in the frame and execute it.
iframe.loadFunction('ExtFixes',true, true);

//Everything in place now, bring the frame to life:
iframe.execScript("startMeUp()");
}
};

Ext.onReady(function()
{
var tb = new Ext.Toolbar();
var vp = new Ext.Viewport({
layout:'border',
listeners:{ render: Demo.init,
scope : Demo,
single : true},
items:[
{ // raw
region:'north',
autoHeight: true,
tbar: tb
},
{
region:'center',
width: '100%',
height: '100%',
items :[{
xtype :'iframepanel',
id :'mainFrame',
loadMask:{msg:'Loading...'},
defaultSrc: 'home.htm',
width:'100%',
height: '100%',
listeners:{
scope : Demo
,domready : Demo.transform
},
frameConfig:{id:'mainIFrame'}}
]
}
]
});

buildMenu(tb);
vp.doLayout();
});

function buildMenu(tb)
{
tb.add({
text: 'Test',
handler: function(){Ext.getCmp('mainFrame').setSrc('exttest.htm')}
});
}

GreigM
13 May 2008, 6:54 AM
I see what you mean - thanks Doug, that makes sense and is fairly straightforward. Great extension - thanks.

superFly77
16 May 2008, 10:34 AM
Hi im having some trouble trying to get the extension to work so that it will load Ext if the contents of the frame need it (like your adviframes example).

First question is how would i change things (even directly in your example), such that when any link on the iframe is clicked it would recheck for required Ext and add it if neccessary.

For example, in your example the Ext loads when you select one of the nodes in the tree. However, if i add a link to a page that requires Ext on of the documents that loads in the iframe It wont add Ext to the new page.

Basically, I need it to that it would always check for Ext even when just changing page to page.

Thanks for any help.

GreigM
16 May 2008, 11:00 AM
Hi im having some trouble trying to get the extension to work so that it will load Ext if the contents of the frame need it (like your adviframes example).

First question is how would i change things (even directly in your example), such that when any link on the iframe is clicked it would recheck for required Ext and add it if neccessary.

For example, in your example the Ext loads when you select one of the nodes in the tree. However, if i add a link to a page that requires Ext on of the documents that loads in the iframe It wont add Ext to the new page.

Basically, I need it to that it would always check for Ext even when just changing page to page.

Thanks for any help.

If installed correctly it will apply ext to all linked pages - did you modify ext-all.js as per instructions? (assuming you are using one of the transform functions in the demo - not all functions apply script to the iframe).

hendricd
16 May 2008, 11:37 AM
@superFly77 -- The advanced demo was constructed so that any time MIF determined that:

a) the frames' document had been (re)loaded ( submit, refresh, location change, etc), and
b) it had sufficient "same-origin" privilege to do so

it would execute Demo.transform as a result (thus forcing the entire Ext framework into the frames' window context each time:



,events:{
documentloaded :evs.documentloaded
,domready : Demo.transform
,exception : Demo.handlers.exception
,message : Demo.handlers.message
,scope : Demo
}
}
..regardless of its content.

Note: The domready event is only raised for "same-origin" domains.

That said, there are a number of ways you could decide (on the frames' domready event) whether to apply Ext to it or not. See this fragment:



/* Ext'ize the frame, inject CSS rules from gathered style-sheets, and
eval the collected code modules into the frame's window context.
*/
transform: function(iframe){

if(!iframe.domWritable()){alert('Not writable');return;}

var iwin = iframe.getWindow();
if(iwin.noExt === true) return; //forcefully decline Ext
var exception;
var MM = this.ModuleManager;

forEach(MM.modules,function(module,name){
But you could easily use MIF's DOM features to access the embedded DOM to check some other condition to determine that (on domready or otherwise) from the parent page (without having to load Ext in there first).

Modify the domready handler further:



transform: function(iframe){

if(!iframe.domWritable()){alert('Not writable');return;}

var iwin = iframe.getWindow();
if(iframe.select('form').elements.length == 0 || //Check for presence of forms
iwin.noExt === true) return; //forcefully decline Ext
var exception;
var MM = this.ModuleManager;

forEach(MM.modules,function(module,name){

//All css is injected into document's head section
if(module.extension == 'css'){

/* For an IFrame we have to adjust the relative url's in the CSS Rules specifically for ext-all.css */
MM.styleAdjust = (name == 'ext-all.css'?{pattern:/url\(\s*\.\.\//ig, replacement:'url(../../resources/'}:null);
MM.applyStyle(module,null,iwin);

} else {
exception = function(i,ex,module){
this.balloon(this.tabs.el, 't', 'Iframe Exception:'+module,(ex.description||ex.message||ex));
}.createDelegate(this,[module.name],true);

iframe.on('exception',exception,this);
iframe.execScript(module.content); //write script tags for debugging.
iframe.un('exception',exception,this);
}

},this);

iframe.execScript("Ext.lib.Ajax.forceActiveX = true;");
//dom is already in-place so we tell (the revised) EventManger "it's so."
iframe.execScript("Ext.isReady=true");

//load our ExtFixes in the frame and execute it.
iframe.loadFunction('ExtFixes',true, true);

if(typeof iwin.startup == 'function'){ //Is there a startup function defined in the document?
iframe.execScript("startup()");
}
};
Demo.transform (as an example) is the frames' equivalent of Ext.onReady (without loading Ext in there.) That is where you 'kickstart' your child frames into action.


However, if i add a link to a page that requires Ext on of the documents that loads in the iframe It wont add Ext to the new page.You can even set event listeners from the parent page against elements located in the embedded document (without yet loading Ext in it). MIF extends the basic DOM features the Ext provides in the parent page, to the frame document:


//listen for <a> link clicks
Ext.getCmp('myMIFPanel').getDoc().on('click', doSomething,null,{delegate:'a'});Using these features, why and when you apply Ext to the frame are entirely up to you.

What type of pages are you talking about 'Extizing' anyway?

calverte
16 May 2008, 12:43 PM
ux.ManagedIFrame/Panel (Current Release 1.1)

There may be something wrong with the attachments. For whatever the reason is, currently not all of the attached zips files are downloadable. At least not on my end. The following message is being returned:

[QUOTE]Cannot open file: it does not appear to be a valid archive.


~Calvert

hendricd
16 May 2008, 12:47 PM
People all over the forums are having troubles downloading zips (in general). Don't know what to tell you.

PM your email and I'll email the zip if need be.

superFly77
16 May 2008, 6:44 PM
I think i got it working now, just needed to read over the example and understand it a bit more.

I have it working now on my main iFrame which is created as follows:


var mainTab = new Ext.ux.ManagedIframePanel({title:'Main Tab',defaultSrc:'home.html', closable:false,
listeners:{
scope : Demo,
domready : Demo.transform
},
frameConfig:{id:'mainIFrame'}});



What would be a good way to make an addTab function (that would always load the same first default page but would then be updated)?. Also need this to load Ext into the newly created tab and upon transforms of that tab.

I seem to be having some caching issues or w/e aswell. For example, i change what page i want the iframe to load but its still loading the old one. Any ideas about this?

Thanks again for the help.

GreigM
16 May 2008, 11:31 PM
I seem to be having some caching issues or w/e aswell. For example, i change what page i want the iframe to load but its still loading the old one. Any ideas about this?

Thanks again for the help.

I had the same issue, was caused by a CookieProvider.

hendricd
17 May 2008, 5:54 AM
What would be a good way to make an addTab function (that would always load the same first default page but would then be updated)?. Also need this to load Ext into the newly created tab and upon transforms of that tab.

I seem to be having some caching issues or w/e aswell. For example, i change what page i want the iframe to load but its still loading the old one. Any ideas about this?

Thanks again for the help.

@superFly77 -- Since it sounds like you'll be loading several MIFs into your tabPanel and all will need 'transform' treatment, consider this tabPanel setup:

Note: Give ALL you important Components IDs!


new Ext.TabPanel({
id: 'appTabs',
defaultType: 'iframepanel',
defaults:{
listeners:{ //common listeners for all iframe tab items
scope : Demo,
domready : Demo.transform
}
},
activeTab : 'homeTab',
items:[{
id :'homeTab',
title :'Main Tab',
defaultSrc :'home.html',
closable :false,
frameConfig:{id:'frame_home'}
}]
});

//A starter tab Handler
var addTabFrame = function( id, url, title, focusIt, loadCallback ){
var tabs = Ext.getCmp('appTabs');
id || ( id = Ext.id() );
var f = tabs.getItem(id); //already exist?
if(f){
f.setSrc(url, false, loadCallback); //update the src of an existing iframe tab
}else{
f = tabs.add({
defaultSrc : {url:url, discardUrl : false, callback:loadCallback },
closable : true,
title : title,
id : id,
frameConfig:{id:'frame_' + id} // frame name will default to id
});
f.show()
tabs.doLayout();
}
tabs.setActiveTab( focusIt? f, tabs.activeTab );
};
Then, to add one, simply:


addTabFrame ('report1', 'reports/customers.php', true );
GreigM has the right idea. At this stage of development, state management is the last thing you should have active. Disable it for now. ;)

Tweak on!

superFly77
17 May 2008, 8:44 AM
Thanks alot for all the help, Got it working as I want now and works well :).

Best thing about using Ext is the amazing community :).

superFly77
21 May 2008, 6:41 AM
Hi, Im trying to implement a rename tab function and have it working fine.. but with the ManagedIframePanel the size of the actual tab (where the title is) does not resize based on longer titles. I tested my function with a normal tab panel and it works fine and does resize the title.

Any soltuion to this?

hendricd
21 May 2008, 7:14 AM
POst your tabPanel config and 'your function'.

superFly77
21 May 2008, 7:26 AM
Here is the tab:


var centerMainPanel = new Ext.TabPanel({
id:'appTabs',
region:'center',
margins:'0 5 5 0',
resizeTabs: true,
minTabWidth: 135,
tabWidth: 135,
enableTabScroll: true,
activeTab: 0,
xtype:'tabpanel',
defaultType :'iframepanel',
defaults:{
loadMask:{msg:'Loading Site...'},
autoShow:true,
listeners:{ //common listeners for all iframe tab items
scope : Demo,
domready : Demo.transform
}
},
items:[{
id :'mainTab',
title :'Main Tab',
defaultSrc :'watermark.html',
closable :false,
frameConfig:{id:'frame_main'}
}]

});

and the method


function(){
Ext.MessageBox.prompt('Rename Tab', 'Enter the name of the tab',
function(btn,txt){centerMainPanel.getActiveTab().setTitle(txt);
});
}

hendricd
21 May 2008, 7:40 AM
I don't believe a title change recalcs the autoSize geometry

try:


function(){
Ext.MessageBox.prompt('Rename Tab', 'Enter the name of the tab',
function(btn,txt){
centerMainPanel.getActiveTab().setTitle(txt);
centerMainPanel.delegateUpdates();
});
}

superFly77
21 May 2008, 7:58 AM
Nope that did not work, infact doing that with a normal TabPanel made it so that regardless of what you renamed it, it would go to the default size.

I think it may be an issue with how it is determining the size of the tab in the first place (if it even does), because if I start with a small title on a normal Tab it has a small size, but regardless of what size I use for the iFramePanel's title the width of the tab is always the value of tabWidth.

hendricd
21 May 2008, 8:04 AM
Yes, tabPanel drives the all tab sizing, not the tab items (MIF in this case). MIFP is just a subclass of Ext.Panel.

What Ext version is this?

Panel.setTitle has had problems for months.

superFly77
21 May 2008, 8:05 AM
Version 2.1

mikester
22 May 2008, 8:03 AM
I get the following error error when I try out the desktop example

types[config.xtype || defaultType] is not a constructor
Line 12086 in ext-all-debug.js

<code>
return new types[config.xtype || defaultType](config);
</code>

Any hints to resolving this?

hendricd
22 May 2008, 8:22 AM
I get the following error error when I try out the desktop example

types[config.xtype || defaultType] is not a constructor
Line 12086 in ext-all-debug.js



return new types[config.xtype || defaultType](config);



Any hints to resolving this?
@mikester --
Sounds like you're not loading the miframe.js script properly or at all. Make sure you also extract all the zips into the same directory.

mikester
22 May 2008, 8:36 AM
Awesome, thanks, that did it.

desktop.html


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


I had to change it to ../miframe/miframe.js

Good plugin, just what I was looking for!

zombeerose
27 May 2008, 8:40 AM
Is it possible to lazy render a ManagedIframePanel and be able to set params for the url to get called with? I was including the config options "params" but nothing was passed. It would be ideal if these could be passed as a POST.

Am I just missing the obvious?

hendricd
27 May 2008, 8:53 AM
@zombeerose -- You have a couple of options available for that. The defaultSrc config options and setSrc method both accept a function for determining a desired URL.

Lazy:


getURI = function(){ return someURL + someParams; };

items: [{
xtype:'iframepanel',
defaultSrc: getURI,
}]
on demand:


MIFP.setSrc(getURI); //force it again..
For posting, you'll have to use autoLoad:

items: [{
xtype:'iframepanel',
autoLoad: {url:'something.php', params:{ }, method:'POST'}
}]This would write the entire page response to the iframe after the POST.

zombeerose
27 May 2008, 9:44 AM
Thank you for the prompt reply.


This would write the entire page response to the iframe after the POST.If it writes the page to the iframe, does that in turn means that the POST variables are not accessible to the iframe? My first test appeared to evidence that.

Besides GET params, is there anyway that I can pass info to the miframe such that the code in the iframe can access it via the POST global?

hendricd
27 May 2008, 10:03 AM
Besides GET params, is there anyway that I can pass info to the miframe such that the code in the iframe can access it via the POST global?

I'm assuming you mean PHP POST global. The autoLoad example I quoted, essentially sends the desired POST and params using a standard Ext.Ajax.request, and UpdateManager would then write any response from that POST into the frame's document.

Using this approach, your iframe retains its "same-origin" status, and gets POST support. So, yes, your main page can "talk" to your iframe freely, exchanging whatever you need.

zombeerose
27 May 2008, 10:33 AM
Ah - I see where I wandered off trail but I don't quite understand the results. I am using your basex extension for intercepting all the ajax calls and processing the response. Since the "iframe" response is not in the correct format, it perceives an error.

None the less, the initial ajax response and the response displayed in the frame are different. The first contains my post variables, but the second is empty. I am unsure as to why but will attempt to uncover the reasons.

Thanks for your help.

shirkavand
30 May 2008, 10:01 PM
hello,

I just downloaded extjs last version. BEside that i downloaded ManagedIFrame examples that i finded in the forums. The problem is that they does not worck properly. I am new in this. Can you gibe a URL with an example of ManagedIFrame worcking properly.

Thank you very much.

Regards

shirkavand
30 May 2008, 11:39 PM
Hello,

I need to use this componnet because i want to load complete pages(with body tags, including scripts styles etc) in tab form. I read that this componnet can allow me to do this.

Regards

hendricd
31 May 2008, 6:01 AM
@shirkavand -- Welcome aboard. The demoPack.zip (located here (http://extjs.com/forum/showthread.php?p=152139#post152139)) has many examples of how to use MIFPanel within Ext layouts.

If your still having trouble, post some code for us to look at.

shirkavand
31 May 2008, 8:58 AM
Hello,

I am trying to run the ManagedIframe examples located at http://extjs.com/forum/showthread.php?p=152139#post152139

i Extracted the demoPack.zip directly into a existing: /examples/miframe directory of my standard 2.x Ext.distribution but when i load the examples in my browser nothing happens. For example, if i load "iframesdemo.html" it just show this message "Ext.ux.ManagedIframePanel" nad nothing else. I can not see any tab or working example. Any idea??

egards

stumpy_uk
31 May 2008, 12:06 PM
Doug,

Sorry to bother you but am a bit stumped (pardon the pun), I was playing about merging your Iframe and Media Panel into a test app.

It works perfectly however with IE6 I am getting massive bleeding with the HTML pages where EXT code exists within that page. I am seeing Grids placed over with form items etc.

If i use the standard EXT panel Src via load its ok.

any help appreciated and again thanks for sharing all your code I have learnt most of my EXT knowledge from your extensions etc..

Stumpy...




Here is a function I was calling to create a new Tab / Iframe...

function loadhtml(idref,pagename, pagetitle,canIclose,iconclass)
{
var get = Ext.getCmp;
this.tabs = get('MainTabs');
var tab;

var id = idref.split('\/')[2] || false; //derive a tab id from node.id

(tab = this.tabs.getItem(id)||false) ||
(tab = this.tabs.add(
{
xtype : 'iframepanel'
,id : id || (id=Ext.id())
,loadMask:{msg:'Loading Your Page Selection...'}
,defaultSrc : pagename
,iconCls: iconclass
,closable: canIclose
,title : pagetitle
})
);
this.tabs.setActiveTab(tab);
}

hendricd
31 May 2008, 3:17 PM
Hello,

I am trying to run the ManagedIframe examples located at http://extjs.com/forum/showthread.php?p=152139#post152139

i Extracted the demoPack.zip directly into a existing: /examples/miframe directory of my standard 2.x Ext.distribution but when i load the examples in my browser nothing happens. For example, if i load "iframesdemo.html" it just show this message "Ext.ux.ManagedIframePanel" nad nothing else. I can not see any tab or working example. Any idea??

egards

@shirkavand -- Hopping around threads to get someone's attention is not a real popular thing to do around here. Keep your posts in the thread they belong in. Someone WILL usually answer.

The MIF demoPack is not structure for an Ext 2.1 sample heirarchy, although it will be released shortly.
It does work well, if you'd like to get more familiar with it, on a 2.02 Ext build.

@stumpy_uk -- It would help to see it via a public URL. I could tell more that way. If your using MIF(1.1) and MediaPanel/Flash (RC1), make sure you are using the latest builds.

stumpy_uk
2 Jun 2008, 4:20 AM
Doug,

Its ok spotted it eventually as I looked at the whole thing again from start to finish:">

It was the Viewport that was wrong, I didn't have the IE check in there



,style:{position:(Ext.isIE?'relative':'absolute')}
,hideMode:(Ext.isIE?'display':'visibility')


Thanks again for an amazing extension......

Cheers

Stumpy

joedimagio
12 Jun 2008, 9:45 AM
Is it possible to have a tab panel where one tab uses an iframe and the others dont?

hendricd
12 Jun 2008, 9:48 AM
Sure, just add a ux.ManagedIframePanel:



{
xtype:'iframepanel',
defaultSrc: someUrl
}

to your tabPanel.

joedimagio
12 Jun 2008, 9:59 AM
I used the examples/layout/complex.html and changed the tab panel to the following


new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
items:[{
contentEl:'center1',
title: 'Close Me',
closable:true,
autoScroll:true
},{
contentEl:'center2',
title: 'Center Panel',
autoScroll:true
},{
xtype: 'iframepanel',
defaults:{height:300,
loadMask:{msg:'Loading Site...'},
loadMask:true,
autoShow: true
},
title: 'Google',
id: 'google',
defaultSrc: 'http://www.google.com/'
}]
})

Added an <iframe> in the body with an id="google". Everything renders fine, but I get a JS error in IE saying 'cannot move focus to the control'. Any reason why this happens?

hendricd
12 Jun 2008, 10:16 AM
... Everything renders fine, but I get a JS error in IE saying 'cannot move focus to the control'. Any reason why this happens?

That's the google page trying to do something you have no control over (the reason why loading foreign-domain pages (that you have no control over) in any iframe is not a good idea. That said, you've got some extraneous config stuff in there. See revised:



new Ext.TabPanel({
region:'center', // is this tabPanelin a border layout
deferredRender:false,
activeTab:0,
items:[{
contentEl:'center1',
title: 'Close Me',
closable:true,
autoScroll:true
},{
contentEl:'center2',
title: 'Center Panel',
autoScroll:true
},{
xtype: 'iframepanel',
loadMask:{msg:'Loading Site...'},
defaults:{height:300,
loadMask:{msg:'Loading Site...'},
loadMask:true,
autoShow: true
}, //MIF's do not have items, thus defaults are meaningless
title: 'Google',
id: 'google',
defaultSrc: 'http://www.google.com/'
}]
})

joedimagio
14 Jun 2008, 10:20 AM
I have a couple of iframe panels as shown below. One of them calls the example\grid page. Without this iframe, the memory usage is about 24M and with this iframe tab, its about 35M. However, once I delete the tab, I was expecting the memory to drop to 24M, but it did'nt. Any reason why and what I need to do to get rid of the memory. Thanks.



new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
items:[{
contentEl:'center1',
title: 'Close Me',
closable:true,
autoScroll:true
},{
contentEl:'center2',
title: 'Center Panel',
autoScroll:true
},{
xtype: 'iframepanel',
title: 'Google',
id: 'google',
defaultSrc: 'http://www.google.com/'
},{
xtype: 'iframepanel',
title: 'Custom',
body:new Ext.ux.ManagedIFrame({autoCreate:{ src:'../grid/grid3.html', frameBorder: 0, cls:'x-panel-body ',width: '100%', height: '100%',scrollbars:'true'}})

}]
})

hendricd
14 Jun 2008, 3:51 PM
However, once I delete the tab, I was expecting the memory to drop to 24M, but it did'nt. Any reason why and what I need to do to get rid of the memory. Thanks.

@joe -- (Herein: MIF = ux.ManagedIFrame, MIFP = ManagedIframePanel)

Ya know, I notice people just starting out if MIF/P are always trying to place an MIF in a Panel body, instead of using MIFP. I guess the Wiki steers them in that direction -- I'll have to change the tone of that. ;)

Hmm, no mention of what:
- browser(s) we're talking about ?
- What Ext release we're talking about ?

but, I'll offer a couple of points:

The MIFP offers the most functionally (over MIF) and smarts to destroy the frame safely during an Ext layout transition (ie. items.remove(item) ) as long as something triggers it's destroy method (which Container.items.remove does do).

Using MIF as a Panels body would require that you invoke it's destroy method somehow when its hosting Panel is(if) destroyed. MIFP handles all that for you.

One thing I see in most Ext-developers code is that some sort of shutdown (especially if you have Ext running in the Iframe eg. /example/grid) strategy is missing. I just picked Grid as an embedding example, but GridExample, and most everyone, SHOULD "clean themselves up on the way out". Especially with gnarly embedded objects (like IFRAMES, OBJECT, EMBED, Combos(IE) and others ) involved.

Target any top-level application objects:

//Ext tears itself down during unload (must not use that!)
Ext.EventManager.on(window, "beforeunload",
Ext.destroy.createDelegate(Ext,
[App.viewport, App.appTabs, App.popupWin , App.loginWin]),
Ext ,
{single:true}
);
Drop that on the end of your startup script and see to it that the Layouts get a chance to clean-up your frames (especially on IE!). ;)

With that in mind, revised:


App.appTabs = new Ext.TabPanel({
region:'center',
deferredRender:false,
id: 'appTabs',
activeTab:0,
items:[{
contentEl:'center1',
title: 'Close Me',
closable:true,
autoScroll:true
},{
contentEl:'center2',
title: 'Center Panel',
autoScroll:true
},{
xtype: 'iframepanel',
title: 'Google',
id: 'google',
defaultSrc: 'http://www.google.com/'
},{
xtype: 'iframepanel',
title: 'Custom',
id: 'demoGrid',
defaultSrc:'../grid/grid3.html'
}]
})
See what you can do on all A-Grade-browsers with that approach and let us know how it goes. ;)

mankz
17 Jun 2008, 8:46 AM
@Henricd, or anyone for that matter:

Has anyone tried to measure the time saved by reusing the parent Ext library as MIF does rather than loading the full package for each iframe page? I'm considering replacing my iframe with a MIF, just want to know what other users are experiencing in terms of load time...

marco76
18 Jun 2008, 5:57 AM
Hi
I use the ux.ManagedIFrame/Panel.
I have this question.
I use the load function to refresh the Iframe.
But when I used this function I note that the loadMask is not loaded.
How can I do that when I refresh the iframe so that the load mask appears?

hendricd
18 Jun 2008, 6:06 AM
@marco76 -- It could be that the Mask appears/disappears too quickly for an update operation or you don't have loadMask defined?

hendricd
18 Jun 2008, 6:08 AM
@Henricd, or anyone for that matter:

Has anyone tried to measure the time saved by reusing the parent Ext library as MIF does rather than loading the full package for each iframe page? I'm considering replacing my iframe with a MIF, just want to know what other users are experiencing in terms of load time...

It's difficult to quantify. You save fetch time at the expense of consuming browser memory to cache the lib, and there is still the time it takes to eval all the code when injected into each frame.

marco76
18 Jun 2008, 6:13 AM
The first loading I can see the loadMask. Subsequent loading I can't see the mask.
I don't think that the update is too quickly because I try to load page more complex and the situation is the same

hendricd
18 Jun 2008, 6:14 AM
The first loading I can see the loadMask. Subsequent loading I can't see the mask.

Would need to see some code showing how you're doing things... ;)

marco76
18 Jun 2008, 6:17 AM
var stats = new Ext.Panel({
id: 'main-view-stats',
title:'Statistiche',
border:true,
closable:true,
autoScroll: true,
items:[
{
id:'frame-main-view-stats',
xtype: 'iframepanel',
border:false,
loadMask: true,
defaultSrc:myurl
}
],
tbar: [{
id:'stampa-stats',
text: 'Stampa',
iconCls: 'new-tab',
handler : function(){ Ext.getCmp('frame-main-view-stats').getFrame().print(); },
scope: this
}
],
reload: function(){
var content=Ext.getCmp('frame-main-view-stats');
content.load(myurl)


}

hendricd
18 Jun 2008, 6:20 AM
@marco76 -- You are mixing things up.

defaultSrc, setSrc() set the src property of the frame.

load/autoLoad write content locally into the frame document.



reload: function(){
var content=Ext.getCmp('frame-main-view-stats');
content.setSrc(); //refresh last url
}

marco76
18 Jun 2008, 7:01 AM
Ok
Many Thanks.
I have another question:
I would use some ext function inside the page that I load inside the iframe.
How can do it without reload all the ext js script?
Many Thanks

hendricd
18 Jun 2008, 7:12 AM
from the First post on this thread: see post: "Load Ext once, and apply it to your frames" (http://extjs.com/forum/showthread.php?p=120384#post120384).

Difficulty level: Difficult.

marco76
18 Jun 2008, 8:20 AM
OK thanks
I have another question.(Sorry....)
In the code I have posted before I get the iframe with not 100% height.
I have read the faq and I have the panel that belongs to a panel with managed layout ('border', etc).
Have I to set something?
Thanks

hendricd
18 Jun 2008, 8:25 AM
ManagedIFramePanel (xtype:iframepanel) IS a panel. You don't need to nest it:



var stats = new Ext.ux.ManagedIframePanel({

id: 'main-view-stats',
title:'Statistiche',
border:true,
closable:true,
autoScroll: true,
loadMask: true,
defaultSrc:myurl,
tbar: [{ .....

});

mankz
18 Jun 2008, 10:10 PM
It's difficult to quantify. You save fetch time at the expense of consuming browser memory to cache the lib, and there is still the time it takes to eval all the code when injected into each frame.

Quick answer :)

So, since I'm already caching all my script files I probably won't gain any speed since the ext files linked to in my iframe pages will all be cached on client after the main page is loaded. Am I right?

One more question about the MIFP, does it behave as a true ext panel? I.e. if I use it in a border layout and resize my browser window, will the iframe content page resize accordingly?

hendricd
19 Jun 2008, 3:39 AM
So, since I'm already caching all my script files I probably won't gain any speed since the ext files linked to in my iframe pages will all be cached on client after the main page is loaded. Am I right? Don't confuse browser caching with the ux.ModuleManager cache used for this solution (http://extjs.com/forum/showthread.php?p=120384#post120384).



One more question about the MIFP, does it behave as a true ext panel? I.e. if I use it in a border layout and resize my browser window, will the iframe content page resize accordingly?

Yes, MIFPanel extends Ext.Panel so it is 'layout' aware and by default, it does resize the frame accordingly.

donssmith
27 Jun 2008, 10:49 AM
I loaded and brought up the iframesdemo.html and when I clicked on the Ajaxian tab of the WebBrowser Fun window I received the following error in Firebug:


[Exception... "Unexpected error arg 0 [nsIDOMEvent.target]" nsresult: "0x8000ffff (NS_ERROR_UNEXPECTED)" location: "JS frame :: http://localhost/cbpop/ext/adapter/ext/ext-base.js :: anonymous :: line 10" data: no]

Do I have something configured incorrectly?

Windows XP SP2
FF 2.0.0.14

hendricd
27 Jun 2008, 10:59 AM
Ajaxian has a lot of Flash content and I suspect it could be related to this (http://willperone.net/Code/as3error.php). (Even worse on FF3). It's one of the dangers in running foreign domains in your frames.

I'm not worried about it (at this time) ;)

donssmith
27 Jun 2008, 2:31 PM
Ok thanks.

lucky_luk3
29 Jun 2008, 3:48 AM
hi Hendricks, first of all i want to thank you for this wonderful plugin =D>, and im going to use it on my next project.

anyway, i have a little problem about css swapstylesheet to update all opened iframes's theme into a new one. Im using iframepanel to create a tab dynamically upon clicking the left tree node.

Is there a way to loop through all opened iframes, get the id and apply css swapstylesheet every time i change the theme inside combobox.


thanks in advance :D

hendricd
29 Jun 2008, 5:32 AM
This should handle all MIFs only:



Ext.select('.x-managed-iframe',true).each(
function(MIF){
if(MIF.CSS){ //only available for same-origin frames
MIF.CSS.swapStyleSheet('currStyle', '..\..\resources\styles\customRed.css');
}
}
);

lucky_luk3
29 Jun 2008, 5:50 AM
quick response, thanks :D

and its working \:D/

DaNCeT
30 Jun 2008, 2:07 PM
Something really important for those that want to render a transparent background iframe, I've been searching for hours now trying to find the reason why my managed iframe panel was consistently ignoring my transparent background content in the iframe in IE7 (others rendered just fine).

After hours of searching, I found this:
http://msdn.microsoft.com/en-us/library/ms537627(VS.85).aspx

This article describes that IE needs the allowTransparency="true" property to be set to allow the content of the iframe to render with transparent background.

After reading this, I added following line at line 1199 in mirame.js (version 1.1):



this.bodyCfg ||
(this.bodyCfg =
{tag:'div'
,cls:'x-panel-body'
,children:[
{ cls :'x-managed-iframe-mask' //shared masking DIV for hosting loadMask/dragMask
,children:[
Ext.apply(
Ext.apply({
tag :'iframe',
frameborder : 0,
allowTransparency : 1,
cls : 'x-managed-iframe',
style : this.frameStyle || null
},this.frameConfig)
,unsup , Ext.isIE&&Ext.isSecure?{src:Ext.SSL_SECURE_URL}:false )
//the shimming agent
,{tag:'img', src:this.shimUrl||Ext.BLANK_IMAGE_URL , cls: this.shimCls }
]
}
]
});


And my problem was solved. May be worth to take this config option up in a next release though :-)

hendricd
30 Jun 2008, 2:40 PM
@DaNCeT -- Wow, nice catch that was. :)

I'll look into that one some more. In the mean-time, you have control over frame attributes via the frameConfig config option.



.add ( {
xtype:'iframepanel',
frameConfig : Ext.isIE?{ allowTransparency : 1 }:null ,
frameStyle : { overflow : 'none' } //obj style configs only
....
});
that value is Ext.applied to the default bodyCfg, so you can add all sorts of stuff..

cirvine
2 Jul 2008, 8:21 AM
I'm unsure if this is the component I'm looking for...

I'm rebuilding an existing application, with a reporting module. Handily enough, the existing server-side classes return the reports as an object with a CSS text blob and a HTML table. So, I can gather the parameters, do an Ajax request, and get back from the server a chunk of CSS and a chunk of HTML. And everything comes back properly.

Now I just want to display this data, properly formatted with the CSS applied, in an Ext Window popup. But nothing I've been trying works, the report CSS is never applied, and I'm getting a bit annoyed/frustrated with the whole thing....

Can anyone help?!

hendricd
2 Jul 2008, 9:17 AM
@cirvine-- Given Ext's built in reset.css emulation, an iframe is likely the way to go if your including your own CSS Rules for that markup.

Just package the response up as a standard HTML page, and use something like this:


new Ext.Window(
{title: 'Report',
id:'reportWin',
width : 500,
height : 600,
constrain : true,
layout: 'fit',
items: {
xtype:'iframepanel',
defaultSrc:'reportGen.php?......'
}
}).show();

vvietsch
2 Jul 2008, 1:04 PM
Hi hendricd,

I just wanted to test your extension for managed iframes. Unfortunately I have got a layout problem and I hope you can and will help me to understand and solve it.

I build my own example from the example you posted with the extension (Fun webbrowser).
The first Tab (google) is ok, but the other tabs each are moving down the iframepanel a bit. Therefore I have got free space on top of the iframepanels. The higher the number of the panel the more space is set on top.

I include my example as .zip-file. You may open it locally. The library files are loaded via http from a webserver though.

I already spend hours but could not find the problem. THe example is very easy but I seem to be kind of blind.

Thank you for your help,
Volker

hendricd
2 Jul 2008, 1:15 PM
What browser, Ext version, MIF version?

liusyan
2 Jul 2008, 11:55 PM
can see any online demo

cirvine
3 Jul 2008, 12:29 AM
Doug, that was exactly what I needed! Works like a charm, thank you!

stumpy_uk
4 Jul 2008, 10:45 AM
Doug,

Sorry to ask this question as its probably obvious but for the life of me I cannot work out how to accomplish it. I have the usual viewport / tabpanel / Iframe I can create them close them etc but when a user browses to a page within the iframe I would like to get at that URL to capture it. However I can't seem to access it. src and defaultSrc are obviously the starting point of the iframe, how do I get the current URL.

Many Thankis

Stumpy

hendricd
4 Jul 2008, 10:55 AM
...I have the usual viewport / tabpanel / Iframe I can create them close them etc but when a user browses to a page within the iframe I would like to get at that URL to capture it.

This post (http://extjs.com/forum/showthread.php?p=152660#post152660) may help with that.

stumpy_uk
4 Jul 2008, 2:47 PM
This post (http://extjs.com/forum/showthread.php?p=152660#post152660) may help with that.

Sorry Doug,

Still can't see it on page 2 of this thread, is it your reply to someone or another post as I dont see the issue and I have been through this thread, the 1.05 (yes all 58 pages :D ) and the 1.0 threads

Sorry to be a pain..

hendricd
5 Jul 2008, 4:52 AM
@stumpy_uk -- I guess I'm not clear what you're asking for.

You want the current URI of the frame? or,

the URL of a link clicked within the frame?

stumpy_uk
5 Jul 2008, 8:07 AM
The former and I have tried the getDocumentURI but it errors, I guess I have missed something obvious but can get the title, src, id, iconCls etc but not the URI

This is a snipper of what I was doing..


this.tabs = tabs.getActiveTab();
alert(this.tabs.getFrame().getDocumentURI());

Thanks again for looking at this and for all you do in this community..

Stumpy

hendricd
5 Jul 2008, 8:26 AM
@stumpy_uk -- For a non-"same-origin" frame, the best way is to use the MIF.src property as that is used to track/refresh a URI.



var MIFP = tabs.getActiveTab();
var currentURI;
try{ //foreign domain document access is protected.
currentURI = MIFP.getFrame().getDocumentURI();
} catch(ex) {
currentURI = MIFP.getFrame().src;
//or:
currentURI = MIFP.getFrame().dom.src;
}


But the src property is only available when you set the src, not necessarily if the user forces a URI change within the frame by a form-submit or following a link.

stumpy_uk
5 Jul 2008, 10:19 AM
@stumpy_uk -- For a non-"same-origin" frame, the best way is to use the MIF.src property as that is used to track/refresh a URI.



var MIFP = tabs.getActiveTab();
var currentURI;
try{ //foreign domain document access is protected.
currentURI = MIFP.getFrame().getDocumentURI();
} catch(ex) {
currentURI = MIFP.getFrame().src;
//or:
currentURI = MIFP.getFrame().dom.src;
}


But the src property is only available when you set the src, not necessarily if the user forces a URI change within the frame by a form-submit or following a link.

Thanks Doug, its the users force I need to cater for I guess then as I am hitting the non origin frame, thats where the page 2 script comes into play I guess. I will look into that, thanks again for all your help.

hendricd
5 Jul 2008, 11:21 AM
its the users force I need to cater for I guess then as I am hitting the non origin frame, thats where the page 2 script comes into play I guess.

That won't help you either. Foreign domain frames are untouchable. B)

stumpy_uk
6 Jul 2008, 7:32 AM
Damn - Ah well back to plan A let them add them manually....LOL!!

Cheers for the help Doug.

Stumpy..

DigitalSkyline
6 Jul 2008, 10:42 AM
Hey Doug ... did you see this little script:
http://feeds.feedburner.com/~r/ajaxian/~3/326662324/quipt-caching-js-in-windowname

Thought it was interesting and possibly useful to you and your JIT implementation.

hendricd
6 Jul 2008, 11:26 AM
Yep. Saw that. Not sure it's a good all-around fit for JIT.

But, I do have other plans for window.name. :-?

pokerking400
7 Jul 2008, 12:14 AM
Hi ,

I needed to display a external html file in a window. I used your miframe.js to create that.

It works fine in firefox but crashes on miframe.js. Something in miframe.js that internet explorer does n't like. And it gives weird error like invalid procedure call at line 26.

if anyone faced this problem and have a solution , let me know.

thanks.

pokerking400
7 Jul 2008, 12:29 AM
I am using like this now instead of managed iframe....as it is crashing in IE

html:'<IFRAME src="html/googlemap.html" style="width:565px;height:468px" frameborder="no"></IFRAME>',

This method has very slow response.

cazzadori
7 Jul 2008, 12:46 AM
Hello all,
first I want to thank you for the grat job!
I'm creating an application that uses a border layout in wich I display a tabpanel in the center region and a Panel in the south.
Each tab of the tabpanel is an ManagedIframePanel in wich I display a page from the local server.
I'm using ExtJs 2.1 and miframe 1.1
I'm having some trouble when i remove/move an ManagedIframePanel. I try to describe the two things separatelly.
First:
if in the trab panel there are many panels and I remove one of them by using
tabPanel.remove(panel, false);

the managedIframePanel's iframe remains in palace so if you switch to a panel after the one removed you will see the removed iframe instead of the
correct iframe. If you switch to a tab previos to the removed one you will see the correct iframe.
If you restore the removed iframe everything return to normal behavior.
For this I have the same behavior in IE 7 and FF 2.0
Ex.
a tabPanel with four tabs. Remove the second tab than switch to tab three and four, you will see iframe of the second tab, if you
switch to tab oenthan you see the correct iframe. If you restore the removed iframe than every iframe return to show normally.

Second:
If I remove a managed iframe from the tabPanel and insert it into the south panel the panel moved to south is shown only in some cases.

I attach a reduced version of my application. Note that the south panel and the moving of the iframe is enabled only in IE and not FF due to
the well known problem of reloading iframe.
I think that booth the problems comes up due to panel removal without auto destruction.
I've "fixed" the first problem by hidding the panel before removal
Thanks in advance

marco76
7 Jul 2008, 1:55 AM
Hi.
I use MangedIframe for load a XML page with his XSL.
Now I can see that the mask of the Iframe disappears some seconds before the XML document . I think that is a strange behavior.
What is the reason of this?
Thanks Marco

hendricd
7 Jul 2008, 4:23 AM
Hi ,

I needed to display a external html file in a window. I used your miframe.js to create that.

It works fine in firefox but crashes on miframe.js. Something in miframe.js that internet explorer does n't like. And it gives weird error like invalid procedure call at line 26.

if anyone faced this problem and have a solution , let me know.

thanks.

@pokerking400 -- What Ext version are you talking about here, what browsers versions? A code fragment would be helpful as well.

hendricd
7 Jul 2008, 4:37 AM
@cazzadori -- A couple things you might not be aware of when removing components from Containers:

Removing an item from a Container (with the autoDestroy param == false) removes the Component references from the Container items collection, but does NOT change the position of the Components DOM elements in the document flow. So, your el, bwrap, body, iframe etc remain in their original position.

Here is an ammended version that should handle movements to other containers:



var removeIfrmePanel = function(container, panel) {
if (!panel.removing){
if (!panel.moving){
hiddenTabs.push(panel);
panel.getFrame().reset();
}
panel.removing = true;
container.remove(panel, false); //preserve the Components DOM elements
Ext.getBody().appendChild(panel.getEl()); //Move it out of tabPanels DOM flow.
panel.hide(); //and hide it until needed later

return false;
}
else{
panel.removing = false;
return true;
}
};Apply those 'rules' to your example again, and see how things look.

hendricd
7 Jul 2008, 4:41 AM
Hi.
I use MangedIframe for load a XML page with his XSL.
Now I can see that the mask of the Iframe disappears some seconds before the XML document . I think that is a strange behavior.
What is the reason of this?
Thanks Marco
@marco -- Generally speaking, the loadMask (altho configurable) is released as soon as the frames DOM is ready. For an XML document, there aren't many renderable elements on a page, so I would not expect it to be visible for very long.

cazzadori
7 Jul 2008, 4:49 AM
@cazzadori -- A couple things you might not be aware of when removing components from Containers:

Removing an item from a Container (with the autoDestroy param == false) removes the Component references from the Container items collection, but does NOT change the position of the Components DOM elements in the document flow. So, your el, bwrap, body, iframe etc remain in their original position.

Here is an ammended version that should handle movements to other containers:



var removeIfrmePanel = function(container, panel) {
if (!panel.removing){
if (!panel.moving){
hiddenTabs.push(panel);
panel.getFrame().reset();
}
panel.removing = true;
container.remove(panel, false); //preserve the Components DOM elements
Ext.getBody().appendChild(panel.getEl()); //Move it out of tabPanels DOM flow.
panel.hide(); //and hide it until needed later

return false;
}
else{
panel.removing = false;
return true;
}
};Apply those 'rules' to your example again, and see how things look.


very good, it works! Thanks

marco76
7 Jul 2008, 5:03 AM
@marco -- Generally speaking, the loadMask (altho configurable) is released as soon as the frames DOM is ready. For an XML document, there aren't many renderable elements on a page, so I would not expect it to be visible for very long.
Ok.
Is it possible to configure the mask so that it disappears when the document is ready?

hendricd
7 Jul 2008, 5:09 AM
@marco --



loadMask : {hideOnReady:true, msg:'Masked Until domready...'}But, the current domReady detection scheme for MIF is partially based on the presence of the frames' document.body. Is your XML packaged within a standard HTML page?

marco76
7 Jul 2008, 5:18 AM
@marco --



loadMask : {hideOnReady:true, msg:'Masked Until domready...'}But, the current domReady detection scheme for MIF is partially based on the presence of the frames' document.body. Is your XML packaged within a standard HTML page?
No.
I call a pure XML with his XSL

hendricd
7 Jul 2008, 5:21 AM
No.
I call a pure XML with his XSL
Then with a pure XML document, the mask will likely remain until the frame is fully loaded.

marco76
7 Jul 2008, 6:07 AM
Then with a pure XML document, the mask will likely remain until the frame is fully loaded.

What can I do to avoid this effect?
Load mask for 1 second
Empty page for 3 second
and then the XML document

hendricd
7 Jul 2008, 6:21 AM
Browser? Ext version ?

marco76
7 Jul 2008, 6:23 AM
Browser? Ext version ?

Browser:IE6,IE7 and FF
Ext Version:Ext 2.0

hendricd
7 Jul 2008, 6:26 AM
MIF 1.1?

What masking effect do you seek?

Is it a large XML document?

marco76
7 Jul 2008, 6:30 AM
MIF 1.1?

What masking effect do you seek?

Is it a large XML document?

Yes MIF 1.1

A normal masking effect is perfect.

XML size:65-70 KB

hendricd
7 Jul 2008, 6:33 AM
@marco -- Post a code frag of usage, might be something silly there (or not). (I'm working on a newer release for FF3 and Ext 2.1)

Any reason why you want to display raw XML to the user?

marco76
7 Jul 2008, 6:39 AM
@marco -- Post a code frag of usage, might be something silly there (or not). (I'm working on a newer release for FF3 and Ext 2.1)

Any reason why you want to display raw XML to the user?


The code:


this.anteprima=new Ext.ux.ManagedIframePanel({
id: 'anteprima-DOC_'+document_id,
xtype: 'iframepanel',
border:false,
hidden:true,
height:height,
fitToParent:true,
loadMask: {hideOnReady:true,msg:'Caricamneto in corso...'}, defaultSrc:url_anteprima+'?noCache='+(new Date).getTime()+'.'+Math.random()*1234567,
scope:this,
reload: function(){
this.setSrc(url_anteprima+'?noCache='+(new Date).getTime()+'.'+Math.random()*1234567);
}
});



I show the XML with his XSL.
I have the document to show that has this format and I must show this.

hendricd
7 Jul 2008, 6:42 AM
Due to potential absence of a document.body in the frame, try hideOnReady : false.

marco76
7 Jul 2008, 6:50 AM
Due to potential absence of a document.body in the frame, try hideOnReady : false.

OK PERFECT,
Now it works.
Thank you very much

eway
8 Jul 2008, 5:12 AM
Hi hendricd,
I'm have some trouble to use miframe.js. There is an iframe in a tabpanel, it's a checkboxtree in the iframe, how to get the checkboxtree's check event in the tabpanel,or how to get the checkboxtree's check value in the tabpanel?
Thank you for your help.

hendricd
8 Jul 2008, 5:17 AM
Post your iframepanel config and your tree checkbox handler. Is Ext loaded in both main page and frame?

eway
8 Jul 2008, 5:28 AM
It's the tabpanel part below:


xtype:'tabpanel',
plain:true,
activeTab: 0,
height:300,
width:400,
defaults:{bodyStyle:'padding:10px'},
items:[{
title:'choose menu',
layout:'form',
items: [{
id:'checkboxtreeIframe',
defaultType :'iframepanel',
defaultSrc : 'checkboxtree.html',
frameBorder: 0,
cls: 'x-panel-body',
width: '100%',
height: '100%'
}]
}]
checkboxtree.html
[html]
<html>
<head>
<title>Complex Layout</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="checkboxtree.js"></script>

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'images/s.gif';
Ext.onReady(function(){

var tree = new Ext.tree.TreePanel({
el:'tree-div',
width:350,
height:250,
checkModel: 'single', //

hendricd
8 Jul 2008, 5:40 AM
The easiest way:

main-Page:

Ext.ns('App'); //setup (globally accessible) Object/Function
App.frameTreeChecked = function(node){
//go nuts
};
in Frame:

tree.on('check', parent.App.frameTreeChecked , parent.App);

eway
8 Jul 2008, 5:57 AM
great, it works! Thank you very much!

mankz
8 Jul 2008, 1:07 PM
@henricd

On the MIFP, roughly how much work would I need to do to strip out the functionality doing the loadmask and the actual ext panel wrapping (to get the resizing working). Would really like to try that out... :)

hendricd
8 Jul 2008, 1:12 PM
I don't follow you. What's the issue you're trying to address?

mankz
8 Jul 2008, 1:16 PM
I'd like to try out the features I mentioned, which are both supported by the MIFP right? Those 2 features would be very interesting for the project i'm working on right now and if I could isolate the code doing just that it would be neat! :)

hendricd
8 Jul 2008, 1:24 PM
autoSizing is just applying overflow:auto, height:100%, width:100% (defaults) to the frame style so it sizes itself to the Panel.body. You might have alook at ux.SizeToTarget (http://extjs.com/forum/showthread.php?t=37822) instead.

The masking/shimming is rather unique to the iframe 'beast', however. ;)

mankz
8 Jul 2008, 1:27 PM
Ok, thanks!

ollyando
8 Jul 2008, 1:45 PM
Hi Guys,

I am attempting to base my application using the adiframe as an example. I want to dynamically build the tree in a separate js file that I will generate from my oracle db using plsql. I want to build the tree in the same format as the one in the demo file, but reference it from different js file. Is this possible?

Thanks in advance

Orlando

hendricd
8 Jul 2008, 1:56 PM
just stick the generated output in treenodes.js :



Ext.ns('App')
App.treenodes = [ {


....


}];


and include it in a <script> tag or load it via an Ext.Ajax.request.

ollyando
8 Jul 2008, 2:21 PM
Thanks for the reply,

Okay I have done as you have suggested. I get the following error
"evs is not defined
[Break on this error] ,events:evs"

from my sampleNodes.js file

How can I make sampleNodes reference this from adiframe.js file

regards

Orlando

hendricd
8 Jul 2008, 2:35 PM
If your going to copy concepts, then blindly copy the entire thing.

Do a simple text search to find out what 6+ other pieces you forgot to copy. Or, do you need help with that, too? /:)

ollyando
8 Jul 2008, 2:43 PM
Why are people in these forums so harsh, i'm attempting to learn a new technology and posting for help in a support forum, i'm no javascript expert, my background is in database development. We all have to start somewhere with new technologies etc, and I can bet you for everyone who asks a question here, there are 100 more wanting to know the same thing, a more constructive answer would be more helpful, than blasting someone. I saw your excellent demo and i am attempting to modify it to use in my environment, so anyway I WILL go back to your example and try and figure it out myself.

hendricd
8 Jul 2008, 3:20 PM
@ollyando -- You're right.

It's been a long day here on the forums. And, don't let my recent outburst diminish the quality of support, ideas, and concepts available here.

We're all volunteers, but, it's a bit frustrating when someone (especially a beginner with the framework) copy/pastes from a rather advanced example, and says "I did what you said, and it doesn't work" with little (apparent) effort to do a little homework to find out why it does what it does, much less -- how.

Some advice:
a) If you have general questions on "how-one-might-do-something", post in the Help Forum, not in the Extensions Forum. You'll usually get a response from someone within minutes (worst case an hour).
b) Use the Google Forum search to find answers (the vBulletin search blows).
c) Get FireFox and Firebug (http://www.getFirebug.com) up running ASAP, and start snooping objects, HTML, and CSS rules and start setting breakpoints and looking at as much Ext source and /examples code as possible. There is a lot (perhaps too much) there to look at, but it's the best way to get that 'outer Join done'. ;)


Doug.extend(apology);

We'll see ya around.

ollyando
8 Jul 2008, 4:55 PM
Hey Hendrick, No problem, i'll take your advice, and google the forum. We all have those long days at work!!! Thanks for the plugin. =D>

Romantik
10 Jul 2008, 6:37 AM
Hi Guys
Help me please with some troubles

I have got complex layout with IFRAMES (ManagedIFrame) in Center and East regions

first problem


cPanel = centerPanel.add(
Ext.apply({
xtype: 'iframepanel',
id: 'mainFrame1',
frameConfig:{name:'mainFrame', frameborder:0 ,eventsFollowFrameLinks : false},
title: item.textMain,
frame: true,
deferredRender: false,
loadMask: false
})
);
centerPanel.setActiveTab(cPanel);

ePanel = eastPanel.add(
Ext.apply({
xtype: 'iframepanel',
id: 'eastFrame1',
frameConfig:{name:'eastFrame', frameborder:0 ,eventsFollowFrameLinks : false},
title: item.textEast,
frame: true,
deferredRender: false,
loadMask: false
})
);
eastPanel.setActiveTab(ePanel);

panelTree.on('click', function(treeNode){
centerPanel.getActiveTab().getUpdater().update({url: "index.php"});
});

var centerPanel = new Ext.TabPanel({
region: 'center',
id: 'center-panel',
activeTab: 0
});
var eastPanel = new Ext.TabPanel({
region: 'east',
id: 'east-panel',
activeTab: 0
});
index.php


<LI><a href="index.php" target="eastFrame">East</a>
<LI><a href="#" onClick="parent.eastFrame.location='index.php'">East 2</a>
when index.php loaded in center region and click in first url - I see new IE window
when click on second url - JS error parent.eastFrame.location is null or non an object

how to use correct target?

second problem:

when I add in index.php JS code or call JS file
<script type="text/javascript">
alert('bar');
</script>
or
<script type="text/javascript" src="bar"></script>

I don't see it in the source of index.php
but <a href="#" onClick="alert('bar');">Bar</a> works

tell me please how to use JS in the file loaded in IFRAME with help ManagedIFrame

thanks for any help

Best regards

hendricd
10 Jul 2008, 7:33 AM
Hi Guys
Help me please with some troubles

See inline comments:



cPanel = centerPanel.add(
Ext.apply({ //this apply is not doing anything
xtype: 'iframepanel',
id: 'mainFrame1',
// frame name will defualt to id specified here, or give another name if you want:
frameConfig:{autoCreate:{id:'mainFrame',name:'someFrame'}, eventsFollowFrameLinks : false},
title: item.textMain,
frame: true,
deferredRender: false,
loadMask: false
})
);
centerPanel.setActiveTab(cPanel);

ePanel = eastPanel.add(
Ext.apply({
xtype: 'iframepanel',
id: 'eastFrame1',
frameConfig:{autoCreate:{id:'eastFrame'}, eventsFollowFrameLinks : false},
title: item.textEast,
frame: true,
deferredRender: false,
loadMask: false
})
);
eastPanel.setActiveTab(ePanel);

panelTree.on('click', function(treeNode){
//do you need to use UpdateManager here? If so, enable scripts !
//centerPanel.getActiveTab().getUpdater().update({url: "index.php", scripts: true});
//or just change the frame src:
centerPanel.getActiveTab().setSrc( "index.php");
});

var centerPanel = new Ext.TabPanel({
region: 'center',
id: 'center-panel',
activeTab: 0
});
var eastPanel = new Ext.TabPanel({
region: 'east',
id: 'east-panel',
activeTab: 0
});
index.php


<LI><a href="index.php" target="eastFrame">East</a>
<LI><a href="#" onClick="parent.frames['eastFrame'].location='index.php'">East 2</a>
second problem:

when I add in index.php JS code or call JS file
<script type="text/javascript"> //these are removed if using Updater and scripts != true
alert('bar');
</script>
or
<script type="text/javascript" src="bar"></script>

Romantik
10 Jul 2008, 12:06 PM
thanls a lot, hendricd!
seems you merged incorect the title of main topic =)

Romantik
10 Jul 2008, 1:48 PM
Second problem solved, thanks
but first still has the problem


cPanel = centerPanel.add({
xtype: 'iframepanel',
id: 'mainFrame1',
frameConfig:{autoCreate:{id:'mainFrame'}, eventsFollowFrameLinks : false},
title: item.textMain,
frame: true,
deferredRender: false,
loadMask: false
});
centerPanel.setActiveTab(cPanel);

ePanel = eastPanel.add({
xtype: 'iframepanel',
id: 'eastFrame1',
frameConfig:{autoCreate:{id:'eastFrame'}, eventsFollowFrameLinks : false},
title: item.textEast,
frame: true,
deferredRender: false,
loadMask: false
});
eastPanel.setActiveTab(ePanel);

panelTree.on('click', function(treeNode){
centerPanel.getActiveTab().setSrc( "index.php");
eastPanel.getActiveTab().setSrc( "index.php");
});

var centerPanel = new Ext.TabPanel({
region: 'center',
id: 'center-panel',
activeTab: 0
});
var eastPanel = new Ext.TabPanel({
region: 'east',
id: 'east-panel',
activeTab: 0
});




<LI><a href="bar.php" target="eastFrame">East</a>
<LI><a href="#" onClick="parent.frames['eastFrame'].location='bar.php'">East 2</a>

first URL - opened new window
second - shows an error

hendricd
10 Jul 2008, 1:54 PM
what MIF version are you using?

Romantik
10 Jul 2008, 1:57 PM
1.1
I've read many topics by search and see one about 1.01
and updated again for sure from first page miframe1_1.zip (miframe.js)


/*
* @class Ext.ux.ManagedIFrame
* Version: 1.1
* Author: Doug Hendricks. doug[always-At]theactivegroup.com
* Copyright 2007-2008, Active Group, Inc. All rights reserved.
*

hendricd
10 Jul 2008, 2:23 PM
So, which is not working?:


<LI><a href="bar.php" target="eastFrame">East</a>

<LI><a href="#" onClick="parent.frames['eastFrame'].location='bar.php'">East 2</a>


If in Firebug console you enter:

frames['eastFrame'] what do you get?

Romantik
10 Jul 2008, 2:45 PM
error console:

Error: parent.frames.eastFrame has no properties
Source File: http://localhost/aan/index.php?module=client&action=client_ccc
Line: 1

hendricd
10 Jul 2008, 4:29 PM
Have you tried:



onClick="parent.Ext.getCmp('eastFrame1').setSrc('bar.php');"

Romantik
10 Jul 2008, 11:10 PM
onClick="parent.Ext.getCmp('eastFrame1').setSrc('bar.php');"
works!
thanks a lot, Doug!

stumpy_uk
16 Jul 2008, 12:11 PM
Doug,

Don't know if this is possible in the Managed Iframe but can you capture JS errors from specific Iframes, I want to re-act to those pages that don't want to be within an Iframe and ask the user if they want to open in a new window, I have tried capturing the error using catch but its not doing anything.

Cheers and thanks for this extension again...it is superb!.

Sumpy

hendricd
16 Jul 2008, 12:19 PM
Doug,

Don't know if this is possible in the Managed Iframe but can you capture JS errors from specific Iframes, I want to re-act to those pages that don't want to be within an Iframe and ask the user if they want to open in a new window, I have tried capturing the error using catch but its not doing anything.


@stumpy -- If those frames are hosting foreign-domain documents, your hands are tied, firmly, from that sort of interaction.

You might try playing with window.top of the parent document to fool the frame-buster into thinking it's actually the same frame. Not much else you can do, I'm afraid. :-|

stumpy_uk
16 Jul 2008, 12:22 PM
Thanks Doug,

Sorry for posting on this discussion got my forum posts mixed up...

Cheers

Stumpy

mystix
16 Jul 2008, 7:50 PM
@hendric,

no idea who moved this thread to the 2.x Help forum, but i've just moved it back to Ux and Plugins.

if the move was intentional, feel free to move it back to 2.x Help.

franklt69
17 Jul 2008, 5:17 AM
I have a basic doubt using ManagedIframePanel, I have a html file saved in a database, and I want to load it in ManagedIframePanel, so I am doing it:


this.previewBody.load({
url: "db/Browse.ashx",
params: {
AttributesMapping: 'BodyText^BodyText',
conditionParams: '11',

},
method: 'GET',
nocache: false
});

and it is render in text form? what is that I send from server to load the html page inside ManagedIframePanel ?

regards
Frank

hendricd
17 Jul 2008, 5:26 AM
@franklt69 -- If you are encoding/escaping HTML Entities prior to saving to the database, you'll need to reverse that process again when serving it up. (ie &gt; back to '>' )

franklt69
17 Jul 2008, 6:54 AM
@hendric

From the server, I am getting a xml, it have an attributes where is the html that I want to load into ManagedIframePanel, I can load it xml in a store, the doubt is there some way to load the ManagedIframePanel from a store?

regards
Frank

hendricd
17 Jul 2008, 6:59 AM
That would simply be:



MIFP.getFrame().update( markupString);


Just retrieve the record from your store and use record.get('yourMarkupField') as the markupString.

franklt69
18 Jul 2008, 5:09 AM
Hi hendricd, I did it and is working ok, but sometimes the ManagedIframePanel isn't refreshed, if I resize the windows o resize the panel then appear the content inside of ManagedIframePanel, maybe I am missing a refresh some advice is welcome?


this.dsEmailBody.on('load', function(){
// debugger;
var markupString = this.dsEmailBody.getAt(0).data.BodyText;
this.previewBody.getFrame().update(markupString);


}, this);

regards
Frank

hendricd
18 Jul 2008, 5:26 AM
@franklt69 -- If you are trying to render email bodies (especially with markup in them) you should consider using XTemplates while doing so.

That ensures you are rendering a full DOM image (HTML<HEAD<STYLE<BODY) to the frame.

Safe rendering of email bodies often requires considerable cleansing.

What version of MIF/P are you using? What browser is doing that?

franklt69
18 Jul 2008, 5:51 AM
@hendricd

I am using FF3, Ext.ux.ManagedIFrame Version: 1.1 the ManagedIframePanel is in a windows in a layout



this.previewInfo = new Ext.Panel({
id: 'panelPreviewInfo',
region: 'north',
split: false,
autoHeight:true,
minHeight: 85,
maxHeight: 85,
bodyStyle:'padding:5px; background-color:#FFFFFF; ',
border: false,
frame: false,
hideMode: 'offsets',
autoScroll: true
});

this.previewBody = new Ext.ux.ManagedIframePanel({
bodyStyle:'padding:5px; background-color:#FFFFFF',
border: false,
frame: false,
layout: 'fit',
region: 'center',
split: true,
hideMode: 'offsets',
autoScroll: true
});

this.PanelCenter = new Ext.TabPanel({
region: 'center',
margins: '0 0 0 0',
activeTab: 0,
border: false,
bodyStyle: 'background-color:#fff',
enableTabScroll: true,
plugins: new Ext.ux.TabCloseMenu(),
defaults: {
autoScroll: true
},
items: [{
id: 'main',
border: false,
margins: '0 0 0 0',
layout: 'fit',
items: [{
region: 'center',
border: false,
layout: 'border',
margins: '0 0 0 0',
items: [{
region: 'center',
layout: 'fit',
border: false,
minHeight: 150,
height: 150,
split: true,
items: this.PanelGridItem
}, {
autoScroll: true,
layout: 'fit',
region: 'south',
split: true,
height: 300,
bodyStyle: 'background-color:#fff',
items:[this.previewInfo, this.previewBody]
}, {
autoScroll: true,
layout: 'fit',
region: 'east',
split: true,
hidden: true,
width: 400,
bodyStyle: 'background-color:#fff'


}]
}]
}]
});


regards
Frank

hendricd
18 Jul 2008, 6:07 AM
@franklt69 -- If your Window is not collapsible, there is no need to mess with hideMode anywhere. See other inlines:



this.previewInfo = new Ext.Panel({
id: 'panelPreviewInfo',
region: 'north',
split: false,
autoHeight:true,
minHeight: 85,
maxHeight: 85,
bodyStyle:'padding:5px; background-color:#FFFFFF; ',
border: false,
frame: false,
hideMode : !Ext.isIE?'nosize':'display', //use the new hidemode MIFP provides
autoScroll: true
});

this.previewBody = new Ext.ux.ManagedIframePanel({
bodyStyle:'padding:5px; background-color:#FFFFFF',
border: false,
frame: false,
layout: 'fit', //no items for MIFP anyway
region: 'center',
split: true,
hideMode: 'offsets',
autoScroll: true //let MIFP handle all this
});

this.PanelCenter = new Ext.TabPanel({
region: 'center',
margins: '0 0 0 0',
activeTab: 0,
border: false,
bodyStyle: 'background-color:#fff',
enableTabScroll: true,
plugins: new Ext.ux.TabCloseMenu(),
defaults: {
autoScroll: true
},
items: [{
id: 'main',
border: false,
margins: '0 0 0 0',
layout: 'fit',
items: [{
region: 'center',
border: false,
layout: 'border',
margins: '0 0 0 0',
items: [{
region: 'center',
layout: 'fit',
border: false,
minHeight: 150,
height: 150,
split: true,
items: this.PanelGridItem
}, {
autoScroll: true,
layout: 'fit', //shouldn't this be 'border' ??
region: 'south',
split: true,
height: 300,
bodyStyle: 'background-color:#fff',
items:[this.previewInfo, this.previewBody] //[north, center] right?
}, {
autoScroll: true,
layout: 'fit',
region: 'east',
split: true,
hidden: true,
width: 400,
bodyStyle: 'background-color:#fff'


}]
}]
}]
});

sdrew
21 Jul 2008, 9:18 AM
I tried downloading from multiple computers on multiple o/s, using different zip programs and cannot unzip either demopack or miframe1_1.zip. Whats the trick to be able to try out this extension??

Thanks.

hendricd
21 Jul 2008, 9:20 AM
Try downloading with Firefox. It seems IE has troubles with vBulletin binary downloads.

sdrew
21 Jul 2008, 10:46 AM
Thanks, I actually found that it appears the website is gzipping the zip. So I used winrar to unpack the file from the gzip then rename the file to .zip and was then unble to unzip.

marco76
28 Jul 2008, 11:11 PM
Hi
I think this extension is fantastic.
I have a question about this.
I have a tabpanel with two panel one is a gridpanel,one is a MIframePanel.
In the MIframepanel I load an external Html page.
In this page I use a my Ext function.Inside this function I would change the title of the MIframepanel and I would reload the gridpanel store.
How can I do that? Is It possible to have references to the other panel from inside the MIframe?
Many thanks

hendricd
29 Jul 2008, 3:49 AM
... In this page I use a my Ext function.Inside this function I would change the title of the MIframepanel and I would reload the gridpanel store.
How can I do that? Is It possible to have references to the other panel from inside the MIframe?

If the embedded document is a "same-origin" page, it's quite simple:

mainPage.html:

var reloadGrid =function(){
Ext.getCmp('myGrid').reload();
//do other things...
};
framePage.html:


parent.reloadGrid();
//or
var c= parent.Ext.getCmp('myGrid');
if(c)c.reload();