ux.ManagedIframePanel (1.05, 1.0 baseline closed)

[hendricd]

What is the mediaPlayer, and where is it embedded?

Are/Is the survey(s) typically used only once?

<IFrame/object/embed> tags are expensive to initialize (esp on older equipment). You might try creating your Ext.Window in advance (but hidden) with two items:[MIFP,ux.MediaPanel ?] without defaultSrc, etc. and not set those until your ready.

Is browser cache enabled on those boxes? Cleaned out lately?

Is your serverside up to the task?

Check out YSlow, FF-Nettab and look for bottlenecks...

More RAM is king ! ;)

[buenavida]

Thank you Hendric, What a speedy reply.

Thanks for your correction on my code, I stripped down some irrelevant parts, so It might look odd to you. Plus I am a newbie.

Another question, if I may. Now that I can access frame during documentloaded event.

I guess :

frame.dom.id is for example "_ext_gen_someId" then it will be equivalent to using frames ["_ext_gen_someId"], assuming there is a frame.dom.id,

sorry for a silly confirmation question as my development tools are all at work, as the Yahoo.util I used does a checking on the target frame using regex and what I passed as its argument must be something like frames["_someframeId"]

Best Regards
Marty

[hendricd]

@Marty :

frames['someId'] == Ext.getDom('someId') == Ext.get('someId').dom

All represent the HTMLElement(object) in the DOM.

The frame parameter passed in the event is an Ext.Element wrapper around HTML elements.


Get more familiar (http://extjs.com/learn/Tutorial:Introduction_to_Ext_2.0) with the differences, and you'll do just fine.

[JeffBurr]

What is the mediaPlayer, and where is it embedded?

Are/Is the survey(s) typically used only once?

<IFrame/object/embed> tags are expensive to initialize (esp on older equipment). You might try creating your Ext.Window in advance (but hidden) with two items:[MIFP,ux.MediaPanel ?] without defaultSrc, etc. and not set those until your ready.

Is browser cache enabled on those boxes? Cleaned out lately?

Is your serverside up to the task?

Check out YSlow, FF-Nettab and look for bottlenecks...

More RAM is king ! ;)

Thanks to the quick reply!

I am using Windows Media (I know, I know) and it is embedded once in the main page. It plays a presentation that is typically close to an hour long.

During the presentation, at specified times, it pops an Ext.Window with a MIF (which I create when the page loads) and sets the src to a php page which renders a question in the window. The response is then sent back in the same iframe and results are shown. Then the user closes (hides) the window.

As I said, it works great on good machines. It does not seem to be a server-lag issue. I know that RAM is king, but unfortunately, this has to work for the common people.

It looks like I am going to have to go back and retool this (with a lot more JS) so that it uses the Ext.Updater to load questions rather than the MIF...

[jarrod]

Not sure if it is a bug, but setting 'stateful : false' still results in state cookies getting created to store defaultSrc?

[hendricd]

@jarrod - make sure you're using the latest (1.04) release. I did some work on state for that release.

[jarrod]

Thanks, 1.04 works fine for stateful:false... :)

[ignatius]

Not sure if this is a general ExtJS question, an MIF question or an Ext Desktop/Window question...

Background:
I have an Ext.Destop app from which Ext.Windows are launched from shortcut icons (as in the Desktop example). Each window creates an MIF in which an Ext.onReady() script is called from a same domain url. What I want to do is close the window from inside the iframe via a button action.

Q. How do I address the Ext.Window containing an iframe from inside the iframe itself?

[hendricd]

That would be:



parent.Ext.getCmp('yourWindowId').......

[nkohari]

I have an app that hosts ManagedIframePanels in a tab panel. The contents of the tab panels are also designed to work without the "shell" of the tab panel -- that is, they should be able to be loaded without being hosted in the tab. I'm using Ext both outside in shell, and inside the MIF.

However, it seems like the function I pass to Ext.onReady() inside the frame doesn't get called. Is the MIFP doing something funky with the events for the document inside the frame?

(By the way, MIF is a great extension! If I can get this problem figured out, it's a perfect solution for my app.)

Thanks!

[hendricd]

Is the MIFP doing something funky with the events for the document inside the frame?

No, MIF/P sets no event handlers in the embedded document for document status detection.
It does however, set an onreadystatechange(IE)/onLoad handler on the Iframe object itself.

As a test, try commenting out Line 191 if miframe.js:


// el.dom[el._eventName] = el.loadHandler.createDelegate(el);
If your embedded Ext.onReady suddenly works (on both IE and Gecko), let me know..

[nkohari]

Thanks for the quick reply. I commented out the line as you requested, and now I get this error:

fn has no properties
http://localhost/Symphony/content/js/ext/ext-all-debug.js
Line 1641

Here's the pertinent part of the stack trace as reported by Firebug:

listen(Window view.action, "DOMFrameContentLoaded", undefined, undefined, undefined)ext-all-debug.js (line 1641)
addListener(Window view.action, "DOMFrameContentLoaded", undefined, undefined, undefined)ext-all-debug.js (line 1700)
ManagedIFrame()miframe.js (line 193)
onRender(Object dom=div#ext-gen14.x-panel-body id=ext-gen14, null)miframe.js (line 906)
render(Object dom=div#ext-gen14.x-panel-body id=ext-gen14, undefined)ext-all-debug.js (line 12257)
render()ext-all-debug.js (line 13843)
onLayout(Object initialConfig=Object layout=Object region=center, Object dom=div#ext-gen14.x-panel-body id=ext-gen14)
...

It does seem like the events are firing, though. I should have mentioned that I'm actually trying to create "nested MIFPs, in that the page that I load within the frame also has an MIFP in it.

[hendricd]

Well, I guess quick test turned into quick-failure. ;)

Your nested iframe structure will be difficult to diagnose from here.

[jexxi]

@hendricd,before I ask , let me show you the snippet I used


Ext.get('btnLiveChat').on('click', function(e){
var winChat = new Ext.Window({
title: 'EasyLiveChat'
, autoDestroy: true
, resizable: false
, constrainHeader: true
, width: 520
, height: 448
, plain: false
, items: {
xtype: 'iframepanel'
, defaultSrc: 'http://www.livesupport.net/PreChatSurvey.aspx?accountID=1&siteID=3&queueID=6&mid='
}
});
winChat.show(Ext.get(e.target));
});
I simply create window with MIF that pointing to third party application (the code above show dummy URL).
When I click the button, the window open and the MIF loading, and everything looks fine.
When I click window's close button, and a few seconds later, I got Javascript error said: "Error: Permission denied".
Then I do some investigation, and here are the facts:
1. in PreChatSurvey.aspx, there was code that keep executing periodically. Here's the code that I capture using MS-Fiddler:


var CommandImage = null;
var ImageCheckFrequency = 6000;
var UniqueID = 0;

var AccountID = "1";
var SiteID = "3";
var BrowserID = "6ca1d6db-2700-4471-a9cf-636d63c7bbf4";
var SessionID = "857c88eb-9cba-40ca-96ed-616160e09e73";
var SurveyRequestID = "378";


document.writeln("<DIV STYLE=\"position: absolute; top: 0px; left: 0px; visibility: hidden\"><IMG SRC=\"Images/Spacer.gif\" ID=CommandImage NAME=CommandImage></DIV>");
CommandImage = document.CommandImage;

function SendRequest(responsecode)
{
CommandImage.src = "prechatmonitor.smgif?u=" + GetUniqueID() + "&accountID=" + AccountID + "&siteID=" + SiteID +
"&browserID=" + BrowserID + "&sessionID=" + SessionID + "&surveyRequestID=" + SurveyRequestID;
}

function GetUniqueID()
{
return UniqueID++;
}

function Process()
{
SendRequest();
setTimeout("Process();", ImageCheckFrequency);
}

function startup()
{
setTimeout("Process();", ImageCheckFrequency);
}
startup();
2. I also find out that autoDestroy do working. With IE Dev Toolbar, the DOM of the window did removed, and after some time, the JS engine doing garbage collect removing the window.

The question is:
1. why after I close the window and the DOM not exist anymore, the JS code in PreChatSurvey.aspx, keeps executing until the JS engine do garbage collect, and after that browser throwing "Permission denied"? Could you point me out what is wrong?
2. addtional question, how I center the MIF within Ext.window? (please see the attachment, at the right there is black area)

Thanks in advance,
Johan

[hendricd]

The question is:
1. why after I close the window and the DOM not exist anymore, the JS code in PreChatSurvey.aspx, keeps executing until the JS engine do garbage collect, and after that browser throwing "Permission denied"? Could you point me out what is wrong?

The timers (setTimeout) are still running on that frame context -- they are never stopped by the embedded page. The page you are loading was written under the premise that it would live in a popup browser window, whose JS context would disappear when closed (all the timers die then no problem). Placing it in an IFRAME changes the rules.


2. addtional question, how I center the MIF within Ext.window? (please see the attachment, at the right there is black area)

Remember, Ext.Windows have layouts (fit), so the iframe is going to size to 100% of your Window body. Your content doesn't know that (care) and would need to size itself accordingly. That page was again designed for a popup browser window with fixed height and width to match the content. You'd need to do the same with your Ext.Window. Just tweek the height and width.

Doesn't LiveSupport have a template usage for use within Iframes?

If you were loading the page from your domain, I'd do away with an IFRAME altogether. It could behave a whole lot better using standard Ext goods.

[jexxi]

@hendricd,


The timers (setTimeout) are still running on that frame context -- they are never stopped by the embedded page. The page you are loading was written under the premise that it would live in a popup browser window, whose JS context would disappear when closed (all the timers die then no problem). Placing it in an IFRAME changes the rules.

Remember, Ext.Windows have layouts (fit), so the iframe is going to size to 100% of your Window body. Your content doesn't know that (care) and would need to size itself accordingly. That page was again designed for a popup browser window with fixed height and width to match the content. You'd need to do the same with your Ext.Window. Just tweek the height and width.
So I guess, I'll stick on using regular popup browser window then.


Doesn't LiveSupport have a template usage for use within Iframes?Unfortunately they don't give much choice about it.

Ok, thanks for your advice.
Johan

[vizcano]

I've use ManageIframe as shown:



new Ext.TabPanel({
region:'center',
contentEl: 'center',
width: 200,
minSize: 175,
maxSize: 400,
deferredRender:false,
margins:'5 5 5 0',
activeTab:0,
items:[{
//se muestran la tabla
contentEl:'center1',
title: 'Datos',
closable:false,
iconCls: 'datos',
autoScroll:true
},{
//Se muestra el mapa
contentEl:'center2',
iconCls: 'mapa',
xtype:'iframepanel',
title: 'Mapa',
autoScroll:true,
id:'mapa1',
fitToParent:true,
name:'mapa1',
defaultSrc:'http://www.google.com'
}]


It's working OK, everything is in the correct place but when I look at firebug the iframe created is <"iframe id="ext-gen40" class="x-managed-iframe" width="100%" height="100%" frameborder="0" name="ext-gen40" style="overflow: auto; display: block;">"

My question is why it does not respect the name and id i'm giving to the iframe and puts id="ext-gen40" and name="ext-gen40"? Is there any way to change this? I'd like to be able to change the iframe's name because I've got a form whose target is the iframe.

Thanks :)

[hendricd]

I merged this post back into this forum thread for clarity.



,{
//Se muestra el mapa
contentEl:'center2',
iconCls: 'mapa',
xtype:'iframepanel',
title: 'Mapa',
autoScroll:true, //iframes have their own scroll bars (overflow: auto)
id:'mapa1',
fitToParent:true, //ignored in a layout
frameConfig : { id:'mapa1' , name: 'mapa1' } , // name == id in this case, but can be diff
defaultSrc:'http://www.google.com'
}]

[vizcano]

I've put that code in my file but it does not work, i'm still having diferent names...

<iframe id="ext-gen40" class="x-managed-iframe" width="100%" height="100%" frameborder="0" name="ext-gen40" style="overflow: auto; display: block;" src="http://www.google.com">

[hendricd]

Bah (too many config options), try:



frameConfig : { autoCreate:{id:'mapa1' , name: 'mapa1' }}

[kaki]

Nice work!!! thank you!

[nkohari]

The event problem that I posted earlier ended up being a bonehead mistake on my part. I was calling load() on the ManagedIframePanel, and passing loadScripts:true instead of scripts:true to the config. Once I realized the mistake, the events started firing and life was good again. In the future I'll remember to look at the contents of the frame including the dynamically-generated content, to see if the <script> tags have been stripped. :)

I've run into another problem though, which may be as simple as the first. My software works fine in Firefox, but when I try to load it in IE7, the inline contents of the <script> tags within the ManagedIFrame load fine, but any <script> tags that have a src attribute do not. For example:



<script type="text/javascript" src="/content/js/ext/ext-base.js"></script>
<script type="text/javascript" src="/content/js/ext/ext-all-debug.js"></script>
Ext.onReady(function () {
//...
});
</script>


When it hits the Ext.onReady() call, it fails, saying "Ext is not defined". I'm not sure if this has something to do with the "deferred loading" stuff for IE. I also don't know if this is directly a problem with MIF or if it's an Ext issue.

If you have any ideas I'd appreciate it! Thanks.

[hendricd]

This occurs because, on IE, an Iframe without a document loaded via the src property, has no <base> site reference. You'll need to use absolute URLs in "script src" and link (style) references when using MIF.update methods.

[nkohari]

Thanks for the quick reply. It doesn't seem to work even with absolute paths. I've tried using both absolute URLs and adding a <base href="http://mysite.com/"/> to the header. Is there anything else I'm missing?

[hendricd]

How are you loading the iframe. Can you post your config ?

[mykes]

If you have a menu on the page with a Managed IFrame, and open the menu then click on the iframe, the menu doesn't collapse/hide like it should. If you open the menu and click on anything but the menu and the iframe, the menu hides.

There's probably all sorts of related issues with other Ext elements...

Regards, and thanks for this extension - it rocks :)

[gelleneu]

Hello,

I have a project, a little cms, with your ManagedIframe. In this IFrame, the website will be loaded. I also can successfully run the Ext library with execScript.

Now I want to replace some divs (the dynamic elements) with Ext.panels oder Ext.Containers, so that I can handle them more flexible and with Ext functionality.
For example I want to change their position by drag and drop, or want to show a context menu on right clicking and so on...

My question is, is someone here, who has a similiar problem, or a solution? What should I do,
whats the best way?

[hendricd]

If you have a menu on the page with a Managed IFrame, and open the menu then click on the iframe, the menu doesn't collapse/hide like it should. If you open the menu and click on anything but the menu and the iframe, the menu hides.


@mykes -- this happens because the Iframe has a separate DOM (thus sep event listener base) than the main page. There are no click/blur/focus events registered in the frame that bubble up to the parent page.

Luckily the solution is simple. MIF/P 1.04+ has a transparent dragMask that you can use to solve that problem. Before your menu is displayed, activate the mask on all MIFs at once. Add these listeners to your menu:



listeners:{
beforeshow : Ext.ux.ManagedIFrame.Manager.showDragMask,
beforehide : Ext.ux.ManagedIFrame.Manager.hideDragMask,
scope : Ext.ux.ManagedIFrame.Manager
},
Then when (any) frames' transparent mask (now owned by the parent document) is clicked, it bubbles to your menu....

EDIT: I'm not real happy with the how dragMasking turns out on IE, so I've come up with a better way. Posting 1.05 shortly. ;)

[buenavida]

Hi Hendrik,

My situation is that I need to use notation parent.frames["frameId"] after having the frames created by ManagedIFramePanel.

I have modified slightly your miframe.js locally for my personal use so that above notation can be issued and it does work in FireFox.

The slight modification I made is to the afterRender of your code as follows:


afterRender : function(container){


//console.log("........ in afterRender, this = ", this);

//console.log("........ in afterRender , frames[0] ", frames[0]);

// HERE IS MY CHANGE - bv change - so that frames[this.name] can be used
this.iframe.dom.contentWindow.name = this.name.trim();

alert("this.iframe.dom.contentWindow.name = " + this.iframe.dom.contentWindow.name);

//console.log("........ in afterRender , frames[0] ", frames[0]);

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);
}
}



The problem is in IE6, this does not seem to work.

Is there a way to get it to work for IE6 and above?

I have been working on and off on this problem for sometime now without success. So I guess it is time to ask the expert.

Hope you can assist.

Thanks Hendrik.

REgards
Marty

[hendricd]

@buenavida - MIF provides a safe way to get the window object of the frame (x-browser):

MIF.getWindow()
MIF.getDocument()

or
MIFP.getFrameWindow()
MIFP.getFrameDocument()

If this is a "same-domain" frame, why not just give it the instance of MIF or the frame it manages, when rendered:


MIFP.on('render' : function( MIFP){
var id = MIFP.getFrame().id,
var name = MIFP.getFrame().dom.name; //usually the same

MIFP.getFrameWindow().parentMIFrame = MIFP.getFrame(); // or .dom for the IFRAME Element itself
});Then your frame can talk to the MIF instance directly.

EDIT: Release 1.05+ (posting shortly) will also allow this:



var MIM = parent.Ext.ux.ManagedIFrame.Manager;
var hostMIF = MIM.getFrameByName('somename'); or
var hostMIF = MIM.getFrameById('someid');

[hendricd]

I also can successfully run the Ext library with execScript. Thats great news =D>



Now I want to replace some divs (the dynamic elements) with Ext.panels oder Ext.Containers, so that I can handle them more flexible and with Ext functionality.
For example I want to change their position by drag and drop, or want to show a context menu on right clicking and so on...

My question is, is someone here, who has a similiar problem, or a solution? What should I do,
whats the best way?Now that you've got Ext loaded in the Frame, place your head in there for minute. What you need next (now that the DOM is ready in there) is a script to run to get things moving.

You didn't elaborate on your content in the frame at startup, but you either:
a) loaded a very basic page in there, or
b) generated everything from scratch
..and then injected Ext into.

So just send over the next script (execScript or loadFunction) to run from the parent, or make an Ajax request for next script within the frame (Ext.Ajax.request?) . Your choice, really.

[hendricd]

Important, review thoroughly.

This release adds/amends the following:

Add:
- New hideMode config option: 'nosize' (augments existing Panel Component modes: display, visibility. MIFP hideMode class default is now 'nosize' for all browsers except IE. This hideMode was introduced to replace the default 'x-hide-display' style behavior (display:none) when hiding/showing MIFPanels. The CSS rule 'x-hide-nosize' is auto-created and designed to set an Elements' width and height to 0px without refreshing the frame during a DOM reflow.

Ext.Element was enhanced (when miframe.js is present) to support a third visibility option:

mode can be:
: 1 (visibility:hidden)
: 2 (display:none), or now
: className

example:

someEl.setVisibilityMode( 'x-hide-nosize' );
someEl.hide();
Now when hidden, the classname (set with Element.setVisibilityMode) is added to Element and removed using the Element.show method.

Important: Animation effects are NOT compatible with this visibility mode, as the anim library moves the Element around in the DOM during animation.

This now means that you can remove all the "position:absolute, hideMode:visibility" workarounds required in the past from your existing MIFPanels. The class now manages that for you.

iframe shimming.
MIFP now uses a new shimming method (used primarily to permit fluid drag operations over the frame). An 'img' is now used as the shim mechanism, which means you may also use that tag to display a unique image during a shim operation (defaults to Ext.BLANK_IMAGE_URL). To shim all ManagedIframes prior to a drag operation:

Ext.ux.ManagedIFrame.Manager.showDragMask();..and on the 'drop':
Ext.ux.ManagedIFrame.Manager.hideDragMask();An MIFPanels' shim can selectively enabled as well using the MIFP.toggleShim method. Application of shims still occur automatically during border layout resize operations.
See the updated demoPack.zip for examples of how to activate the feature for use with drop-down menus over an MIFPanel.

Same-domain frames, now get a reference to the MIF instance that manages the frame. When the frame is loaded/updated, window.hostMIF contains the MIF reference. Scripts within the embedded frame can then drive the MIF instance from within:


hostMIF.setSrc('http://somewhereelse.com');
Also, embedded pages can find the host page reference to any MIF by query:


var someMIF = parent.Ext.ux.ManagedIFrame.Manager.getFrameByName('someName');
or: getFrameById('someId')

[mykes]

@mykes -- this happens because the Iframe has a separate DOM (thus sep event listener base) than the main page. There are no click/blur/focus events registered in the frame that bubble up to the parent page.

Luckily the solution is simple. MIF/P 1.04+ has a transparent dragMask that you can use to solve that problem. Before your menu is displayed, activate the mask on all MIFs at once. Add these listeners to your menu:



listeners:{
beforeshow : Ext.ux.ManagedIFrame.Manager.showDragMask,
beforehide : Ext.ux.ManagedIFrame.Manager.hideDragMask,
scope : Ext.ux.ManagedIFrame.Manager
},
Then when (any) frames' transparent mask (now owned by the parent document) is clicked, it bubbles to your menu....

EDIT: I'm not real happy with the how dragMasking turns out on IE, so I've come up with a better way. Posting 1.05 shortly. ;)

I am seeing this inside my managed iframes:



<script type="text/javascript">
(function(){
var MSIE/*@cc_on=1@*/;
parent.Ext.get('ext-gen10')._windowContext=MSIE?this:{eval:function(s){return eval(s);}}
})();
</script>
I haven't looked at the depths of the managed iframe logic, but I assumed this was something you did. Why not add the logic to bubble up the focus/blur events?

In my case, the content of the iframes is not cross domain, so there's no issue with running additional javascripts.

Perhaps an additional config option to tell iframe it can add javascript to the frame to manage these needed events automatically?

[hendricd]

@mykes -- That sounds good on the surface, but it leaves 'foreign-domain' frames (banners, etc) in the dark. It would also require an entire event Management subsystem for the frame document (as there is no guarantee the page wont stomp on the events defined by MIF).

If you'd like to do that for your frames, have a look at the loadFunction or execScript methods and set a relevant listener that works for your configuration.

The shim (improved upon with 1.05) approach I outlined covers all contigencies.

[buenavida]

Hi Hendrick,

The reason why I persisted on parent.frames["some_known_frame_name"], is because I am trying to do data exchange with sites of different domain. I wish live could be simpler, however, It is a requirement that I need to pass some data from one domain (parent ) to another site that is of different domain (hosted frame with known name "some_known_frame_name").

Anyway I will take a look at your advice if i can use your advice. I don't think it will work because of same domain policy enforced by the browsers.

Best Regards
Marty

[mbogdanovich]

Hello,

I have managed iframes in a portal system. Is there a way to have any portal open a new tab in the center panel, if any OnClick on a portal occurs?

Thanks,

[hendricd]

@mbogdanovich, mykes --

See the new 1.1 release for support for frame window: blur, focus, and unload events.

On that release (http://extjs.com/forum/showthread.php?t=32310), you can now listen to the embedded document without loading Ext into it (same-domain frames only):



{
title:'Frame A'
,id:'frame_a'
,xtype:'iframepanel'
, defaultSrc:'localDoc.html'
,listeners:{
blur :function(frame,e){ Ext.log('frame blur'); },
focus :function(frame,e){ Ext.log('frame focus'); },
domready :function(frame){
if(frame.domWritable()){
frame.getDoc().on('click', frameClickHandler ) ;
}
}
}
}.....

[mykes]

@mbogdanovich, mykes --

See the new 1.1 release for support for frame window: blur, focus, and unload events.

On that release (http://extjs.com/forum/showthread.php?t=32310), you can now listen to the embedded document without loading Ext into it (same-domain frames only):



{
title:'Frame A'
,id:'frame_a'
,xtype:'iframepanel'
, defaultSrc:'localDoc.html'
,listeners:{
blur :function(frame,e){ Ext.log('frame blur'); },
focus :function(frame,e){ Ext.log('frame focus'); },
domready :function(frame){
if(frame.domWritable()){
frame.getDoc().on('click', frameClickHandler ) ;
}
}
}
}.....



OUTSTANDING!

Thank you ever so much.

[svdb]

Hi Hendricd,

I've searched somewhat the forum for sizing issues regarding the MIF on IE, and the only messages I found were the ones by jexxi.

http://extjs.com/forum/showthread.php?p=137707#post137707

I agree with your reply to jexxi in the case of simple layouts.

For (very) complex layouts however, confg objects can't always be used. And a MIF can't always be used as is. Sometimes there is need to wrap it in another panel.

So, my panels accept a variety of contents. Only in some cases a MIF is used. This is not just my design descision, this was a requirement because for some strange reason some of our customers don't support iframes in their apps. :/

The following is a panel's init code which either embeds a MIF or other content. It works very well actually, both on FF2 and IE6, except for the size issue on IE just like mentioned by jexxi.



,initComponent : function() {
xyz.UiPart.superclass.initComponent.call(this);
if (!this.contentEl && this.defaultSrc) {
this.mif = new Ext.ux.ManagedIframePanel({defaultSrc:this.defaultSrc,
listeners:this.initialConfig.listeners});
//...more mif eventing inits here, but removed for clarity of sample.
this.add(this.mif);
} else if (...) {
//...other content inits, but removed for clarity of sample.
}
}
If I instanciate a simple panel, it does indeed fit the parent panel very well, both on IE6 and FF2.



this.add(new Ext.Panel({bodyStyle:'background-color:green'}));
Now I know of course that MIF is a panel and the iframe is embeded in it.
So I expected it to resize to fit its parent by default just like a regular panel does.

I could always add more dom listeners and force reset the iframe's height to work around this small issue, but I'd prefer not having to hack anything.

[hendricd]

Try it something like this:



,initComponent : function() {
xyz.UiPart.superclass.initComponent.call(this);
if (!this.contentEl && this.defaultSrc) {
this.items || (this.items = []);
this.layout = 'fit';
this.items.push( (this.MIF = new Ext.ux.ManagedIframePanel({defaultSrc:this.defaultSrc,
listeners:this.initialConfig.listeners}))
);
//...more mif eventing inits here, but removed for clarity of sample.

} else if (...) {
//...other content inits, but removed for clarity of sample.
}
}

[svdb]

My bad (again), IE cache wasn't picking up my changes for layout='fit', doh!
And I hadn't see there was a v1.1.
Man, this is the fastest evolving component if ever seen! :)
Thanks Mucho!

[johncarlson21]

I've got a Managed I frame that resides in a window, and I was reusing the window by just hiding it and then reloading the frame with the new content.

It works great to my amazement but the problem I am having is that I need scrollbars for my frame because it is long, but if I move the window, or hide it and then reopen the window I loose my scrollbars.

I have changed it so that it actually recreates the window now everytime and closes/destroys the window.. but the same thing happens I loose my scrollbars.

her is my code.


function displayFormWindow(eid){
PropCreateWindow= new Ext.Window({
//id: 'PropCreateWindow',
title: 'Creating New Listing',
//autoWidth: true,
width:500,
height: 500,
plain:true,
autoScroll: false,
scrollable: false,
hideMode: 'visibility',
maximizable : true,
layout: 'fit',
animCollapse: false,
constrain: true,
//closeAction: 'hide',
html: '<iframe id="list-win" width="100%" height="100%" frameborder="no" border="0"></iframe>'
});

PropCreateWindow.show();
if(validateNumeric(eid)){
edit='&editID=' + eid
var MIF = new Ext.ux.ManagedIFrame('list-win',{loadMask: true, hideMode:'visibility', src:'index.php?a=92' + edit});
}else{
var MIF = new Ext.ux.ManagedIFrame('list-win',{loadMask: true, hideMode:'visibility', src:'index.php?a=92'});
}
}



any help would be greatly appreciated.
John

[hendricd]

@johncarlson21 -- Use the 1.1 version (in my sig below), and use MIFPanel instead:



PropCreateWindow= new Ext.Window({
id: 'PropCreateWindow',
title: 'Creating New Listing',
width:500,
height: 500,
plain:true,
autoScroll: false,
scrollable: false,
maximizable : true,
layout: 'fit',
animCollapse: false,
constrain: true,
closeAction: 'hide',
items: {xtype:'iframepanel, defaultSrc:'???', loadMask:true }
});

[mankz]

@Henricd

The MIF/MIFP looks like really great work, though after I've read through most part of this thread I'm still not 100 % sure it could help me out.

I have a main page with a viewport containing an accordion (west) with hyperlinks which load all the site content in an iframe (in the center region). Since I load ext-all.js on each content page as well as in the main page, I feel this is not the optimal web design for a site. The scripts will be cached sure, but it's still quite an expensive startup for every content page.

Could I use your MIF to access the Ext loaded in the (main) parent window? If I could, I wouldn't have to load Ext on all my content pages which would be very nice. But what will scope be if I, from a page in the MIF call :


var grid = new parent.Ext.grid.GridPanel({
store: store,
...
});

grid.render('gridCt');

and my gridCt element is located in the iFrame page, will that work?

A little confused right now... :)

[hendricd]

@mankz -- Confusing issues indeed. Have you studied this (http://extjs.com/forum/showthread.php?p=120384#post120384) post thoroughly?

If you're gathering Component class definitions from the parent, that would likely work, but you'd still need the Ext library 'basics' applied to the frame.

That post outlines what's necessary to accomplish that by caching Ext (js and stylesheets) in the main page and applying them to new/existing frames as needed.

[mankz]

I looked at it now, failed to get the demo running (on Ext 2.1) after following the 3 steps, I get this from Firebug:


module.trim is not a function

(?)(["adviframe"])ext-basex.js (line 775)
apply([["adviframe"]], function(), Object)ext-base.js (line 9)
load()ext-basex.js (line 802)
apply()ext-base.js (line 9)
(?)()adviframes.html (line 57)
Observable()ext-all.js (line 12)
EventManager()ext-all.js (line 13)
getViewWidth(load )ext-base.js (line 10)
[Break on this error] var moduleName = module.trim().split('\/').pop().toLowerCase()
ext-basex.js (line 775)
>>> module
Any clues?

[hendricd]

Sorry about that, MIF/P are not yet available for 2.1. There will be new releases coming out soon.

[mankz]

No worries :) I'll give it a go on 2.0.2 tomorrow!

Cheers and keep up the great work!

/Mats

[hasan]

I have used this source

http://extjs.com/forum/images/attach/zip.gif miframe1_05.zip (http://extjs.com/forum/attachment.php?attachmentid=6054&d=1207917208) (19.2 KB, 253 views)
http://extjs.com/forum/images/attach/zip.gif demoPack.zip (http://extjs.com/forum/attachment.php?attachmentid=6055&d=1207917227) (44.2 KB, 194 views)But i have got an error message when use this source with firebug

"el.parent is not a function"
el._maskEl = el.parent('.x-managed-iframe-mask')||el.parent().addClass('x-ma...

i hope somebody help me :D ..

[hendricd]

@hasan -- Please post your sample code to look at (in [code/] tags) . Let's start there. ;)

[hasan]

Thanks for your reply :D Hendricd

i think .. i have got this source from you





<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Advanced ManagedIframePanel</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

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

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

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css" />

<style type="text/css">
.msg .x-box-mc {font-size:14px;}
#demo-balloon-div {position:absolute;left:35%;top:10px;width:200px;z-index:20000;}
#background {margin:5px;}
.list {list-style:square;width:500px;padding-left:26px;}
.list li{padding:2px;font-size:8pt;}
pre { font-size:11px;}

</style>
<script type="text/javascript" >
//Permit Local file access for IE.
Ext.lib.Ajax.forceActiveX = (document.location.protocol == 'file:');

//Set to a friendlier version for Iframes
Ext.SSL_SECURE_URL= 'javascript:void(0)';

Ext.Loader = new Ext.ux.ModuleManager({disableCaching:true});
Ext.Loader.on({
'beforeload':function(manager, module, response){

//return false to prevent the script from being executed.
return module.extension == 'js';

},
'loadexception':function(manager, module, ex){

alert('Failed to Load Module '+module.fullName+' Error: ' +
(ex.error?ex.error.description||ex.error.message:ex));
}

});

Ext.require = Ext.Loader.load.createDelegate(Ext.Loader);

Ext.onReady(function(){

Ext.require('miframe', 'adviframe'); //now load MIFP and our demo script

});

</script>

</head>
<body>
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->

<div id="header">
<h1>Advanced ManagedIframePanel 1.05 Demo</h1>
</div>
<div id="background" class="x-hidden">
<p>This example demonstrates some of the more advanced features of ux.ManagedIFrame[Panel].</p>
<h3>Primary Demonstration Goals:</h3>
<p>Load one or more iframe documents (with/without existing embedded script,style, or link tags) and apply the entire Ext framework to those documents,
only retrieving the necessary script, and CSS sources file <b>once</b>, via the parent document.</p>
<p>To accomplish this, one <b>important</b> modification to the Ext core library is required:
<ul class="list"><li>A change to Ext.EventManager's <b>onDocumentReady</b> feature (specifically for IE) is included in this distribution. (Note: For IE, the deferred Script tag is no longer used as a 'domReady' detection mechanism, as this destroys a frame's document when Ext is injected into it.), and has been replaced with the now-popular (YUI,jQuery,mooTools) node.doScroll('left') check.</li>
<li>The use of <a href="http://extjs.com/forum/showthread.php?p=102679#post102679" target="_ext">ext-basex.js</a>. This is required for synchronous Ajax support, and provides...</li>
<li>An Ajax-style resource-module that could retrieve any resource (.js, .css, or other resources in this case) and manage
their successful retrieval/eval/storage. <b>ux.ModuleManager</b> provides these services and is now built into the ext-basex module since it requires synchronous
Ajax support and is included in this example distribution. (Examine the source of this page. The demo uses ux.ModuleManager to load this demo script.</li>
</ul>

<h2>Some possible benefits</h2>
<ul class="list">
<li>Existing legacy forms may now be loaded into Iframes without modification and 'Ext'ized as necessary as they are migrated to the full framework over time.</li>
<li>Multiple Ext.onReady(or not) code blocks are now supported and can can be dynamically loaded at any time (both in Iframes and in parent/main pages).
<li>Coupling ux.ModuleManager with custom Ext builds, you can now use syntax like :<br />
<p><pre>
Ext.require('layouts','custom/grid');
or
MyApp.needs('dragdrop','charts');
</pre> <br />and the resources are loaded on demand(if not already available) to significantly reduce initial page-load times.</li>
</ul>
<h2>Demonstration Notes</h2>
<ul class="list">
<li>In the 'Transformation' examples, ux.ModuleManager loads/caches the necessary stylesheets and other script files (once) from the neighboring <b>/examples/tabs</b> path for transforming the basic tabs example page (note that most/all of the script and style tags have been removed).</li>
<li>The demo page may not <b>NOT LOOK EXACTLY THE SAME</b> as the original /examples/tabs page because of the attempt to adjust the relative CSS urls of ext-all.css. (in fact the 'via UpdateManager' example on Gecko will look strange because a frame not-loaded from a server has no site root to resolve relative CSS urls).</li>
<li>With the help of <a href="http://extjs.com/forum/showthread.php?p=102679#post102679" target="_ext">ext-basex.js</a>, this example can be run without an HTTP server hosting it.</li>
</ul>

<h2>Source Files</h2>
<p>The demonstration source file <a href="adviframe.js" target="_srcview">adviframe.js</a></p>
<p>The injected transformation script: <a href="transform.js" target="_srcview">transform.js</a></p>
<p>Revised EventManager.js source is viewable here: <a href="EventManager.js" target="_srcview">EventManager.js</a></p>
</div>
</body>
</html>





Actually.. I want to make GIS aplication using Extjs and MapGuide 6.5. But i have got problem while i want to make event over MapGuide 6.5. So i try to use ManagedIframePanel :).
I think u have more experience with ExtJs..So would you like to help me :D ???

[hendricd]

@hasan -- the adviframes demo is likely not a good candidate for you to copy/paste from. It does things you'll likely not need to use.

Start with a simple MIFPanel and go from there.

And, no, I'm not familiar with MapGuide.

I would also use the 1.1 version (http://extjs.com/forum/showthread.php?t=32310), this 1.0x baseline is closed.

[hasan]

I have also tried to make simple iframe .. I have tried this source with your miframe.js.. And it also make a same error message.. whereas I have changed the content ext-all.js with the content in EventManager-min.js like what you said




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


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

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


<script type="text/javascript">
Ext.onReady(function(){
var panel = new Ext.ContentPanel(new Ext.ux.ManagedIFrame( {autoCreate :{src:'http://www.extjs.com',height:350,width:'100%'}})
,{title: 'Location', fitToFrame:true});
panel.el.update('<b>This Map has Expired</b>');
});


</script>


<style type="text/css">
.x-panel-body p {
margin:10px;
}
#container {
padding:10px;
}
</style>

</head>
<body>

<h1>Ext.Panel</h1>
<p>The js is not minified so it is readable. See sd panels.js.</p>


</body>
</html>




Hmm.. would you like to give simple iframe source code?? :):)

[hendricd]

For Ext 2.0+:


<script type="text/javascript">
Ext.onReady(function(){
var panel = new Ext.ux.ManagedIframePanel({
renderTo : Ext.getBody()
,height :350
,width : 400
,title : 'Ext'
,defaultSrc : 'http://www.extjs.com'
});
});

</script>The Wiki has several more examples.

[hasan]

I type your source like this



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Frame Page</title>
<link href="lib/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="lib/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/ext-all.js"></script>
<script type="text/javascript" src="Script/miframe.js"></script>

<script type="text/javascript">

Ext.onReady(function(){
var panel = new Ext.ux.ManagedIframePanel({
renderTo : Ext.getBody()
,height :350
,width : 400
,title : 'Ext'
,defaultSrc : 'http://www.extjs.com'
});
});

</script>


</head>
<body>

</body>
</html>



But it made same error message when i use firebug
el.parent is not function
I'm using miframe.js to recognize Ext.ux.ManagedIframePanel..

[hendricd]

@hasab - if the demopack works, you may not be loading the Ext library properly

What version of Ext are you using?

[hasan]

i'm using Ext 2.0 ..

[wekkaw]

For Ext 2.0+:


<script type="text/javascript">
Ext.onReady(function(){
var panel = new Ext.ux.ManagedIframePanel({
renderTo : Ext.getBody()
,height :350
,width : 400
,title : 'Ext'
,defaultSrc : 'http://www.extjs.com' });
});

</script>The Wiki has several more examples.

I've a function that returns a DataView object, is there anyway I can update the above panel body with the Dataview object returned? Something like this:


function getDataViewObj(){
var myItems = new Ext.DataView({
....................
....................
...................
...................
})
return myItems;
}


var panel = new Ext.ux.ManagedIframePanel({
renderTo : Ext.getBody()
,height :350
,width : 400
,title : 'Ext'
,defaultSrc : getDataViewObj()
});
});

Any help is greatly appreciated.

[hendricd]

Yes, the defaultSrc and MIF.setSrc both accept functions (that return a URL) as arguments

permitting:



,defaultSrc: getDataViewObjor
MIF.setSrc(getDataViewObj );

[wekkaw]

Yes, the defaultSrc and MIF.setSrc both accept functions (that return a URL) as arguments

permitting:



,defaultSrc: getDataViewObjor
MIF.setSrc(getDataViewObj );

hendricd thanks for the quick response.

My function does not return a URL but a DataView object with structured data in it. Is there an attribute/method beside "defaultSrc" / "setSource()" I can use to update the content of the panel?

If I were doing this on the Ext.Panel I would have used this:

items:getDataViewObj()

[hendricd]

@wekkaw -- Sorry, now I see what you are doing. In order to render a Dataview into the iframe you must load all of the Ext framework into the frame as well. You have to treat it as another browser context.

If you have Ext loaded in the frame, you could however, (from the embedded page):



var c= Ext.getCmp('viewPort');
c.add( parent.getDataViewObj() );
c.doLayout();

[wekkaw]

@wekkaw -- Sorry, now I see what you are doing. In order to render a Dataview into the iframe you must load all of the Ext framework into the frame as well. You have to treat it as another browser context.

If you have Ext loaded in the frame, you could however, (from the embedded page):



var c= Ext.getCmp('viewPort');
c.add( parent.getDataViewObj() );
c.doLayout();



hendricd, thank you so much! I'll go ahead and try that.

[jbird526]

Posted this in Premium but figured you are the man when it comes to this topic.
I'm not really sure where the problem is in the code yet so I'm not posting it at the moment. I am using Doug Hendricks ManagedIframe that has content loaded into it from a ColumnTree. When I have a URL in the ManagedIframe it is opening a new window instead of targeting the Iframe. One note of interest is that i am using Ext.Template to generate the styling of the Iframe. Just wondering if anyone has experienced this issue. Will follow up with code, just need to narrow down the areas of interest from the 1000 or so lines of javascript.

[hendricd]

You're right. Can't tell much without a few code frags. Try to limit it to your tree selection model handler, the template and your MIF creation stuff. That should be enough to rip it apart. ;)

[jbird526]

// create the template for displaying a note
noteTemplate = new Ext.Template
(

'<div class="note-data">',
'<span class="note-date">{date}</span>',
'<span class="note-title">{title}</span>',
'<div class="note-author">by {author}</div',
'</div>',
'<div class="note-body">{body}</div>'
).compile();


/**
* this function receives the result for a shownote action
*/
function showNote(response, options)
{
// mark this note has being read
if (this.unread)
markNoteRead(this.baseID.substring(4), this.noteID);

// get the actual iframe object so we can update it
var noteFrame = this.viewer.getFrame();

// turn the returned data into JSON objects and update the note display
var noteObject = Ext.decode(response.responseText);
noteFrame.update(noteTemplate.apply(noteObject), false, Ext.emptyFn);

// make sure our frame has the style sheets
// (forEach comes from basex--neat helper function)
forEach(ModuleManager.modules, function(module, name)
{
// all css is injected into the iframe's head section, ignore anything else
if(module.extension == 'css')
{
ModuleManager.applyStyle(module, null, noteFrame.getWindow());
}
}, this); // end forEach

// clear the mask
this.viewer.getEl().unmask();

// now update the navigation buttons
updateButtons(this.baseID, this.noteID, noteObject.rootId, noteObject.tychoActions);
}


// define the note viewer panel -- it is a simple panel
{
xtype: 'iframepanel',
id:'preview-' + id,
hidden: false,
region:'south',
height: initialViewerHeight,
title:'Note Viewer',
autoScroll: true,
animCollapse: false,
collapsible: true,
split:true
}

[hendricd]

@jbird526 --

When I have a URL in the ManagedIframe it is opening a new window instead of targeting the Iframe.I'm still not clear on what you're referring to there, but consider this change. You should wait until the frame document is written (async) fully by using the callback to inject your CSS Rules:



/**
* this function receives the result for a shownote action
*/
function showNote(response, options)
{
// mark this note has being read
if (this.unread)
markNoteRead(this.baseID.substring(4), this.noteID);

// get the actual iframe object so we can update it
var noteFrame = this.viewer.getFrame();

var wrapItUp = function(){
// make sure our frame has the style sheets
// (forEach comes from basex--neat helper function)
forEach(ModuleManager.modules, function(module, name)
{
// all css is injected into the iframe's head section, ignore anything else
if(module.extension == 'css')
{
ModuleManager.applyStyle(module, null, noteFrame.getWindow());
}
}, this); // end forEach

// clear the mask
this.viewer.getEl().unmask();
};

// turn the returned data into JSON objects and update the note display
var noteObject = Ext.decode(response.responseText);
noteFrame.update(noteTemplate.apply(noteObject), false, wrapItUp );


// now update the navigation buttons
updateButtons(this.baseID, this.noteID, noteObject.rootId, noteObject.tychoActions);
}

[harjono]

I downloaded the demoPack.zip (http://extjs.com/forum/attachment.php?attachmentid=4773&d=1203866132) and EventManager.zip (http://extjs.com/forum/attachment.php?attachmentid=4400&d=1202491442) files, and got WinZip error message that they are not valid archives. Can someone post a valid zip files. Thanks, -HH.

[hendricd]

Some people have had trouble with download on IE. Try Firefox and a newer flavor of Winzip (11.0).

[pokerking400]

I got a simple newbie question.

I need to load HTML with some fields and table into a Popup window.

How do i do that?. Does your ManagedIframe helps in that way.

It is static html from an external file. No javascript in that. Just part of body content.

It might be simple i think. Let me know.:)

[hendricd]

I got a simple newbie question.

I need to load HTML with some fields and table into a Popup window.

How do i do that?. Does your ManagedIframe helps in that way.

It is static html from an external file. No javascript in that. Just part of body content.

It might be simple i think. Let me know.:)

No, sorry. MIF is designed to control Inline Frames, not popup browser windows. The web is full of window.open examples.

[evelynloo]

It pop up this two error message : 'failed to load module mifram.js' and failed to load module adviframe.js Ext.ux.ManagedIFrame has no properties' ,
Did anyone know it?

[hendricd]

@evelynloo -- I would recommend you start out with the latest version 1.1 of ux.ManagedIframe located here (http://extjs.com/forum/showthread.php?t=32310). After you have downloaded the zip files extract them to the /examples/miframe folder under your Ext /examples folder.

Note the current demos are designed for Ext. 2.0.2 /examples directory structure.

[evelynloo]

Thanks a lot, i can run the example...

The function is something like i wanna save those data from formPanel or from EditroGridPanel before changing the iframe.


var configurationPage = new Ext.ux.ManagedIframePanel({
id : 'configurationPage',
el : 'configuration-page'
,region : 'center'
,margins : '0 5 5 0'
,layout : 'fit'
,border : false
,title : 'abc'
,loadMask : true
,defaultSrc : 'abc.jsp'
});

navigationTree.on('click', function(node, e) {
if (node.attributes.href) {
e.stopEvent();
Ext.getCmp('configurationPage').setSrc(node.attributes.href);
}
});


Is that possible to call a submit function from the abc.jsp or Ext.getCmp() from the abc.jsp before the setSrc() ?

Can i use Ext.getCmp() to get component which is in the iframe.

[hendricd]

Is that possible to call a submit function from the abc.jsp or Ext.getCmp() from the abc.jsp before the setSrc() ?
Can i use Ext.getCmp() to get component which is in the iframe.

Based on your example, you can access the full Ext namespace of the embedded frame, like this:



navigationTree.on('click', function(node, e) {
if (node.attributes.href) {
e.stopEvent();
var configPanel;
if(configPanel= Ext.getCmp('configurationPage')){
configPanel.getFrameWindow().Ext.getCmp('someComponent').form.submit();
configPanel.setSrc(node.attributes.href);
}
}
});

[evelynloo]

I can't submit anything with using this configPanel.getFrameWindow().Ext.getCmp('form').form.submit();

do you have any idea about this problem?

this is my formPanel.js which is in the abc.jsp


var sipContainerPanel = new Ext.FormPanel({
id : 'form',
autoScroll : true,
width : 650,
frame : false,
border : false,
bodyStyle : 'background:transparent;',
waitMsgTarget: true,
url : 'kernelAction?action=modify&type=sipContainer',
method : 'POST',

reader : new Ext.data.JsonReader({}, fieldProperty),
items : [{
xtype : 'panel',
title : 'SIP Container Configuration',
width : 550,
autoHeight : true,
style : 'margin-top:75px;margin-left:75px',
bodyStyle : 'background:transparent;padding:15px 20px 20px 20px',
items : [{
xtype : 'fieldset',
title : 'Configuration',
bodyStyle : 'background:transparent;',
// collapsible : true,
width : 500,
autoHeight : true,
labelWidth : 120, // label settings here cascade unless overridden
// layout : 'form',
items : [{
xtype : 'panel',
layout : 'column',
border : false,
items : [{
columnWidth : .5,
border : false,
layout : 'form',
items : [{
id : 'rportTrue',
xtype : 'radio',
fieldLabel : 'RPort',
name : 'rport',
boxLabel : 'true',
// checked : true,
inputValue : 'true'
}, {
id : 'receivedTrue',
xtype : 'radio',
fieldLabel : 'Received',
name : 'received',
boxLabel : 'true',
// checked : true,
inputValue : 'true'
}]
}, {
columnWidth : .5,
border : false,
layout : 'form',
items : [{
id : 'rportFalse',
xtype : 'radio',
fieldLabel : '',
labelSeparator : '',
name : 'rport',
boxLabel : 'false',
inputValue : 'false'
}, {
id : 'receivedFalse',
xtype : 'radio',
fieldLabel : '',
labelSeparator : '',
name : 'received',
boxLabel : 'false',
inputValue : 'false'
}]
}]
}, {
xtype : 'numberfield',
fieldLabel : 'MTU',
name : 'mtu',
// value : 25,
allowBlank : false,
width : 190
}, {
xtype : 'numberfield',
fieldLabel : 'T1',
name : 't1',
// value : 25,
allowBlank : false,
width : 190
}]
}]
}]
});


sipContainerPanel.render(document.body);

sipContainerPanel.form.load({
url : 'kernelAction?action=sipContainer',
method : 'POST',
waitMsg:"loading data..."
});

[hendricd]

@evelynloo -- Does this:


Ext.getCmp('configurationPage').getFrameWindow().Ext.getCmp('form')
return your form embedded in the frame?

[evelynloo]

It can get those formId, xtype's thing when using

Ext.getCmp('configurationPage').getFrameWindow().Ext.getCmp('form').getForm().formId

but it didn't do the submit action when using

Ext.getCmp('configurationPage').getFrameWindow().Ext.getCmp('form').form.submit()

i think the action above is same as this action which is in formPanel.js right?

sipContainerPanel.form.submit({
url : 'kernelAction?action=sipContainer',
method : 'POST'
});

[jfloveqq99]

hi,Hendricd.I think ManageIframe is good:)but I could not apprehend it, so I I have a problem:(.I want to creat a panel but renderTo in the iframe, how to design?
for example :
//this is a parent page,when the page onload run the js.

var panel;
var MIF ;
new Ext.Viewport({
layout:'border',
items:[
{
region:'west',
contentEl:'west',
width:400
},
{
region:'center',
contentEl:'center'
}
]
});

panel = new Ext.Panel(
{
height:80,
width:200,
html:"this this a panel",
title:"title"
});
MIF = new Ext.ux.ManagedIFrame('frame',{
src:'inner.html',
loadMask:{msg:'Loading Site...'}
});
<body>
<div id="west"></div>
<div id="'center'">
<iframe id="frame" class="x-panel-body" style="frameBorder:0;width:100%;height:100%;"></iframe>
</div>
</body>
//this is a inner.html

var innerPanel;
function doRender(){
innerPanel = top.panel;
//this is a wrong,but I don't know how to renderTo the indiv
innerPanel.render("indiv");
}
<body>
<div id="innorth">
<a href="#" onclick="doRender();">renderTo indiv</a></div>
<div id="indiv"></div>
</body>

if the top.panel is a ManageIframepanel, it could renderTo indiv???
tutor me ,thanks!!

[hendricd]

hi,Hendricd.I think ManageIframe is good:)but I could not apprehend it, so I I have a problem:(.I want to creat a panel but renderTo in the iframe, how to design?


@jfloveqq99 -- If you do not 'apprehend it', I would recommend you not use it yet. If you intend to render Ext components in an iframe, that page will require the full Ext library loaded in that page as well.

Iframes have many security (same-origin) restrictions imposed upon them. Until you are familiar with all those, stick with basic HTML Page isolation for Ext.

And ask yourself, "do I really need an Iframe to render an Ext.Panel into?" If so, please share why you think you do.

[jfloveqq99]

hi hendricd,thank for your help.
I design a system,the parent page include treemenu

[hendricd]

Study this:

//this is a parent page,when the page onload run the js.

var panelCfg = {
height:80,
width:200,
id: 'innerPanel',
html:"this this a panel",
title:"title"
};

new Ext.Viewport({
layout:'border',
items:[
{
region:'west',
contentEl:'west',
width:400
},
{
region:'center',
id: 'centerFrame',
xtype:'iframepanel',
defaultSrc:'inner.html',
loadMask:{msg:'Loading Site...'},
}
]
});

var MIFP = Ext.getCmp('centerFrame'); //for later reference


<body>
<div id="west"></div>
</body>//this is a inner.html


function doRender(){
new Ext.Panel( parent.panelCfg ).render("indiv");
}
<body>
<div id="innorth">
<a href="#" onclick="doRender();">renderTo indiv</a></div>
<div id="indiv"></div>
</body>

[hendricd]

@jfloveqq99 -- Make sure you are using the latest version 1.1 located here (http://extjs.com/forum/showthread.php?t=32310).

[jfloveqq99]

thanks!!:)
But construct panel in Iframe,but a config is in parent page, so I think it could enhance performance.
thank you~~~

[windywany]

It seems to be unable to work in FF3!who can tell me how to solve the problem!

[marco76]

I use MIframe and I would use some ext function inside the page that I load inside the iframe.
I see your post: "Load Ext once, and apply it to your frames (http://http://extjs.com/forum/showthread.php?p=120384#post120384)".
But I can't to understand what rows I must replace with EventManager-min.js.
Please can you explain this?
Many thanks

[hendricd]

@marco76 -- You'll have to edit your copy of ext-all.js file(keep it in the same directory as the sample) and replace(paste) the line indicated on that post with the minified version (EventManager-min.js) included.

Just use your text-editor to replace it and save it again.

[marco76]

Sorry but the lines indicated in the post are the initial lines of ext-all.js
But where I must stop to replacing or I must replacing all?

[hendricd]

Just the single highlighed (bold) line as indicated on this (http://extjs.com/forum/showthread.php?p=120384#post120384) post.

[w3bbuilder]

Hi all,

i really want to use this nice plugin but it seems that i can't find the right way to print an iframe content.

here is my code:



text:'Print preview',
handler:function(){
var win = new Ext.Window({
title:'Preview',
id:'previewWindow',
width:740,
height:480,
layout:'fit',
frame:true,
animCollapse:false,
defaultType:'iframepanel', items:{
title:'',
autoLoad:{
url:'user/previewBill/' + Math.random(),
method:'post',
params:{saferequest:true}
},
loadMask:true,
frameConfig:{id:'previewIframe'},
listeners:{
domready :function(frame){
//frame.print();
}
}
},
bbar :[{
text :'Print',
handler :printBill
}]
});

win.show();
}


and print function



function printBill(){ try{
Ext.getCmp('previewWindow').iframe.print();
}catch(ex){Ext.Msg.alert('Sorry','Print Failure!<br />'+ex);} }


Result on Print button push:
Ext.getCmp('previewWindow').iframe has no properties.

Any idea why it's not workin'?

[w3bbuilder]

The answer is:


function printBill(){
try{
Ext.get('previewIframe').print();
}catch(ex){Ext.Msg.alert('Sorry','Print Failure!<br />'+ex);}
}


but now i have another question: how do i serialize a form to this iframe?

i want to pass form posts to autoLoad :{}

[hendricd]

@w3bbuilder -- You should be using the 1.1 version, here (http://extjs.com/forum/showthread.php?t=40961)rather than this thread.

Posting to an iframe requires using standard form submit and not the Ext form protocol (JSON), and targeting the iframe by its name/id.