ux.ManagedIframePanel (1.05, 1.0 baseline closed)

[svdb]

Anyone already got a test page assembled I can use for testing?

Sure, it's in the attachement.
The problem apears only on FF (at least on my machine).

[dsorre]

henricd -

Your wicked fast with your responses... hard to keep up :)

Anyway I really appreciate you taking the time to helping me out. Your examples made sense and helped me out quite a bit to understanding how it works, but (there always is a but...) I think I perhaps have described what I'm trying to accomplish wrong :)

Let me give you a quick overview of what I have and want to do.

I have a collection of pages where I include necessary css and js files in the head. If I need a grid on a page I include my GridBuilder.js file which I call by passing some arguments to it and it then plops a grid on my page. One of the options for the grid is a flag that says if you click on a row pop up a window (details window basically). This create window function I've put into a seperate file (along the lines of Gridbuilder) called WindowBuilder.

So if the flag is set to true then when I click a row my createWindow function is called:


windowCreate : function(config){
//build source parameter string
var URLParam = "";
if(config.ParameterName && config.ParameterID){
URLParam = '?'+config.ParameterName+'='+config.ParameterID
}

var MIF = new Ext.ux.ManagedIFrame({autoCreate:{id:'dynamicIframe1',cls:'x-window-body',width:'100%',height:'100%',src:config.URL+URLParam}});

win = new Ext.Window({
title : (config.Title) ? config.Title:'New Window',
animateTarget : (config.Anim_Target) ? config.Anim_Target:null,
layout : (config.Layout) ? config.Layout:'fit',
id : (config.WinID) ? config.WinID:'window',
width : (config.width) ? config.Width:700,
height : (config.Height) ? config.Height:500,
closeAction : (config.CloseAction) ? config.CloseAction:'close',
minimizable : (config.minimizable) ? config.minimizable:false,
maximizable : (config.maximizable) ? config.maximizable:false,
plain : (config.plain) ? config.plain:true,
modal : (config.Modal) ? config.Modal:true,
shadow : (config.shadow) ? config.shadow:false,
constrain : (config.constrain) ? config.constrain:true,
body : MIF
});
win.show();

}
};

As you can see that's where I simply say that the body is a managed iframe. This works perfectly using your awesome extension. Let's say that in one of the windows I want to plop another grid, right now I'm simply including all my css and js files on that page again and then call my creategrid out of my gridbuilder, which works, but creates crazy overhead and load times.

Looking at your examples and your previous post I got it as far as to cache the scripts in my Windowbuilder space, but calling the transform function (on domready) didn't do anything or if called directly it said "unwritable".

I am still doing something wrong and I almost suspect it's my limited knowledge of the scope I'm using/declaring?

So basically currently I have page X
I include adapter, ext-all, gridbuilder, windowbuilder, and the css
then on my page I make a call to gridbuilder and set flag to create window (with iframe) on row click
when I call the createwindow I'd like to somehow tell it to use the already loaded or cached js files (css I really don't care so much, but would be nice).
At what point do I include the code from your example? When I create the window, right?

Thanks again for any advice you can spare :)

[hendricd]

@dsorre -


didn't do anything or if called directly it said "unwritable".
This exception means:
a) you're are trying to modify the document in the iframe from a domain different from that of your main page. This is not allowed by the browser, and is why the exception is raised.
b) domready is fired too soon
c) you are injecting code before domready

It would be simpler if you just posted your main page and some code showing what you've got so far.

[dsorre]

hendricd -

Thanks again for the quick response.

I reverted back to what I had before trying to get the cache sharing going, however I know it was not an error I received due to a).

I'll post what I have now that will hopefully help you understand what I'm doing and you might have an idea or suggestion on where to put the necessary code parts from your example.

This is basically my main page (I did strip it down to a minimum)


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<link rel="stylesheet" type="text/css" href="/CFIDE/scripts/ajax/ext2.0/resources/css/ext-all.css" />
<script type="text/javascript" src="/CFIDE/Scripts/ajax/ext2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/CFIDE/Scripts/ajax/ext2.0/ext-all.js"></script>
<!--- <script type='text/javascript' src='/Templates/AJAX/Ext2.0/Javascript/ext-basex.js'></script> --->
<script type='text/javascript' src='/Templates/AJAX/Ext2.0/Javascript/miframe-min.js'></script>
<script type='text/javascript' src='/Templates/AJAX/Ext2.0/Javascript/GridBuilder.js'></script>
<script type='text/javascript' src='/Templates/AJAX/Ext2.0/Javascript/WindowBuilder.js'></script>
</head>
<body>
<div id="PageWrapper">
<script language="Javascript">
Ext.onReady(function() {
var HttpProxy = myurl in here; <!--- Define HttpProxy Path --->
var ColumnModel=new Ext.grid.ColumnModel([{ <!--- Define Column Model --->
header: "Username",
dataIndex: 'username',
hidden: false,
align: 'left'
},{
header: "First Name",
dataIndex: 'firstname',
hidden: false,
align: 'left'
},{
header: "Last Name",
dataIndex: 'lastname',
hidden: false,
align: 'left'
},{
header: "Email",
dataIndex: 'email',
hidden: false,
align: 'left'
},{
header: "",
dataIndex: 'adminid',
hidden: true
}]);
var RecordDefinitions = Ext.data.Record.create([ <!--- Define Record Definitions --->
{name: 'username'},
{name: 'firstname'},
{name: 'lastname'},
{name: 'email'},
{name: 'adminid'}
]);
var DefaultSortColumn = 'lastname'; <!--- Set Default Sort Column --->
var DefaultSortDirection = 'asc'; <!--- Set Default Sort Direction --->
var PageSize = 10; <!--- Set Paging Size --->
var ElementID = 'AdminGrid'; <!--- Set Element ID of the div used for the grid --->

GridBuilder.gridCreate({ <!--- Build Grid --->
sc : sc,
HttpProxy : HttpProxy,
ColumnModel : ColumnModel,
RecordDefinitions : RecordDefinitions,
DefaultSortColumn : DefaultSortColumn,
DefaultSortDirection : DefaultSortDirection,
PageSize : PageSize,
ElementID : ElementID,
win : true,
winParam : 'adminid',
winURL : "my window url in here",
winTitle : "Admin Options"
}
);
});
</script>
<div id="AdminGrid"></div>
</div>
</body>

You will note that I actually have a script tag in the body, but that's due to the framework used where it includes that file.

Now this basically just does a call to my GridBuilder.js


GridBuilder = function(){
var globalPageSize=10;

return{
init : function(){

},

gridCreate : function(config){
//set the global pagesize
globalPageSize = config.PageSize;

//Create the data store
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: config.HttpProxy}),
reader: new Ext.data.JsonReader({
root: 'data',
totalProperty: 'recordcount'
},config.RecordDefinitions),
remoteSort: true
});

//Set Base Params
ds.baseParams = {sc:config.sc};

//Set default Sort Column
ds.setDefaultSort(config.DefaultSortCol, config.DefaultSortDir);

//set the column model to the passed object
var cm = config.ColumnModel;

//Make columns sortable
cm.defaultSortable = true;

//Create SelectionModel
sm = new Ext.grid.RowSelectionModel({singleSelect:true});

// add a paging toolbar to the grid's footer
var paging = new Ext.PagingToolbar({
store:ds,
pageSize: globalPageSize,
displayInfo: true,
displayMsg: 'Displaying records {0} - {1} of {2}',
emptyMsg: "No Records to display"
});

//create Grid
var grid = new Ext.grid.GridPanel({
store : ds,
cm : cm,
viewConfig : {forceFit: true},
sm : sm,
autoHeight : true,
frame : false,
border : false,
loadMask : {msg: ''},
title : null,
enableColumnHide : false,
enableHdMenu : false,
bbar : paging,
stripeRows : true,
autoScroll : false,
minColumnWidth : 75
});

// trigger the data store load before rendering to avoild inital load mask
ds.load({
params: {
start:0,
limit:globalPageSize,
sc:config.sc
}
});

//Render the grid
grid.render(config.ElementID);
//Check if we want a click listener on rows to open options window
if(config.win){
grid.on('rowclick',function(grid, rowIndex, e){
WindowBuilder.windowCreate({
ParameterName: config.winParam,
ParameterID: grid.store.getAt(rowIndex).get(config.winParam),
Title: (config.winTitle) ? config.winTitle:'Options',
URL: config.winURL,
Anim_Target: null
});
}
)
}
}
};
}();

All of this works great and my grid is build, since I passed params to say I want to have a rowclick open a window it will also do that by calling the Windowbuilder.js


WindowBuilder = function(){
var win;

return{
init : function(){

},

windowCreate : function(config){
//build source parameter string
var URLParam = "";
if(config.ParameterName && config.ParameterID){
URLParam = '?'+config.ParameterName+'='+config.ParameterID
}

var MIF = new Ext.ux.ManagedIFrame({autoCreate:{id:'dynamicIframe1',cls:'x-window-body',width:'100%',height:'100%',src:config.URL+URLParam}});

win = new Ext.Window({
title : (config.Title) ? config.Title:'New Window',
animateTarget : (config.Anim_Target) ? config.Anim_Target:null,
layout : (config.Layout) ? config.Layout:'fit',
id : (config.WinID) ? config.WinID:'window',
width : (config.width) ? config.Width:700,
height : (config.Height) ? config.Height:500,
closeAction : (config.CloseAction) ? config.CloseAction:'close',
minimizable : (config.minimizable) ? config.minimizable:false,
maximizable : (config.maximizable) ? config.maximizable:false,
plain : (config.plain) ? config.plain:true,
modal : (config.Modal) ? config.Modal:true,
shadow : (config.shadow) ? config.shadow:false,
constrain : (config.constrain) ? config.constrain:true,
body : MIF
});
win.show();
//this.updateContent(config);
}
}
}();

The windowbuilder uses your ManagedIframe code and that works great as well, however the url I pass loads all of the ext files again if I want to place a grid on that page (basically in the iframe in the window).

My question now is how to tell the created window (Iframe) to use the ext files that are already in the cache... currently in the browser cache, so I suspect I'll need to load/cache them in the ModuleManager you have and then when creating the window tell it to transform, which is basically what I tried and it gave me the error.

Could you just give me a hint on where I need to put the code parts stripped out from your example? In the windowbuilder was my first guess, but since I didn't get it to work I'm wondering if that was the right decision... :)

Thanks again for your great support.

[hendricd]

Thanks for the post. It's a bit clearer now what your doing.

I think however, I'm going to concentrate on a simpler Windowed example that everyone can benefit from. You have a lot going on there, and it might create additional confusion for those just starting out.

Look for it soon, tho. ;)

[dsorre]

henricd -

Thanks again for all the assistance. I'm looking forward to seeing a window demo as I understand that it's a bit involved on the stuff I'm doing currently. Having a basic window example would certainly show me or give me clue of how to integrate it into my app.

Thanks.

[mchipman]

Well finally,
I've got a working example (for 2.0+) available the demonstrates what we "frame-lovers" have all been asking for: =P~

"Load the Extjs library (or any frameWork) once, and apply it to multiple frames without modifying the iframes' source document."

Attached is a zip file containing the complete demo (with one exception, see below). Extract it to a new /examples/miframe directory of your standard Ext distribution.

Until now, there has been a stumbling block for accomplishing this on IE: Ext.onDocumentReady and the old 'document.write(a-deferred-script-tag)' trick.
Doing that on an established DOM would trash the frame document after it was initially rendered. But, after upgrading EventManager (also included) with a more modern "domready" detection scheme for IE, we are now up to the task with all browsers. And, we can load multiple Ext.onReady blocks (dynamically) whenever/as-often as needed.

Demo installation instructions:
1) Extract to advDemo.zip file contents to your /examples/miframe directory.
2) Place a copy of your ext-all.js file in there as well.
3) Open ext-all.js in your fav editor and paste (replacing the highlighted line) with the new one provided in EventManager-min.js:


Ext.DomHelper=function(){var L=nul...
Ext.Template=function(E){var B=arg....
Ext.DomQuery=function(){var cache=.....
Ext.util.Observable=function(){if(......
Ext.EventManager=function(){var T,
Ext.enableFx=true;Ext.Fx={slideIn:.....
Ext.CompositeElement=function(A){t......
Ext.data.Connection=function(A){Ex.....
Ext.Updater=function(B,A){B=Ext.ge......
Date.parseFunctions={count:0};Date.....
.......
... and save it.

Then run /examples/miframe/miframe.html and watch the party. ;)

The two "Transformation" examples (tree-top), load a stripped down tabs example page (yes, no scripts or stylesheets) from the neighboring /examples/tabs directory and garnishes it with ext-all.*, and other necessary scripts/stylesheets (all from the main host page).

Legacy forms just got a new face. :-?

UPdate: 2/8/2008 EventManager updated (in separate zip now).
I can't get this example to work. I have edited the ext-all.js file exactly as specified (it is now 465k in size rather than 499k). Could someone please pull up my examples site and see what I'm talking about... http://www.cdabay.com/r/extjs/examples/miframe/miframe.html

better yet... post up a zip file with all the necessary changes already made.

Thanks,

-Mark

[hendricd]

Sorry about that Mark. :"> You're merely missing the line just below the replacement (highlighted). It was not intended to be removed as (was) indicated on the original post (fixed that just now).



Ext.DomHelper=function(){var L=nul...
Ext.Template=function(E){var B=arg....
Ext.DomQuery=function(){var cache=.....
Ext.util.Observable=function(){if(......
Ext.EventManager=function(){var T,
(function(){var D=Ext.lib.Dom;var E=Ex......
Ext.enableFx=true;Ext.Fx={slideIn:.....
Ext.CompositeElement=function(A){t......



As for a zip of ext-all.js... not sure where i'd host it.

[mchipman]

Ah-ha. Yep that did it. Thanks a bunch. Now I'll start studying this. Much appreciated!

-Mark

[hendricd]

@svdb, stever, DigitalSkyline -- I've come up with a solution for MIFP, that should solve the splitter drag issues. It uses a combination of what you both proposed (actually gave me some cool ideas for MediaPanel and FF-bleeding-objects as well)

MIFPanel(only) is now clairvoyant after all :D. It will detect if it's contained in a borderlayout-splitregion and masks itself and all other MIF's during the Splitbar drag operation with a transparent mask. I've noticed a bit of flicker tho :-?

@svdb -- Turns out the splitbar-overlay uses a Z of 20000 ! Try your layout test again with this experimental version, but add this style rule to your page for testing:



.x-dragmask{
z-index:18000!important;
position:absolute;
top:0;
left:0;
background-color:transparent;
width:100%;
height:100%;
zoom:1;
}
The final release won't need the rule.

One thing a have noticed in all this is that the layout.useShim support seems to have disappeared in 2.0. (SplitBar does nothing with the config value.)

Lemme know how it goes ;)

[stever]

Does this work with Window dragging too? Or just split bars?

[hendricd]

It detects a border layout, but you can drive it yourself with

MIFP.showDragMask and hideDragMask methods. (actual call subject to change ;) )

[simon81]

Hi hendricd, i'm really new in ExtJs and trying to use hard your iframepanels.

How can i get the id of a iframepanel from the document loaded in it?

Thanks in advance

s

[dsorre]

I have a quick question regarding the loadMask as I just can't get it to show up...



windowCreate : function(config){

var MIF = new Ext.ux.ManagedIFrame({autoCreate:{id:'dynamicIframe1',cls:'x-window-body',width:'100%',height:'100%',loadMask:true}});

win = new Ext.Window({
title : (config.Title) ? config.Title:'New Window',
animateTarget : (config.Anim_Target) ? config.Anim_Target:null,
layout : (config.Layout) ? config.Layout:'fit',
id : (config.WinID) ? config.WinID:'window',
width : (config.Width) ? config.Width:700,
height : (config.Height) ? config.Height:500,
closeAction : (config.CloseAction) ? config.CloseAction:'close',
minimizable : (config.Minimizable) ? config.Minimizable:false,
maximizable : (config.Maximizable) ? config.Maximizable:false,
plain : (config.Plain) ? config.Plain:true,
modal : (config.Modal) ? config.Modal:true,
shadow : (config.Shadow) ? config.Shadow:false,
constrain : (config.Constrain) ? config.Constrain:true,
resizable : (config.Resizable) ? config.Resizable:false,
body : MIF
});
//
win.show();
MIF.setSrc('myurl');
}


As you can see I am passing loadMask argument true, but it just opens the window, lags for 1-2 sec. and then shows the source... I'd like to see the loading indicator during the lag period... am I missing something?

[hendricd]

@dsorre -- the loadMask config is not part of the autoCreate config option, but a separate one:


var MIF = new Ext.ux.ManagedIFrame({autoCreate:{id:'dynamicIframe1',cls:'x-window-body',width:'100%',height:'100%'}
,loadMask:true});
@simon81 -- Welcome aboard!
How can i get the id of a iframepanel from the document loaded in it? There are a number of ways. Likely the easiest, is:



var mifp = new Ext.ux.ManagedIframePanel({
defaultSrc:'page2.html', //must follow browsers same-domain rules
id: 'userForm',
listeners:{documentloaded: function(frame){
//tell the frame, who the hosting MIFP is
frame.execScript('parentPanel = \''+frame.ownerCt.id+'\';');
}
But, the better approach is to give your MIFP a real id of your choice ('userForm' above) and reference that from within the embedded window context:


var parentPanel = parent.Ext.getCmp('userForm');

[simon81]

That's perfect hendric, i'll use the first solution 'couse i have many ifp generated dinamicaly and it's not possible for the source pages to know "where they are".

Thanks a lot, you did a great job with this.
s

[hendricd]

Adds the finishing touches to this Component:

Cross-Frame messaging (with events)
Auto-dragMask support for Border Layouts
Improved SSL support
Updated Wiki Manual content (still ongoing tho) ;)Thanks for everyone's valuable input on this Component.

I'll be updating the examples as soon as I can.

[ajaxE]

The ManagedIframePanel would be better suited for your layout:



,{
id:'content',
region:'center',
defaultSrc: 'someUrl.html',
xtype: 'iframepanel',
title : 'Waiting for One..'
}
]


This works well. Thanks. I need to dynamically change the center panel content by clicking the tree note. I have the code as below. It didn't work. Help please.


var center = Ext.getCmp('content');
center.setTitle(node.text);
Ext.get('content').dom.src='http://www.yahoo.com';

Thanks!

[hendricd]

Just not familiar with the MIF API yet. Try:


var center = Ext.getCmp('content');
center.setTitle(node.text);
//MIFP has a setSrc method as well
center.setSrc('http://www.yahoo.com');
//or
center.getFrame().setSrc('http://www.yahoo.com'
,false
,function(){this.setTitle(this.getFrameDocument().domain);}.createDelegate(center)
);

[ajaxE]

Just not familiar with the MIF API yet. Try:


var center = Ext.getCmp('content');
center.setTitle(node.text);
//MIFP has a setSrc method as well
center.setSrc('http://www.yahoo.com');
//or
center.getFrame().setSrc('http://www.yahoo.com');


Thanks! It works very well! I am just starting looking at it this morning. This is a great API. I will look into it more to use other features of it. Thanks for your quick response. I really appreciate your help and this API!!

[brian]

Cummon, bring that IFrame content home (to the parent) where it belongs, and put some cool Ext clothing on it. B)

Regarding dealing with third party scripts that come along with the content of the iframe, what would be the approach to deal with breakout scripts such as the one currently on monster.com? Should it be handled with ManagedIframePanel or somewhere else?

[brian]

(forgot to say) thanks hendricd! I am finding the ManagedIframePanel really useful in development.

[DigitalSkyline]

Brian,
Nothing you can do about that I'm afraid. Dealt with the same problem. On top of that some sites have <base target = "_top"> or target specified on links...

IMO framing others content should probably be avoided.

[brian]

DSky, Thanks. I know what you mean, unless the specs of the proj call for it... I know of other non-js ways to deal with it that have to be handled server side with something like hpricot -- read in and rewrite.

[DigitalSkyline]

sure... it simply can't be done due to the browser's built in security that prevents you from modifying iframe content from external domains. There's probably some convoluted way to get the page content, use a regexp on it, and write it back to the iframe (basically the same thing as a server proxy, but on the client)... but that would be an exercise and a half :)

You'd have to account for all the external files, rewrite all the urls, etc.

[hendricd]

Nope, I'd say our hands are firmly tied for stripping out frame-busters effectively.

[brian]

It seems that viewport isn't working for me in Firefox, but is working in Safari. I need a way to pin the edges of the viewport with miframe, is there best practice established? Thanks for any suggestions!

This is what I was using in 1.0 to set on browser window resize:


...
var portHeight = YAHOO.util.Dom.getViewportHeight();
var portWidth = YAHOO.util.Dom.getViewportWidth();
ifr.setHeight(portHeight);
ifr.setWidth(portWidth);
}
layout.endUpdate();
layout.layout();
...

[brian]

here's a screenshot

[simon81]

@dsorre -- the loadMask config is not part of the autoCreate config option, but a separate one:


var MIF = new Ext.ux.ManagedIFrame({autoCreate:{id:'dynamicIframe1',cls:'x-window-body',width:'100%',height:'100%'}
,loadMask:true});
@simon81 -- Welcome aboard! There are a number of ways. Likely the easiest, is:



var mifp = new Ext.ux.ManagedIframePanel({
defaultSrc:'page2.html', //must follow browsers same-domain rules
id: 'userForm',
listeners:{documentloaded: function(frame){
//tell the frame, who the hosting MIFP is
frame.execScript('parentPanel = \''+frame.ownerCt.id+'\';');
}
But, the better approach is to give your MIFP a real id of your choice ('userForm' above) and reference that from within the embedded window context:


var parentPanel = parent.Ext.getCmp('userForm');

Hendric unfortunatelly if the user follow some link in the document inside the Iframe then the new document i loose the id, and "he don't know where he is".
It could be done in the way you suggest only if there is an event like "srcchange" or something like that.
tks again

[brian]

If I want to manage the iframe manually, but use ux managed iframes for the content, how would I implement that? This is the code I'm using to create the iframe:



var iframe = document.createElement('iframe');
iframe.setAttribute('frameborder', 'no');
iframe.frameBorder = 0;
iframe.setAttribute('name', 'bordee_iframe');
iframe.setAttribute('id', 'bordee_iframe');
document.body.appendChild(iframe);
iframe.src = 'http://' + domain + '/' + path;

[hendricd]

@simon81 -- You'll have little control (unless you control the domain) over where they will travel over external links. The messaging and scripting ability of MIF/P is only permitted if the page remains scoped to a local (same) domain.

@brian -- I would give embedded page body height=width=100%. That should size things up for any size you set the Window to.

To create a new standalone IFRAME in MIF:


function newIframe(domain, path)
return new Ext.ux.ManagedIFrame({
autoCreate:{style:{width:'100%',height:'100%'}},
src: 'http://' + domain + '/' + path
});

[peaquino]

Hello,

I'm trying to develop a shell for current intranet application, mostly based on good old HTML and posting of forms (screenshot of current work included). Specifically, I would like to automatically change toolbars and menus for pages loaded in a MIF panel, taking into account loaded content. Right now, everything seems to work ok, when I initiate a page load from the shell (ex. by selecting an item in a tree). But the "documentloaded" event is not fired, when I click a link in the iframe or post a form, so I'm unable to update shell for newly loaded page.

Is it possible to listen for *every* page load event in the iframe, even the ones not initiated by parent document?

Thanks in advance.

[hendricd]

That event is currently not raised for links activated within the frame, although you are the third person to ask about it.

Maybe a new config option is in order? Like:

eventsFollowInternalLinks:true
and
maskOnInternalLinks:true

or something ? I'll check into it. :-?

[peaquino]

I'll check into it. :-? Wow, thanks! That would be great. Do you need any help with that? I could do some tests if needed, or try to implement it myself under your guidance.

[brian]

@hendricd - Thanks, I'll give that a try.

[dsorre]

Hey hendricd -

The loadmask works now, thanks for that.

I am running into an issue though where no matter what my iframe is not "writable" although it's all on the same domain (using localhost).



var WindowBuilder = function(){
var win;

return{
init : function(){

},

windowCreate : function(config){
//build source parameter string
var URLParam = "";

if(config.ParameterName && config.ParameterID){
URLParam = '?'+config.ParameterName+'='+config.ParameterID
}

var MIF = new Ext.ux.ManagedIFrame({autoCreate:{id:'dynamicIframe1',cls:'x-window-body',width:'100%',height:'100%'},loadMask:{msg:'',force:true}});
MIF.setSrc(config.URL+URLParam);

win = new Ext.Window({
title : (config.Title) ? config.Title:'New Window',
animateTarget : (config.Anim_Target) ? config.Anim_Target:null,
layout : (config.Layout) ? config.Layout:'fit',
id : (config.WinID) ? config.WinID:'window',
width : (config.Width) ? config.Width:700,
height : (config.Height) ? config.Height:500,
closeAction : (config.CloseAction) ? config.CloseAction:'close',
minimizable : (config.Minimizable) ? config.Minimizable:false,
maximizable : (config.Maximizable) ? config.Maximizable:false,
plain : (config.Plain) ? config.Plain:true,
modal : (config.Modal) ? config.Modal:true,
shadow : (config.Shadow) ? config.Shadow:false,
constrain : (config.Constrain) ? config.Constrain:true,
resizable : (config.Resizable) ? config.Resizable:false,
body : MIF
});

win.show();

if(!MIF.domWritable()){alert('Not writable');}
},

windowClose : function(){
win.close();
}
}
}();


I really can't figure out why it wouldn't be writable, do you have any idea? Am I doing something wrong?

Thanks.

[svdb]

Doh! 20000!
Gee Doug, you're the man. It works like a charm.
I could certainly use all your years of experience in my project.
Hopefully it's the last time z-index pushes me in a ditch.
Many thanks.
svdb

[mchipman]

Hello all:

I really like the miframe functionality. I have a few questions that I hope someone can answer.

First (just to get this out of the way)... I noticed that some of the scripts were NOT being cached even though I have set this: Ext.Loader = new Ext.ux.ModuleManager({disableCaching:false});... Note that if I set disableCaching:true, the files were still NOT being cached... it didn't make a difference one way or the other.

Thus, some scripts were being loaded twice (ext-all.js for example) which really slowed the app down.

I tracked down the culprit... in ext-basex.js I commented out one line (since disabling the cache apparently was not being respected) as follows:

/* Iterate the desired modules in there implied dependency order */
try{

Ext.each(arguments , function(module){
//strip relative path leaving module name
var moduleName = module.trim().split('\/').pop().toLowerCase()
,fullModule = module.indexOf('.') !== -1 ? module : module + '.js';

if(!this.loaded(moduleName) || this.forced){

var moduleObj = {
name :moduleName.trim()
,fullName :fullModule.trim()
,extension :fullModule.split('.').pop().trim()
,path :this.modulePath
,url :this.modulePath + fullModule
,loaded :false
,contentType :''
};

if(this.method == 'GET' && this.disableCaching === true){
// fullModule += '?_dc=' + (new Date().getTime());
}

My question is whether I was doing something wrong, or was commenting out this line the best way to solve the problem?

I'll present my other questions in another post... just to keep threads clean.

-Mark Chipman

[dawesi]

how do I set the 'name' of the managed iframe in the config so that I can submit forms into it using target=?

Here's my code


{ xtype: 'iframepanel',
hideLabel: true,
autoCreate: {
id : 'iframeTarget'
},
listeners : {
documentloaded : function(frame) {
console.info('iframe loaded',frame);
},
domready : function(frame) {
console.ingo('iframe dom ready',frame);
}
}
}

[dawesi]

dsorre: is it because you are setting the url after creation maybe? The iframe might be getting a local or unscoped domain and protecting it on that domain



MIF.setSrc(config.URL+URLParam);

[dawesi]

Regarding dealing with third party scripts that come along with the content of the iframe, what would be the approach to deal with breakout scripts such as the one currently on monster.com? Should it be handled with ManagedIframePanel or somewhere else?

set your iframe id to 'top' and most scripts will think it's the top ;-)

by the way, how does one set the 'name' of the iframe?

[hendricd]

@dawesi -- MIF asserts the name(name = id, if not in markup ) attribute, so an Id is just fine. Or, specify a name in the autoCreate config.

Regarding dealing with third party scripts that come along with the content of the iframe, what would be the approach to deal with breakout scripts such as the one currently on monster.com? Should it be handled with ManagedIframePanel or somewhere else?Previous answer still stands: Foreign-domains == pain. Not enough document access to stop much.

[brian]

Is there/does any one have a working example of managedIframe:loadFunction ? Thanks!:D

[hendricd]

@brian -- there is an example on the Wiki Manual: http://extjs.com/learn/ManageIframe:Manual:Frame_Scripting
and the advanced example, found here (http://extjs.com/forum/showthread.php?p=120384#post120384), also demonstrates it in action.

[dsorre]

It's still telling me that it's not writable...

I tried calling the setsrc after the window is "shown", I tried setting the src in the config options rather than using setsrc, but still no love...



windowCreate : function(config){
//build source parameter string
var URLParam = "";

if(config.ParameterName && config.ParameterID){
URLParam = '?'+config.ParameterName+'='+config.ParameterID
}

var MIF = new Ext.ux.ManagedIFrame({autoCreate:{id:'dynamicIframe1',cls:'x-window-body',width:'100%',height:'100%'}});
MIF.setSrc(config.URL+URLParam);

win = new Ext.Window({
title : (config.Title) ? config.Title:'New Window',
animateTarget : (config.Anim_Target) ? config.Anim_Target:null,
layout : (config.Layout) ? config.Layout:'fit',
id : (config.WinID) ? config.WinID:'window',
width : (config.Width) ? config.Width:700,
height : (config.Height) ? config.Height:500,
closeAction : (config.CloseAction) ? config.CloseAction:'close',
minimizable : (config.Minimizable) ? config.Minimizable:false,
maximizable : (config.Maximizable) ? config.Maximizable:false,
plain : (config.Plain) ? config.Plain:true,
modal : (config.Modal) ? config.Modal:true,
shadow : (config.Shadow) ? config.Shadow:false,
constrain : (config.Constrain) ? config.Constrain:true,
resizable : (config.Resizable) ? config.Resizable:false,
body : MIF
});

win.show();

if(!MIF.domWritable()){alert('Not writable');}
},


Any other idea what it might be? Again I am calling a page on the same domain (localhost). When I don't specify a src it still says not writable... I am using the latest version of Ext and the Managed Iframe.

Any help is greatly appreciated.

[hendricd]

@desorre - You are checking domWritable too early. Since IFrames behave asynchronously you must wait until one of the events(domready, or documentloaded) fires before you attempt accessing the embedded DOM:



var MIF = new Ext.ux.ManagedIFrame({
autoCreate:{id:config.WinID + '-Iframe',cls:'x-window-body',width:'100%',height:'100%'}
,listeners:{documentloaded:function(frame){ alert(frame.domWritable()); } }
});
MIF.setSrc(config.URL+URLParam);

[dsorre]

Doh... I feel stupid now :)

Thanks for the help!

[hendricd]

@dsorre -- Shake it off. :D

[hendricd]

how do I set the 'name' of the managed iframe in the config so that I can submit forms into it using target=?

As you are letting MIFP create the frame for you, you could:


just set it to what you want after render, or
use the new(1.01) frameConfig option to do it.

{ xtype: 'iframepanel',
hideLabel: true,
frameConfig: { autoCreate: { name:'iframeTarget', id:'iframeTarget' }} //new for MIF 1.01
listeners : {
documentloaded : function(frame) {
console.info('iframe loaded',frame);
},
domready : function(frame) {
console.info('iframe dom ready',frame);
},
render : function(MIFP){
var frame;
if(frame = MIFP.getFrame()){
frame.id = frame.name = 'iframeTarget';
if(Ext.isIE){
window.frames[frame.name]= frame.dom;
}
}
}
}
}

[hendricd]

Hello all:

if(this.method == 'GET' && this.disableCaching === true){
// fullModule += '?_dc=' + (new Date().getTime());
}

My question is whether I was doing something wrong, or was commenting out this line the best way to solve the problem?

-Mark Chipman

@Mark -- commenting that line out will likely not solve your problem. The disableCaching switch (as it behaves elsewhere within the Ext framework) simply mangles the url of the resource to create a new parameter which should force a fresh copy from the server.

Are your server settings for Content-Expiration valid for your wishes ?

Additional notes on Caching and xmlhttprequest:
FF (in the past <1.5) does NOT cache anything received via the XHR object.
IE, on the other hand, utilizes the browser cache for synchronous XHR requests only.

Thus, ux.ModuleManager would likely load ext-all.js faster on IE, as the ux uses a synchronous request to retrieve the source module.

[dsorre]

I hate to be a pain, but after figuring out why the IFrame wasn't writable I thought I would try to get the cache sharing going once again.

I modified my WindowBuilder to say:


windowCreate : function(config){
//build source parameter string
var URLParam = "";

if(config.ParameterName && config.ParameterID){
URLParam = '?'+config.ParameterName+'='+config.ParameterID
}

MIF = new Ext.ux.ManagedIFrame({autoCreate:{id:'dynamicIframe',cls:'x-window-body',width:'100%',height:'100%'},listeners:{domready:this.onStart}});
MIF.setSrc(config.URL+URLParam);

win = new Ext.Window({
title : (config.Title) ? config.Title:'New Window',
animateTarget : (config.Anim_Target) ? config.Anim_Target:null,
layout : (config.Layout) ? config.Layout:'fit',
id : (config.WinID) ? config.WinID:'window',
width : (config.Width) ? config.Width:700,
height : (config.Height) ? config.Height:500,
closeAction : (config.CloseAction) ? config.CloseAction:'close',
minimizable : (config.Minimizable) ? config.Minimizable:false,
maximizable : (config.Maximizable) ? config.Maximizable:false,
plain : (config.Plain) ? config.Plain:true,
modal : (config.Modal) ? config.Modal:true,
shadow : (config.Shadow) ? config.Shadow:false,
constrain : (config.Constrain) ? config.Constrain:true,
resizable : (config.Resizable) ? config.Resizable:false,
body : MIF
});

win.show();
},

onStart : function(){
Demo.transform(MIF);
}


You can see that my handler calls the transform function in the Demo namespace which is basically the one you have in your adviframe.js

I get the balloon that tells me files have been cached, I then call the create window and it loads up the window, but tells me Ext is not defined, since I took the manual references out. I do get a ballon that says transformation successful however it doesn't show in the iframe but rather it shows on the parent.

Here's the modified adviframe I'm using so you can see what I'm doing:


/* Fixes for DOM cleanup (Important for <object> tag cleanup) */
ExtFixes = function(){
Ext.removeNode = Ext.isIE ? function(){
var d;
return function(n){
if(n && n.tagName != 'BODY'){
d = d || document.createElement('div');
d.appendChild(n);
d.innerHTML = '';
}
}
}() : function(n){
if(n && n.parentNode){
n.parentNode.removeChild(n);
}
};

Ext.destroy = function(){
for(var i = 0, a = arguments, len = a.length; i < len; i++) {
var as = a[i];
if(as){
if(typeof as.destroy == 'function'){
as.destroy();
}else if(as.dom){
as.removeAllListeners();
as.remove();
}
}
}
};
//Permits Container creation without items.
Ext.override(Ext.Container,{
add : function(comp){
if(!this.items){
this.initItems();
}
var a = arguments, len = a.length;
if(len > 1){
for(var i = 0; i < len; i++) {
this.add(a[i]);
}
return;
}
if(comp){
var c = this.lookupComponent(this.applyDefaults(comp));
var pos = this.items.length;
if(this.fireEvent('beforeadd', this, c, pos) !== false && this.onBeforeAdd(c) !== false){
this.items.add(c);
c.ownerCt = this;
this.fireEvent('add', this, c, pos);
}
return c;
} else {return null;}
}

});

Ext.util.Format.htmlDecode = function(value)
{
return !value ? value : String(value).replace(/&gt;/g, ">").replace(/&lt;/g, "<").replace(/&quot;/g, '"').replace(/&amp;/g, "&");
};
}; //Going to apply these fixes to our Iframes dynamically -- later

ExtFixes();

Ext.useShims = true;
var Demo = function(){

var _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);
}
,createBox = function(t, s) {
return ["<div class=\"msg\">"
, "<div class=\"x-box-tl\"><div class=\"x-box-tr\"><div class=\"x-box-tc\"></div></div></div>"
, "<div class=\"x-box-ml\"><div class=\"x-box-mr\"><div class=\"x-box-mc\"><h3>"
, t, "</h3>", s
, "</div></div></div>"
, "<div class=\"x-box-bl\"><div class=\"x-box-br\"><div class=\"x-box-bc\"></div></div></div>"
, "</div>"].join("");
}
,MM = new Ext.ux.ModuleManager({disableCaching:true});

return {
init : function(){
//Setup the beforeload event, to cache each module
MM.on('beforeload',this.handlers.cacheModule, this);

//This site sits in the examples/miframe path, so adjust modulePath to gather the basics
//relative to the standard Ext distribution
MM.modulePath = '';

//.js is assumed, but you can load anything
if(this.requires('/ext2.0/resources/css/ext-all.css'
,'/ext2.0/adapter/ext/ext-base.js'
,'/ext2.0/ext-all.js'
,'/ext2.0/ext-basex.js'
)){

this.balloon(this.el, 't', 'ModuleManager:','Required Source Files are Cached');
} else {
this.balloon(this.el, 't', 'ModuleManager Failure:','Some Resources are NOT Cached');
}
},

ModuleManager : MM, //exposed for FireBug Browsing

requires : MM.load.createDelegate(MM), //Give Demo a dynamic script loader

modules : {},

handlers:{
cacheModule:function(manager, module,response ){

this.modules[module.name] = Ext.apply({},{content:response.responseText},module);

//we DO NOT want to eval the result into the main-page (window) context,
//just caching it for later injection, so return false
return false;

}
},

balloon : function(alignTarget,align, title, format){

if(!this.balloonCt){
this.balloonCt = Ext.DomHelper.insertFirst(document.body, {id:'demo-balloon-div'}, true);
}
this.balloonCt.alignTo(alignTarget||document, align||'t-t');
var s = String.format.apply(String, Array.prototype.slice.call(arguments, 3));
var m = Ext.DomHelper.append(this.balloonCt, {html:createBox(title||'', s)}, true);
m.slideIn('t').pause(1).ghost("t", {remove:true});
},
/*
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 idoc = iframe.getDocument();
var iwin = iframe.getWindow();
var head = idoc.getElementsByTagName("head")[0];
var exception;


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

if(module.extension == 'css'){

//All css is injected into document's head section

var rules = idoc.createElement("style");
rules.setAttribute("type", "text/css");
if(Ext.isIE){
head.appendChild(rules);
rules.styleSheet.cssText = module.content;
}else{
try{
rules.appendChild(idoc.createTextNode(module.content));
}catch(e){
rules.cssText = module.content;
}
head.appendChild(rules);
}

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

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

},this);

iframe.execScript("Ext.lib.Ajax.forceActiveX = true;");

//load out Ext fixes function and execute it.
iframe.loadFunction('ExtFixes',true, true);

this.balloon(iframe.el, 't', 'Dom Ready','Transformation Complete.');
},
dynamic: function(){}
};
}();

Ext.onReady(Demo.init,Demo,true);


And there I thought I knew what I had to do, but looks like I'm wrong yet again :/ Many thanks in advances for helping me sorting this out.

[hendricd]

@dsorre -- Some things you need to consider in your implementation:

setSrc - retrieves the URL and the IFrame builds the DOM and executes any linked/inline scripts in the document (like it should).
Only when the DOM is ready can you 'spray' new code at it; so your embedded page has to account for that fact when it runs. IOW: It should not be making any Ext calls when it's first loaded. Wrap that code in a function (something like initApp) that gets called during "transformation":

pseudo:


MIF.on('domready', Demo.transform, Demo );
MIF.setSrc ( url);



near the end of Demo.transform:


.........
iframe.execScript("Ext.lib.Ajax.forceActiveX = true;");

//load out Ext fixes function and execute it.
iframe.loadFunction('ExtFixes',true, true);

iframe.execScript("initApp()"); //Now kick-start your embedded pages' Ext script

this.balloon(iframe.el, 't', 'Dom Ready','Transformation Complete.');

[hendricd]

Updated: Version 1.01 released. By default, MIF now raises the 'domready' (if DOM access is permitted) and 'documentloaded' events when the user follows an embedded link <A>. To disable this behavior, toggle it on/off at any time:



MIF.eventsFollowFrameLinks = false;
Note: This has no effect on the loadMask, however. The loadMask will only be shown when the location/content is changed by the main page.

Also, for MIFPanel, a frameConfig option has been added to better control auto-created frames during lazy rendering:


....
,items: {
xtype:'iframepanel'
,frameConfig: { autoCreate:{ id:'myFrame', name:'myFrame', frameborder:0 }
,eventsFollowFrameLinks : false
}
,defaultSrc : 'http://www.extjs.com'
}
Enjoy.

[dsorre]

Doug -

Have I told you that you're a genius? If not let me do it now, because you truly are!

Your help worked like a charm and I have my windows using cached js/css files now, just brilliant. I'm still a little concerned about the time it takes to generate/render the actual window (~2sec) before the loadmask shows up for my IFrame content, but I think I'll worry about that at a later point, unless you have a tip or trick for that :)

Thanks again for your great and lightening fast support!

Sadly for you, you probably haven't seen the last of me ;)

[KENT]

Ehllo Herricks b-),
I'm here to bother you :D I have just checked your current release, it seems that loadmask isn't placed correctly, sometimes it appears at top-left on the first tab and appears correctly on the others.

A question if I may, How can I add a button on the toolbar to refesh a below MIF?

[kkbear]

When I change the theme I meet a problem,I can not get the IFrame Object and use just like

parent.frames[frameName].Ext.util.swapstyle...
How I can get the Iframe Object?

[hendricd]

@Kent -- The problem isn't really with MIF, but the fact that IFrames don't really have a height or width (unless absolutely positioned) until there is some content loaded into them, thus, Element.mask doesn't center the message properly.

Try adding this Element.override to your page to smooth out masking system-wide:


Ext.override(Ext.Element, {
mask : function(msg, msgCls,maskCls){
if(this.getStyle("position") == "static"){
this.setStyle("position", "relative");
}
if(this._maskMsg){
this._maskMsg.remove();
}
if(this._mask){
this._mask.remove();
}

this._mask = Ext.DomHelper.append(this.dom, {cls:maskCls || "ext-el-mask"}, true);

this.addClass("x-masked");

this._mask.setDisplayed(true);

if(typeof msg == 'string'){
// *** FIX : create element hidden
this._maskMsg = Ext.DomHelper.append(this.dom, {style:"visibility:hidden",cls:"ext-el-mask-msg", cn:{tag:'div'}}, true);
var mm = this._maskMsg;
mm.dom.className = msgCls ? "ext-el-mask-msg " + msgCls : "ext-el-mask-msg";
mm.dom.firstChild.innerHTML = msg;
(function(){
mm.setDisplayed(true);
mm.center(this);
mm.setVisible(true);
}).defer(20,this); // *** FIX : defer things a bit, so the mask sizes over the el properly before centering
}
if(Ext.isIE && !(Ext.isIE7 && Ext.isStrict) && this.getStyle('height') == 'auto'){ // ie will not expand full height automatically
this._mask.setSize(this.dom.clientWidth, this.getHeight());
}
return this._mask;
}
});
Also, have a look at the demoPack.zip. The demo project uses a toolBar on each MIFPanel to reload the page.

@kkbear - MIF returns the current frame window context with:


var frameEl = new Ext.ux.ManagedIFrame('myFrame',
{listeners:
{documentloaded:function(frame){
var ext = frame.getWindow (http://extjs.com/forum/../learn/ManageIframe:Manual:Frame_Methods#managedIframe:getWindow)().Ext;
if(ext){
ext.util.swapStyle(........
}else{
alert('Embedded page has no Ext!')
}
}
});
frameEl.setSrc('yourExtpage.html');

[hendricd]

with a cross-frame messaging example. (See the messaging.html file).~o)

[KENT]

Hi Herricks,
I tried to add this but have no success, please help cause I'm really stupid at javascript.

Ext.namespace("MyDesktop");
MyDesktop.Bloomberg = Ext.extend(Ext.app.Module, {

appType : 'tabs',
id : 'Bloomberg-win',

init : function(){
this.launcher = {
text: 'Chỉ số Index của thế giới',
iconCls:'Bloomberg-icon',
handler : this.createWindow,
scope: this
}
},

createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('Bloomberg-win');
var comeHome = function(){ Ext.getCmp('myaccount').activeTab.setSrc();}
if(!win){
win = desktop.createWindow({
id: 'Bloomberg-win',
title:'Bloomberg World Indexes',
width:800,
height:480,
iconCls: 'Bloomberg-icon',
shim:false,
animCollapse:false,
border:false,
constrainHeader:true,
layout: 'fit',
items:
new Ext.TabPanel({
activeTab:0,
deferredRender:true,
layoutOnTabChange:true,
plain:true,
autoScroll: true,
items: [
{
title: 'World Indexes',
id: 'myaccount',
xtype:'iframepanel',
closable:false,
loadMask:{msg:'Loading...'},
defaultSrc:'page.bloomberg.php',
tbar : [{ text:'Return',handler: comeHome}
]

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

[hendricd]

more symptoms description ?? /:)

[mystix]

woah... he called you "herricks"... :))

[hendricd]

yep, I've seen quite a few variations /:)

[KENT]

What do you mean Herricks ? Sorry my English sucks

[mystix]

did anyone experience missing tabs (with both the "via UpdateManager" and "From Server" examples) with 1.0.1 MIF and the adviframes.html example?

http://img297.imageshack.us/img297/5937/tab1xn5.png




http://img297.imageshack.us/img297/3183/tab2zm9.png

[hendricd]

@mystix -- As indicated in the Demo notes on startup:


The demo page will NOT LOOK EXACTLY THE SAME as the original /examples/tabs page because of the existing (unmodified) relative url references in the example style sheets.

[mystix]

@mystix -- As indicated in the Demo notes on startup:

yes, i did read that... :)
about a couple dozen times i must add, trying to figure out if you meant the relative url references in only examples.css + tabs-example.css, or those 2 + ext-all.css.

after staring at your code for the past few hours, i think i've finally gotten the essence of that disclaimer, and why you had this seemingly useless chunk of code in transform.js which i thought (up till 5 minutes ago. d'oh! :">) was doing absolutely nothing:


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


if i may now hazard a guess:
were you trying to resolve the relative paths of all cached css resources for each dynamically added MIFP? if so, have you succeeded in doing so?

[hendricd]

Nah, those two functions are just helpers if someone needed them. The 'essence' of the demonstration did not include converting CSS relatives to absolutes (anywhere).

In real-life, the example*.css would need mending to work in a real use-case.

The messaging.html demo uses the same ext-loading philoshophy with just the basic ext-all.css involved.

[mystix]

Nah, those two functions are just helpers if someone needed them. The 'essence' of the demonstration did not include converting CSS relatives to absolutes (anywhere).

In real-life, the example*.css would need mending to work in a real use-case.

The messaging.html demo uses the same ext-loading philoshophy with just the basic ext-all.css involved.

that actually got me thinking...
on-the-fly changing of relative url references (via regexes) for cached css resources ain't such a bad idea after all :-?

as a proof of concept (just tested this on my machine), i replaced the forEach code block in adviframes.js with the following:


forEach(this.modules,function(module,name){
if (module.extension == 'css') {
var ct = new String(module.content); // make a copy of the cached resource
if (name == 'ext-all.css') { // specifically target ext-all.css
// image paths should be relative to the iframe's content
ct = ct.replace(/url\(\.\.\//ig, 'url(../../resources/');
// ct = ct.replace(/url\(\.\.\//ig, 'url(http://localhost:8080/ext/resources/'); // or use an absolute site path instead
}

// All css is injected into document's head section
var rules = idoc.createElement("style");
rules.setAttribute("type", "text/css");
if (Ext.isIE) {
head.appendChild(rules);
rules.styleSheet.cssText = ct;
} else {
try {
rules.appendChild(idoc.createTextNode(ct));
} catch(e) {
rules.cssText = ct;
}
head.appendChild(rules);
}
} 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,true); //write script tags for debugging.
iframe.un('exception',exception,this);
}
} ,this);


and voila, everything Ext works as expected:
___________
http://img141.imageshack.us/img141/3193/tabs1ku3.png

http://img141.imageshack.us/img141/6004/tabs2gx4.png
___________
plus there's virtually no performance degradation :D


what say you? i'm thinking another config option of sorts to enable something like this? :-?

[hendricd]

@mystix -- OK. you're hired :D

Better yet, could do it (once) when the content is retrieved:

adviframe.js: Line 207'ish:




handlers:{
cacheModule:function(manager, module, response ){

var ct = response.responseText;
if (module.name == 'ext-all.css') { // specifically target ext-all.css
// image paths should be relative to the iframe's content
ct = ct.replace(/url\( ?\.\.\//ig, 'url(../../resources/');
// ct = ct.replace(/url\( ?\.\.\//ig, 'url(http://localhost:8080/ext/resources/'); // or use an absolute site path instead
}
this.modules[module.name] = Ext.apply({},{content:ct},module);

//we DO NOT want to eval the result into the main-page (window) context,
//just caching it for later injection, so return false
return false;

},


what say you? i'm thinking another config option of sorts to enable something like this? :-?Possibly, but where? The resource layout is site/implementation specific, and may include resources from all over the place. Each would need to be handled ("relativized") on a case-by-case basis.

Hmm. :-?

But, I will be updating the advdemo with this tho, thanks.

[hendricd]

@mystix -- Did a little more testing.

The replacement pattern (which I suck at) does not consider the extra space in

url(../images....
vs
url( ../images.....

,so half the urls don't get replaced. :(((always wanted to do that)

Wouldn't that be: ct = ct.replace(/url\( ?\.\.\//ig, 'url(../../resources/'); ??

Also the new String() cast appends some narly byte array to end of the string (on Gecko anyway) which eval can't deal with. So, I amended my previous post to account for that.

But, I also noticed, the relative adjustment values need to be different (absolute?) for the 'via UpdateManager' examples because there is not base path context for the document updated that way.

[mystix]

woah... sorry for the delay.. was catching up on my weekly anime fix :)


@mystix -- Did a little more testing.

The replacement pattern (which I suck at) does not consider the extra space in

url(../images....
vs
url( ../images.....

,so half the urls don't get replaced. :(((always wanted to do that)

Wouldn't that be: ct = ct.replace(/url\( ?\.\.\//ig, 'url(../../resources/'); ??

nay nay. with that any of the following strings could pass: "url(+../", "url( ../" or "url(/../"
use this regex instead: /url\(\s*\.\.\//ig (trims whitespace between the opening parenthesis and the first period)




Also the new String() cast appends some narly byte array to end of the string (on Gecko anyway) which eval can't deal with. So, I amended my previous post to account for that.
that's odd... i know if you do a


console.log(new String("hello world"));

firebug spits out some narly array instead of a string, although in all actuality it's still a String object.
(although for some strange reason var a = new String("hello"); console.log(a[1]); and var b = "hello"; console.log(b[1]); both work and return "e" :-?)
other than that, no reason why a byte array's being appended... i've never come across it :-/

[edit]
instead of the new String() cast, try calling module.content.toString() and see if FF still gives u narly characters?
silly me. the replace() method automatically creates a copy of the original string. d'oh. :">

so a simple


var ct = module.content.replace(/url\(\s*\.\.\//ig, 'url(../../resources/');

would have done the trick instead. much neater.

[brian]

@brian -- there is an example on the Wiki Manual: http://extjs.com/learn/ManageIframe:Manual:Frame_Scripting
and the advanced example, found here (http://extjs.com/forum/showthread.php?p=120384#post120384), also demonstrates it in action.
Hendricd, Thanks for the examples. I just started my weekend... time to write some js!

[peaquino]

Updated: Version 1.01 released. By default, MIF now raises the 'domready' (if DOM access is permitted) and 'documentloaded' events when the user follows an embedded link <A>. To disable this behavior, toggle it on/off at any time:



MIF.eventsFollowFrameLinks = false;



This is exactly what I needed! Thanks a lot!

[mystix]

@hendricd, i've given the url adjustment thingy some more thought...

instead of adjusting the relative urls in the web app's transform() method, and subsequently incurring a regex replacement penalty (however negligible) for each dynamically created iframe, wouldn't it be better to perform this adjustment just once in the ux.ModuleManager the instant the resource cache is initialised? we'd already know the relative / absolute paths we'd need to get to our css resources at that point in time.

i.e. the ux.ModuleManager.load() method could accept either a String argument or an Object argument:


mm = new Ext.ux.ModuleManager(... ...);
mm.load(
{'resources/css/ext-all.css', urlAdjustment: '../../resources/'}, // relative/absolute path to ext-all.css
,'adapter/ext/ext-base'
,{'examples/miframe/ext-all', codeAdjustment: function() { ... } } // might be useful for overriding existing hardwired classes (like EventManager for example) with custom ones (like your custom EventManager)
,'examples/miframe/ext-basex'
,{'examples/examples.css', urlAdjustment: '../../custom/css/'}, // relative/absolute path to application specific css
,{'examples/tabs/tabs-example.css' , urlAdjustment: function() { ... }}
,'examples/miframe/transform'
)) {
... ...
... ...
... ...
}


thoughts? :-?

[hendricd]

Yes, that's where I was going with Post #319. Do it in the MM:'beforeload' handler (once).

That provides a great deal more flexibility with replacement patterns and other 'massaging' that way. That's what that handler is for. They may want to strip scripts, add markup, play with charsets, who knows?

But, in this case (feeding IFrames Ext), that approach presents a problem for FF, as it does not honor the frames' owner page site base when the frame document is written using UpdateManager, so you won't know what the relative/absolute replacement needs to be for all browsers in that scenario. A thin use-case probably, but it can be handled either way.

Run the 'via UpdateManager' (from the latest demoPack.zip) on IE vs Gecko, and you'll see what I mean.

:-?

[mchipman]

Hello Everyone:

Can someone quickly demonstrate how to manage state of newly added tabpanels within the miframe demo application. What I would like to do is have any tabs that have been created to be reconstituted automatically when the person returns to the app should they close their browser or goto a different domain and then return back to the web app. I am assuming we are using the state cookie provider.

I thought that this is how it is done, but alas it isn't working:


{ xtype:'tabpanel',
region:'center',
id :'pages',
activeTab: 0,
enableTabScroll: true,
monitorResize: true,
deferredRender : false,
layoutOnTabChange : true,
autoDestroy:true,
stateful :true,
defaults:{
style:{position:!Ext.isIE?'absolute':'relative'}
,hideMode:!Ext.isIE?'visibility':'display'
,closable :true
}
,items:[{title:'FrontPage'
,id:'frontpage'
,autoLoad : {url : 'http://www.mywebsite.com/index.html'
,scripts : true
,nocache : true
}
,tbar:[{
text:'Refresh',
handler: function(){
var panel = Ext.getCmp('pages').activeTab;
if(panel){
panel.getUpdater().refresh();
}
}
}
]
,closable:false
,autoScroll :true
},
]
}

Thanks for any assistance offered.:D

-Mark Chipman

[hendricd]

@mchipman - Whoa! :>

ManagedIframePanel is already state-aware, (last defaultSrc or any time setSrc changes it) but, what you want to do with the tabPanel...

a) has little to do with MIF or its demos.
b) is a non-trivial project (altho cool to see your final solution), as you're thinking about persisting full tabPanel config for replay later.

I would search a bit more on "state tabpanel" and see what you come up with, and move this one to the Help forum for more input.

[mchipman]

Hmmm. Yeah I kind of figured that there wasn't some "automagical" way to do that... I got some ideas to make it happen though.

Thanks alot though for replying!

-Mark

[ajaxE]

This managedIframe is great! I am using it everywhere need to load external style. The on;y problem I have is that the loading mask doesn't started immediately in IE6. But it's fine in FF.

Any idea to show loading mark immediately in IE? The code I am using is as following:


var view = new Ext.TabPanel({
activeTab:0,
defaults:{
bodyStyle:{width:'100%',height:'100%'},
maskEl:'bwrap'},
items: {
title: 'View Screen',
xtype:'iframepanel',
id: 'viewPanel',
defaultSrc:'http://www.google.com',
loadMask:{msg:'Loading...'},
border:false
},
renderTo: 'view-panel',
height:500,
width:1000
});

Thanks for your help!

[hendricd]

@ajaxE - Try this (http://extjs.com/forum/showthread.php?p=128472#post128472). Tweek the the defer value a bit (lesser value is likely better system-wide).

[ajaxE]

@ajaxE - Try this (http://extjs.com/forum/showthread.php?p=128472#post128472). Tweek the the defer value a bit (lesser value is likely better system-wide).

Thanks hendricd for your quick response. It didn't work for me. I removed maskEl:'bwrap' from the default setting but left width and hight.

My problem is that I have a grid panel at the top and when a user select a grid row and click a button, the app loads a new URL into the bottom panel. The load mask is not showing up immediately in IE6. It works perfectly in FF.

Any other thoughts?

Thank you a lot!

[hendricd]

The problem is awkward, because of all the relatively positioned DIVs involved in Panel rendering and IFRAMEs (height:100%,width:100%) don't have a useful height until there is content loaded in them the first time (thus panel.body and bwrap have no height either, thus Element.mask can't center the mask text properly).

You can try playing with maskEl (in loadMask config ;) ):


var view = new Ext.TabPanel({
activeTab:0,
defaults:{
bodyStyle:{width:'100%',height:'100%'}
},
maskEl:'bwrap'},
items: {
title: 'View Screen',
xtype:'iframepanel',
id: 'viewPanel',
defaultSrc:'http://www.google.com',
loadMask:{msg:'Loading...', maskEl:'bwrap'},
border:false
},
renderTo: 'view-panel',
height:500,
width:1000
});

[dawesi]

in the demo pack your references to ext-all.js need changing in the following files:

adviframes.html
iframesdemo.html


from

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

to

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

you should also mention that miframe.js is required for the examples to work and needs to also be extracted here... (just for noobs)

Cheers,
Chris

[dolittle]

I'm not sure if this is in the scope of miframe.

There is a way to perform cross domain commuincation using fragment identifiers (http://tagneto.blogspot.com/2008/01/browser-and-dojo-updates-on-fragment-id.html).

When frame A from domain A wants to send a message to frame B from domain B it creates an iframe and set the source to a proxy.html file from domain B with the message encoded in the hash part:

src="http://domainB/proxy.html#some_message
The proxy.html can pass the message to frame B because they are from the same domain.

If this will be implemented in miframe it could allow extending the cross-frame messaging even when the iframe is from a different domain...!!!

What do you think?

[hendricd]

in the demo pack your references to ext-all.js need changing in the following files:

adviframes.html
iframesdemo.html

from

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

@Chris -- the adviframes.html demo requires a patched (EventManager.js) ext-all.js to be in the /examples/miframe as that is the purpose of the example as outlined here: "Load Ext once, and apply it to your frames" (http://extjs.com/forum/showthread.php?p=120384#post120384).

That said, you're right about iframesdemo.html -- it should reflect src="../../ext-all.js". I'll correct that shortly.


you should also mention that miframe.js is required for the examples to work and needs to also be extracted here... (just for noobs)
That is explained on the the first post (http://extjs.com/forum/showthread.php?p=79491#post79491)of this thread.


@dolittle -- Yes, fragment identifiers are yet another way to pass simple strings between two foreign domains but requires a cooperative effort with a proxy involved.

MIFs' implementation of 'sendMessage' parallels that of the new HTML5 (FF3, Opera (http://ajaxian.com/index.php?s=postMessage&searchbutton=Go), WhatWG (http://whatwg.org/specs/web-apps/current-work/#crossDocumentMessages)) 'postMessage' function (also allows strings only), but supports more complex data structures (native objects and arrays) without the need for a proxy -- the trade off of coarse: same domain only, but it works on all browsers -- today.

[jayghodasara]

Hey hendricd,

I'm trying to accomplish a modal window functionality in which on click of a link on the base window, i want to open a window with a Managed iFrame inside it, and it loads a pageflow (weblogic) and renders a new page. After that UI journey is over and user clicks continue, the modal window should close and the user selected primary key will be used to take the journey further on the base window.

The full issue and discussion (with screen shot) is in this thread:
http://extjs.com/forum/showthread.php?t=27632

It would be great if you could suggest me an approach of how to accomplish this functionality/ behaviour. The only major problem is that all this is a part of Weblogic Portal framework, and hence i cannot fully extjs'ize the page, and i have to keep the pageflow structure, etc.

Thank you so much for any suggestion.

-Jay.

[hendricd]

@jayghodasara -- First an important question:

Is the weblogic-generated page coming from a local(same) domain?

[jayghodasara]

@jayghodasara -- First an important question:

Is the weblogic-generated page coming from a local(same) domain?

Yes, its coming from the same domain but a different pageflow. So i call a pageFlow URL in the src of iFrame load event, and the pageflow gets initialized, sets required environment and returns the jsp.

[hendricd]

@jayghodasara -- Seeing the weblogic response sample would be helpful, but two approaches come to mind:

1) If you were to be using that approach (many times) thoughout your session, you might look at "Load Ext once, and apply it to your frames" (http://extjs.com/forum/showthread.php?p=120384#post120384). It demonstrates how to cache Ext.* on the main page and apply Ext to an embedded frame document after it's been rendered by the frame.

or

2) Scrap the whole IFRAME concept and use the Ext instance that's already loaded on the main page in conjunction with a custom renderer (via UpdateManager on the window.body) to strip out the portion(fragment) of the portal response you wish to render in the body:



var portalResponseHandler = function(el, response ,updater , callback){
//gather the markup fragments you want -- tweak if necessary
var bodyRE = /(?:<body([^>]*)?>)((\n|\r|.)*?)(?:<\/body>)/ig;
var markup;
if(markup = bodyRE.exec(response.responseText) && markup[2] && !!markup[2].length ){
el.update( markup[2], updater.loadScripts, function(){
//apply your scripting to it now...
});
}

if(callback)callback();
};

function openWindow()
{
ulDialog = new Ext.Window({
height: 380,
width: 435,
minHeight: 50,
minWidth: 100,
modal: true,
shadow: true,
collapsible: true,
closable: true,
body: new Ext.ux.ManagedIFrame({autoCreate:{id:'dynamicIframe1',cls:'x-window-body',width:'100%',height:'100%',src:'/portlets/crm/ManageDelegates/ManageDelegatesController.jpf'}}),
animate: true,
title: "Change Owner",
resizable: true,
bodyBorder: true,
buttons: [{text: "Close", handler: function() {ulDialog.hide();ulDialog.destroy();} }],
keys: [{key: 27, fn: function() {ulDialog.hide();ulDialog.destroy();}, scope: this}],
listeners: {
show: function(win){
var um = win.getUpdater();
um.setRenderer({render:portalResponseHandler});
win.load('/portlets/crm/ManageDelegates/ManageDelegatesController.jpf');
}
}
});
ulDialog.show();
}
Option 2 might offer "the path of least resistance", assuming any embedded CSS doesn't pose a problem. ;)

[jayghodasara]

Thank you so much Doug to take time and suggest me a wonderful approach. I too was not very comfortable with the iFrame approach. I'll try out the approach you suggested. The 2nd one seems to be the first try i'll give because i dont have so many such modal window situations in my portal. Only few instances (say 4-5) in the roundly 150 page portal.

[hendricd]

@jayghodasara -- See my previous post revised. Left out an important match operation (markup[2]). ;)

[jayghodasara]

Hi Doug,

I implemented the code you gave, and but it was giving some error at the markup (markup has no properties), so i removed '!!markup.length'.

Now, I got the returned jsp twice inside the modal window (rendered twice). Also, the javascript functions which were there inside the body arent initialized so when i click a component having a JS method call, it fails.

But i dont think this would serve my purpose. Becuase in the JSP, there's a search functionality, and when i search something, the request should go from the window object to the server and response should be caught in the window, and base window remaining unaffected. Would this be possible without an iFrame?

I have attached the response from the server when we opened the window. If you could suggest a possible way to to this it could really make my life a lot easier!! thank you so much!

[hendricd]

It helped seeing the actual page. There is a lot of script spread around the response. Try extracting between the <HTML> tags (instead of body):


var portalResponseHandler = function(el, response ,updater , callback){
//gather the markup fragments you want -- tweak if necessary
var bodyRE = /(?:<html([^>]*)?>)((\n|\r|.)*?)(?:<\/html>)/ig;
var markup;
if(markup = bodyRE.exec(response.responseText) && markup[2] && !!markup[2].length ){
el.update( markup[2], true , function(){
//apply your scripting to it now...
});
}

if(callback)callback();
};

[jayghodasara]

I didnt get you. Should I give you the response after removing the javascript code from it?
If yes, then please find attached just the html part of the response.

The revised responseHandler code you provided also gave the same error:

markup has no properties
(no name)(Object dom=div#ext-gen30.x-window-body id=ext-gen30, Object tId=0 status=200 statusText=OK, Object el=Object, undefined)main.portal (line 2307)
Updater(Object tId=0 status=200 statusText=OK)ext-all.js (line 18)
apply(function(), Object el=Object, [Object tId=0 status=200 statusText=OK, Object], undefined)ext-base.js (line 9)
Connection(Object tId=0 status=200 statusText=OK)ext-all.js (line 17)
getViewWidth(Object conn=XMLHttpRequest tId=0, Object scope=Object argument=Object timeout=30000, undefined)ext-base.js (line 10)
getViewWidth()ext-base.js (line 10)
[Break on this error] animate: true,

Also, could you tell me that would the functionality required by my application be accomplished with this? I mean to say we want to send a search request from the modal window to the server and the response should come to the modal window and NOT the base window. Because the pageflow of the base window will be destroyed and hence will need to be reinitialized.

[hendricd]

Because the pageflow of the base window will be destroyed and hence will need to be reinitialized.
You should leave in all the scripts in the portal response, so that updateManager can inject them into the Window.body.

The problem is the regex pattern I gave you isn't correct for extracting the markup within <HTML> tag... (thats the tweaking I spoke of ;) )

I'll see if I can get the right one.....



al window to the server and the response should come to the modal window and NOT the base window. Because the pageflow of the base window will be destroyed and hence will need to be reinitialized.
Great, what does that response look like?

[jayghodasara]

The response for that will be almost similar to the previous response. Only change would be that it would contain an additional pageflow variable containing the JSON object to be populated in the datagrid. So in the previous response too, the jsp contained code that if the response contains a JSON object for the grid, then it renders the data grid. So i think there would be not change in the response. It would be the same.

But one thing to be noted is that the main window (behind the modal window) was a different page (jsp) which came as a response from a different pageflow, and hence that cannot be brought back. We would only get to-fro request-response for the content inside the window. The back grayed out window would remain the same till we close the modal window. Once we close it, the javascript on the main window will make a call to the corresponding new pageflow and the response will render on the main page.

[hendricd]

I suck at regex, but try this one:


var portalResponseHandler = function(el, response ,updater , callback){
//gather the markup fragments you want -- tweak if necessary
var bodyRE = /<html\b[^>]*>(.*?)<\/html>/i ;
var markup;
if(markup = bodyRE.exec(response.responseText) && markup[1] && !!markup[1].length ){
el.update( markup[1], true , function(){
//apply your scripting to it now...
});
}

if(callback)callback();
};


Really should move this track to another thread...

[mystix]

@hendricd, try this simplified version:


el.update(response.responseText.replace(/<html\b[^>]*>(.*?)<\/html>/i, "$1"), true , function(){
//apply your scripting to it now...
});

the "$1" simply tells the String.replace() method to replace the first regex match with the 1st backreference.

[edit]
err.. does it matter if there's nothing between the <html></html> tags?
will there be nothing in the 1st place? :-?

[jayghodasara]

The regex worked fine and didnt give any errors. But also, nothing displayed inside the window. The 'loading' image stayed ON.

Am i supposed to put some script code inside the el.update function()?

[hendricd]

Try mystix variant. (Thanks mystix).

The loading indicators' presence means my HTML pattern match didn't return something (or !!markup.length failed again).

[hendricd]

@jayghodasara -- Are your portal responses likely to contain the duplicate Element id's ?

If so, you may be back to considering Option 1 !

[jayghodasara]

Great!!! Thanks Doug and Mystix!!!! Now what I got is a fully functional page inside the window. So most of the normal javascript components inside the window are working.

Now, I just checked, that Ext Component inside the window didnt work. For example, there was a grid inside that page, so it gave an error 'this.el has no properties'. Not sure the reason of this.

The portal responses will not contain duplicate element ID's. Because the new response shuold overwrite the existing one.

[hendricd]

Now, I just checked, that Ext Component inside the window didnt work. For example, there was a grid inside that page, so it gave an error 'this.el has no properties'. Not sure the reason of this.I noticed that in your response.txt:


var grid = new Ext.grid.GridPanel({
el:'datagrid',
datagrid is not defined anywhere in the response markup.

[jayghodasara]

I'm sorry for being not much literate in the UI stuff. Can you please tell me where do i need to declare this in markup? Because without this modal window, the page renders the grid just fine when its on the main window.

[hendricd]

Don't even need it:



var grid = new Ext.grid.GridPanel({
el:'datagrid',

GridPanel will create the element(s) for you.

[jayghodasara]

Don't even need it:



var grid = new Ext.grid.GridPanel({
el:'datagrid',

GridPanel will create the element(s) for you.

I too thought the same and had removed it. But when I removed the 'el', it gives a 'H has no properties' error.

[hendricd]

switch to Ext-all-debug.js and resume the standard debugging process. Got FF and Firebug?

[TheTinkeringToad]

Well i do appreciate your quick response.
Though your comments i do believe are a bit out of order.
As this is a grid that you have created for the managed iframe.
I thought it was completely appropriate to post here in this thread as i have seen others do.
Though i may have used the wrong syntax for the code tag in this forum i was unaware of the difference in this forum as with many others using the basic html code tag will work just fine.
Excuse me if i have offended you in any way. But i do have to say i have gone to many forums of the years and usually when a sub project of a main project has a distinct set of postings that is usually the place to go.
To go to the basic help forum on your managed iframe would lead to the help forum for extjs with a post that will only be answered if someone has used or worked with your managed iframe.
I am sorry there is no child forum for this project for a help area.
As far as the comment about the 4 hours to decipher what i have done.
Well as this post was about managed iframe and this js file is distinct to the managed iframe and it is in its original form except for some changes i made which if someone was familiar with this file that would be able to go to the proper areas of the file that actually needs to be addressed. By posting in a general help form for extjs would probably take someone at least that amount of time to become familiar with your file. Again that is why i posted here.
Which in many tech forums on the net is not considered thread hijacking due to its inherent parent being the main topic of the thread.
Sorry for bothering to waste your time or anyone else's in regards to your managed iframe.

[jayghodasara]

Update:
I solved that error. I used a renderTo param instead of el. It worked fine!!!

I'm using FF, Firebug, ext-all-debug. (I was using ext-all.js earlier, so i just renamed the ext-all-debug to ext-all.js and using it.)

The error which firebug shows is:
H has no properties
ext-all-debug.js
Line 76 (Ext.Panel=Ext.extend(.....)

[spectrus]

Hello,

Got the iframes demo working, really neat stuff. Just have a difficulty figuring out how two of the ManagedIframePanel's methods ('setSrc' and 'update') function. Will much appreciate it if someone clears up my doubts. The idea is to be able to load some HTML from somewhere else inside an ExtJS window.

My simple layout: a window with two panels, 'west' and 'center'. The 'center' contains a TabPanel declared as an iframepanel with some tabs (the tabs are sharing a toolbar):



var tabs = new Ext.TabPanel({
id: 'center',
region: 'center',
deferredRender:false,
defaultType:"iframepanel",
xtype:'tabpanel',

items:[{
title:"Google",
id:'google',
defaultSrc: 'http://www.google.com/'
},{
title:"Shmoogle",
id:'shmoogle'
}]
});


On the left ('west') there's a form with two buttons, one calls the update:

tabs.getActiveTab().el.update( '<div>New HTML content</div>' );

The second button calls the setSrc():

tabs.getActiveTab().setSrc('http://yahoo.com/');

It basically works, but some of the behaviour is unclear:


when updating a tab with HTML content, its (and only its) toolbar disappears (need to re-render it somehow?).
calling setSrc() after update() on the same tab gives me a 'win has no properties' in the checkDOM method of miframe.js
in the example there's a 'return' button (something like a 'back' button) whose behaviour I tried to emulate in each tab's toolbar. It also uses setSrc(). After calling setSrc with my own button on a tab, it's 'return' function( Ext.getCmp('center').activeTab.setSrc() ) stops working.


Perhaps I just don't have enough knowledge about how rendering/composing/refreshing of elements works in ExtJS and don't set/pass some parameters somewhere. So any and all tips on general functionality of the framework (examples/tutorials) are absolutely invaluable.

Thanks!

[hendricd]

@jayghodasara -- Good to hear. Press on! =D>

@spectrus:



On the left ('west') there's a form with two buttons, one calls the update:
Code:
tabs.getActiveTab().el.update( '<div>New HTML content</div>' );
That should be:


tabs.getActiveTab().getFrame().update( '<div>New HTML content</div>' ); .. which is why:
calling setSrc() after update() on the same tab gives me a 'win has no properties' in the checkDOM method of miframe.js occurs because you previously wiped out the entire tab container (including the iframe), thus there is no longer a 'win' for checkDOM to use. ;)

The API docs for UpdateManager (aka Updater) shows how the update and load methods function on any Ext managed element.

Also review the ManagedIframe Documentation Wiki (http://extjs.com/learn/Extension:ManagedIframe).

[spectrus]

@hendricd -- Thank you very much! Not enough reading, too much trying to get things working right away. Excellent resources.

[jayghodasara]

Thank you sooo much Doug for your time and efforts! You're just awesome!!

Btw I have decided to change my approach regarding catching response from the server when I make a request from the window. What I really need is the search records retrieved by the server. So if I could make an Ajax call from the modal window to the server and I get the text response (json) back, then I would directly update the contents of the grid.

This looks to be achievable with some efforts. So i'll try this approach first before spending time to make a iFrame.

Also, could you tell me how can I access the selected rows in the grid from the main window? I would have the window object as well as the name of the grid?

[hendricd]

Give all your important Layout components ID's. Since they all live in the same Ext namespace now, you can hunt them down wherever they hide. :)

=Ext.getCmp('modalResultsWin').....

=Ext.getCmp('resultsGrid').getSelectionModel().getSelections()

... would get you that list.

Look at the Grid:RowselectionModel docs and src for more ways of handling selections.

[mjlecomte]

...
Though your comments i do believe are a bit out of order.
As this is a grid that you have created for the managed iframe.
I thought it was completely appropriate to post here in this thread as i have seen others do.
Though i may have used the wrong syntax for the code tag in this forum i was unaware of the difference in this forum as with many others ....

You have the ability to edit your post, go to it, click edit, and change the tags. But, better yet, just delete your message and say "moved to another forum". The code you posted came from another completely separate example, nothing to do with managed IFrames (this thread). If you post in your own thread and post a link to your new thread in the thread that you got that code from (http://extjs.com/forum/showthread.php?t=18435) you might get more appropriate help.

When you post inside code or php tags the forum engine will add a smaller block with scrollbars instead of taking up oodles of space.

[mystix]

Can somebody with authority move this post (http://extjs.com/forum/showthread.php?p=130292#post130292) to Help 2.0?

Thanks.

moved to 2.x Help.

[jayghodasara]

Hey Doug,

do you have any idea about this query of mine??
thanks for all the help you have provided.

http://extjs.com/forum/showthread.php?t=27778

Thanks,
-Jay.

[hendricd]

Why don't you open a new thread (on the Help 2.0) on the subject, and we'll start over there...

[jayghodasara]

Why don't you open a new thread (on the Help 2.0) on the subject, and we'll start over there...

There am I! (2.0 Help)
Thank you so much!

[TheTinkeringToad]

Well if i have and it seems i have gotten mixed up on what was going on i appoligize if i seem to have been wrong in the assumption of the iframe including the grid.
It seems i have gotten my examples mixed up while trying to figure some things out.

[dsorre]

I'm not sure if this is something that can be addressed, however I have a managed Iframe in a window and the actual Iframe Src looks beveled/shadowed into the body of the window.

Is there a way to remove that "IFrame shadow"?

Thanks for the continued help!

[hendricd]

@dsorre - That would depend on what style options were defined by the embedded document and/or the MIFPanel that hosts it.


Do you have a site I could see in action?

[hendricd]

for Cross-Frame Messaging (http://extjs.com/learn/ManageIframe:Manual:Frame_Messaging) is up.

[dsorre]

Unfortunately it's all on my localhost currently...

I realize it won't make sense to post 1000s of lins of code here :) so I'll just see if I can figure it out somehow, I was just wondering if anybody has noticed something similar and modified it on their end.

Thanks for your prompt response as usual, Doug :)

[svdb]

Hi,


I'm currently playing with listeners to do some cross-iframe talking. Works like a charm on FF (of course).

I noticed however that on IE calling getDocument works better than calling getWindow to plug listeners:



,listeners:{
documentloaded: function(frame) {
Ext.EventManager.on(frame.getWindow(), 'click', handler );
}

In the above (pretty standard) code, the handler doesn't get wired/called on IE.
Using frame.getDocument seems to work though.

Am I missing something, or should getWindow simple not be used?

Thanks,
SV

[smcguire36]

I created a tab panel that uses managed iframes for the contents of the tabs. In Firefox, resizing the window (both larger and smaller) properly resizes the iframe to match the new size of the tabpanel.

However, in IE6 and IE7 I am experiencing weird results all related to width.

IE6

I can make the IE window larger and the iframe will resize accordingly but I can't resize it smaller. The iframe width remains the size that it was.

IE7

The results are exactly opposite that of IE6 but maybe for a different reason. I can make the window smaller and the iframe will resize accordingly, but if I make the window larger, the iframe width remains the smaller size. But in looking at it more, I realized that the whole TabPanel remained the narrower width! There appears to be a bug in the resize of the TabPanel in IE7.

Additionally, the iframe in the first tab comes up with a width of 0px that doesn't change no matter what.

Any comments, fixes, help?

--Stewart

[hendricd]

@Stewart -- I'd slap the whole tabPanel in a center-region-only Viewport and be done with it. ;)

The hard way is elsewhere (allover) the forums.

@svdb -- Now, you knew you couldn't set DOM listeners ('click') on the window object, right?

[smcguire36]

@Hendricd

I already have the tabpanel in a viewport as the center region and I have a top region as well with a page title in it. It is a border layout viewport. Should I be using a different layout?

--Stewart

[svdb]

@svdb -- Now, you knew you couldn't set DOM listeners ('click') on the window object, right?


Errr... no :D

I'm really not a JS coder, I'm just learning about JS, DOM etc. (And it works on FF. :-? )

[hendricd]

@svdb :
. (And it works on FF. :-? )It works on FF only because Gecko's addEventListener never throws exceptions (no matter what you throw at it). I'd be willing to bet the click event handler isnt actually raised :-?.

@smcguire36 - You tabPanel config just needs a little scrutiny. Post it.

[smcguire36]

@Doug

Here is my Viewport/TabPanel/MIFrame code.



var vp = new Ext.Viewport({
id: 'ContentViewport',
layout: 'border',
defaults: { activeItem: 0},
renderTo: document.body,
autoWidth: true,
style: 'background-color:gray',
items: [{
region: 'north',
html: '<h2 style="padding: 5px; font-size:14pt;">O&amp;M Document</h2>',
autoHeight: true,
border: false
}, {
region: 'center',
xtype: 'tabpanel',
autoScroll: true,
id: 'ContentTabs',
autoWidth: true,
shadow: false,
hideBorders: true,
enableTabScroll:true,
plain: true,
defaults: {autoScroll:true},
plugins: new Ext.ux.TabContextMenu()
}]
});

var tabs = Ext.getCmp("ContentTabs");
var newtab = "";

tabs.add({
id: 'Tab_8681',
title: 'Purpose',
iconCls: 'tabs',
xtype: 'iframepanel',
loadMask: true,
closable: false,
defaultSrc: 'http://mcguire-l205393/ss/newtowncreekias/dbIASv4/index.cfm?FuseAction=Content.DisplaySectionContent&DocId=8681'
}).show();

tabs.add({
id: 'Tab_8682',
title: 'System Description',
iconCls: 'tabs',
xtype: 'iframepanel',
loadMask: true,
closable: false,
defaultSrc: 'http://mcguire-l205393/ss/newtowncreekias/dbIASv4/index.cfm?FuseAction=Content.DisplaySectionContent&DocId=8682'
}).show();


Thanks for taking a look at this.

--Stewart

[svdb]

@svdb : It works on FF only because Gecko's addEventListener never throws exceptions (no matter what you throw at it). I'd be willing to bet the click event handler isnt actually raised :-?.

My FF is 2.0.0.6

I have a sample page which demontrates the handler gets called on FF using getWindow.
(See attachement)

What do you want to bet? :)

[smcguire36]

@hendricd

I found my problem. I removed the autoWidth:true and autoHeight:true from my tabpanel items and voila, it works correctly now!

Thanks to Animal for pointing out to someone else in another thread that if you have components nested within layouts, you don't need to manage the size of the components, the layout manager does that for you.

--Stewart

[hendricd]

Glad you found it. A few other things I noticed:


var vp = new Ext.Viewport({
id: 'ContentViewport',
layout: 'border',
defaults: { activeItem: 0},
renderTo: document.body, NNooo ! don't use renderTo in a layout pattern !
style: 'background-color:gray',
items: [{
region: 'north',
html: '<h2 style="padding: 5px; font-size:14pt;">O&amp;M Document</h2>',
autoHeight: true,
border: false
}, {
region: 'center',
xtype: 'tabpanel',
autoScroll: true,
id: 'ContentTabs',
autoWidth: true,
deferredRender : false, //to load ALL frames immed
layoutOnTabChange : true,
shadow: false,
hideBorders: true,
enableTabScroll:true,
plain: true,
defaults: {autoScroll:true //iframes have their own scrollers

},
plugins: new Ext.ux.TabContextMenu()
}]
});

var tabs = Ext.getCmp("ContentTabs");
var newtab = "";

tabs.add({
id: 'Tab_8681',
title: 'Purpose',
iconCls: 'tabs',
xtype: 'iframepanel',
loadMask: true,
closable: false,
defaultSrc: 'http://mcguire-l205393/ss/newtowncreekias/dbIASv4/index.cfm?FuseAction=Content.DisplaySectionContent&DocId=8681'
}).show();

tabs.add({
id: 'Tab_8682',
title: 'System Description',
iconCls: 'tabs',
xtype: 'iframepanel',
loadMask: true,
closable: false,
defaultSrc: 'http://mcguire-l205393/ss/newtowncreekias/dbIASv4/index.cfm?FuseAction=Content.DisplaySectionContent&DocId=8682'
}).show();

[hendricd]

This release adds tag-based message filtration to the cross-messaging API.

demoPack.zip has been updated for use with the new ux.ModuleManager (included with ext-basex), and examples expanded further.

[smcguire36]

@Hendricd

Thanks for the tips. I made those changes, although it doesn't seem to have made any difference in the tabpanels.

I have another question though:

When the panels/iframes first load, the width is set perfectly and there is no horizontal scrollbar. When I resize the window, suddenly a horizontal scrollbar appears. That would make sense if there was something wide in the content that wasn't wrapping, but I have nothing like that. Also, when I resize back to the original size, the horizontal scrollbar does not go away. The horizontal size always appears to be just slightly larger than the iframe and hence gives two scrollbars. Is this an artifact of the iframe in IE6?

Also, in FF and IE7 when the panels are first rendered, the iframe is just slightly too long and the vertical scrollbar's bottom arrow is missing off the bottom of the screen. As soon as I resize the FF or IE7 window, the scrollbar appears normally.

[hendricd]

@smcguire36 -- As the default computedStyle for MIF in a panel is :

height:100%;width:100%;overflow:auto;

You should not be using autoScroll:true on the any of the tabPanel frame configs because, as I mentioned earlier, the frame will manage it's own scrollers with those style rules in effect.

These are usually the recommended defualts I like to use for tabbed Iframes. The extra listeners enable MIF's built-in shimming (so the frame doesn't bleed thru another tab when activated and 'hideMode:visibility' keeps the frame from refreshing on Gecko when changing tab focus:



...
xtype:'tabpanel',
id:'sites',
defaultType: 'iframepanel',
defaults:{
closable:true,
loadMask:{msg:'Loading Site...'},
bodyStyle:{width:'100%',height:'100%'},
autoShow:true,
style:{position:'absolute'},
hideMode:'visibility',
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();
}
}...

[hendricd]

This release adds fitToParent config item (Condor prompted that idea!) to MIFPanel (for free-standing MIFPanels only)

Time to update the Doc Wiki some more.. /:)

[mystix]

This release adds fitToParent config item (Condor prompted that idea!) to MIFPanel (for free-standing MIFPanels only)

Time to update the Doc Wiki some more.. /:)

woah... congrats! =D>

p.s. what are "free-standing" MIFPs :-/

[hendricd]

p.s. what are "free-standing" MIFPs?

MIFPanels that do not participate in a layout.

[jayghodasara]

Hey Doug,

I'm using your managed iFrame inside a window as a body element, and there is an html rendered inside the miFrame. Based on some value in my html page, I would like to close the iFrame/window and go to the main page(page where the window was rendered). How can I do that with a javascript code inside the html rendered in miFrame?

I access the javascript method inside the iFrame from the main window by:
var ifrm = Ext.get("iframeid");
ifrm.dom.contentWindow.validateAndSave();

Now if I am trying to call a closeWindow method in my basewindow to close the window, it gives me an error that method does not exist for the object.
I did:
window.parent.closeWindow().

And closeWindow does:
{
mifDialog.hide();
mifDialog.destroy();
}

Thanks for the help,
-Jay

[hendricd]

By far, the easiest way is to just send a message (http://extjs.com/learn/ManageIframe:Manual:Frame_Messaging) (MIF version 1.03 or higher) :



window.body = new Ext.ux.ManagedIFrame({
html:???,
src: ????,
disableMessaging : false,
....
});

window.body.on( 'message:finished', function(message){
this[this.closeAction]();
},window);

then, when you're ready, your embedded page just yells out:

[window.]sendMessage( anything, 'finished' );

Just to add, to invoke a function hosted by your frame easily, you could use:



var ifrm = Ext.get("iframeid");
var res = ifrm.execScript("validateAndSave()");
or
res = ifrm.getWindow().validateAndSave();
For the reverse (to the frames host), make sure that any global functions are declared as such:

var closeWindow = function(){ .... };
not: function closeWindow(){ .... }

so they are resolvable when using:

parent.closeWindow()

[jayghodasara]

Very good explained!! Thanks so much.. i'll try it out.. the message property in 1.03 onwards is great!

[jayghodasara]

Hey Doug,

I just cant figure out what am I doing wrong here. Problem is that I get the src response inside the iframe which is rendered inside a window, but the call to the server is made 2 times. I.e. once when 'new Window()' is executed and once again when 'window.show()' is done. I'm not sure how to include the iFrame to not do this. Also, I noticed that before the window.show(), the iFrame src is loaded on the bottom of the page, which disappears after doing window.show().


function openIFrame(){
ulDialog = new Ext.Window({
height: 350,
width: 470,
scrollable: false,
modal: true,
shadow: true,
collapsible: false,
closable: true,
body: new Ext.ux.ManagedIFrame({autoCreate:{id:'dynamicIframe1',cls:'x-window-body',disableMessaging : false,scrollbars:false,deferredRender:true,border:false,bodyBorder:false,width:'100%',height:'100%',src:'/portlets/scheduling/presentationUpload/PresentationUploadController.jpf'}}),
animate: true,
title: "Add New Presentation",
resizable: false,
draggable: true,
bodyBorder: false,
border: false,
buttons: [{text: "Cancel", handler: function() {ulDialog.hide();ulDialog.destroy();} },
{text: "Upload", handler: uploadFileToServer }],
keys: [{key: 27, fn: function() {ulDialog.hide();ulDialog.destroy();}, scope: this}]
});
ulDialog.body.on('message:finished', function(message){alert('test');},ulDialog);

ulDialog.show();
}

var closeWindow = function(){ulDialog.hide();};


I'm trying to call the messagin from the page inside the iFrame, but i am just not able to get the sendMessage method working. I am using 1.03 version.


Ext.get("testBtn").on('click', function(e){
window.sendMessage('this is test', 'finished');
});



Please see an attached image of what I am trying to accomplish. On click of Upload presentation, i'll stream the file to httpclient on my server from where i'll further stream it to other external server.

[hendricd]

If this is on FF: it has a nasty habit of refreshing an IFRAME (or OBJECT) Element any time its resized/moved (in your case during window.show). You were actually rendering the iframe before the rest of window was visible, so the frame moved around twice during window.render, causing the extra refresh.

Consider the MIFPanel instead. Since it inherits from Panel, the defaultSrc is not applied until after layout/rendering.



function openIFrame(){
ulDialog = new Ext.Window({
height: 350,
width: 470,
scrollable: false,
layout: 'fit',
modal: true,
shadow: true,
hideMode: 'visibility',
collapsible: false,
closable: true,
items : {
xtype:'iframepanel',
frameConfig :{id:'controllerFrame'},
disableMessaging : false,
hideMode:'visibility',
id:'upController",
defaultSrc:
'/portlets/scheduling/presentationUpload/PresentationUploadController.jpf',
listeners: { 'message:finished': function(srcFrame, message){alert(message.data);} }
},
animate: true,
title: "Add New Presentation",
resizable: false,
draggable: true,
bodyBorder: false,
border: false,
buttons: [{text: "Cancel", handler: function() {ulDialog.hide();ulDialog.destroy();} },
{text: "Upload", handler: uploadFileToServer }],
keys: [{key: 27, fn: function() {ulDialog.hide();ulDialog.destroy();}, scope: this}]
});


ulDialog.show();
}

var closeWindow = function(){ulDialog.hide();};
If you're still having troubles with this config, zip up a page fragment with an example. ;)

[jayghodasara]

The code snippet just worked great and it exactly solved the problem of calling the server twice. Now it is calling only once, and window coming up properly. (The listener declaration was giving some error, which i commented it out for now.)

Also, I'm not getting the iFrame object now to call the script inside the panel.
var ifrm = Ext.get("dynamicIframe1");
ifrm.getWindow().validate();

This code didnt work!
Also, I still couldnt get the code to work where I am calling a method in parent window from inside mipanel.

Anyways i think I'll send you a code zip for you to get a better look.

Thank you sooo much for all the help! I hope I can be of some help for others after I learn from you!!!

[hendricd]

Since you've changed to MIFP, your API has changed slightly:



Ext.getCmp("upController").getFrameWindow().validate();
'upController' is the ID I gave the MIFP in previous post. ;)

I just edited the previous post slightly, check for relevant changes...

[KENT]

Hi Doug,
I added a button, now I want to refesh the above frame named 'ContentPanel' when I click on it and I want to get the ID of a active MIF, what should I do now ?

[hendricd]

@Kent -- Do yourself a favor. Post a little code frag or something to see, huh? /:)

[jayghodasara]

Hey Doug,

I implemented the required functionlity which is working perfectly now. Thank you for the bang-on-target suggestions.

I had an issue with window.sendMessage() method call in case of firefox. What happened is that after the iFramePanel is rendered, if I click a button which calls the window.sendMessage() that worked perfect on FF and IE. But I had a different scenario. The user submitted a form and clicked save, the server returned a jsp in response and I would call the window.sendMessage() to close the iFramePanel window onLoad of the page if the page returned success. This worked fine in IE, but in FF it always gave window.sendMessage is not a function error because i think it was executing before the full page was loaded.

So I just put a condition that if(!window.sendMessage) then put a looping setTimeout to take care of this issue:

var loopCount = 0;
var waitTimerFunction = function(){
setTimeout(function(){
if(window.sendMessage){
loopCount = 0;
window.sendMessage('Owner Created','finished');
}
else{
if(loopCount <3){
loopCount = loopCount + 1;
waitTimerFunction();
}
}
} ,500);
};


This works correctly now, and I think there are not any implications of the workaround.

Also, I would like to know one thing about the miFramePanel. Is there any config which I can set in the declaration from where I can set for bottom scrollbars not to appear? I put scrollable=false but made no difference. The problem is that the page renders as per my specs in IE, but in FF it brings up scrollbars (see attached images).

[hendricd]

The documentloaded event could trigger that action for you as well:



items : {
xtype:'iframepanel',
frameConfig :{id:'controllerFrame'},
disableMessaging : false,
hideMode:'visibility',
id:'upController",
defaultSrc:
'/portlets/scheduling/presentationUpload/PresentationUploadController.jpf',
listeners: {
'message:finished': function(srcFrame, message){alert(message.data);} //not needed now !
documentloaded: function(frame){
if(frame.domWritable() && frame.getWindow().newFileWasPostedOK ){
ulDialog[ulDialog.closeAction]();
}
}
}
},
Sounds like domready may not be firing quickly enough (on FF) to get MIFs' messaging API in place for onload. I'll check it out....


but in FF it brings up scrollbars (see attached images).those scrollbars you're seeing might be the window's. Firebug:inspect them to see who's .body they belong to. :-?

[jayghodasara]

I guess the scrollbars are inherited from .x-panel-body from what i saw in firebug. Is there any way to bypass that?

About the documentLoaded method, I tried the following code which didnt do anything, i.e. there was no error in firebug, but it didnt trigger the closeAction. Here's the code:

Main window (opening of the panel):

items : {
xtype:'iframepanel',
frameConfig :{id:'controllerFrame', disableMessaging : false},
id:'dynamicIframe1',
hideMode:'visibility',
scrollable: false,
defaultSrc: '/portlets/usermgmt/userAdministration/UserAdministrationController.jpf',
listeners: {
documentloaded: function(frame){
if(frame.domWritable() && frame.getWindow().newFileWasPostedOK){
closeWindow();
}
}
}
},

var closeWindow = function(msg){ulDialog.hide();Ext.getCmp("dynamicIframe1").destroy();ulDialog.destroy();};


Code inside the iframepanel:


var newFileWasPostedOK = function(){
if(document.getElementById(getNetuiTagName("adminUserConfPopupStatus",this)) != null &&
document.getElementById(getNetuiTagName("adminUserConfPopupStatus",this)).value == 'true'){
return true;
}
}

[hendricd]

Did it work on IE?

Try:
if(frame.domWritable() && frame.getWindow().newFileWasPostedOK())

Also, destroy is done for you with MIFP:

var closeWindow = function(msg){
ulDialog.close();
Ext.getCmp("dynamicIframe1").destroy();
ulDialog.destroy(); //happens on window.close anyway
};


Uh oh, what did you have to do here? ;) getNetuiTagName(

[jayghodasara]

The old code didnt work in IE either.

frame.getWindow().newFileWasPostedOK()
and
frame.getFrameWindow().newFileWasPostedOK()

both give error at time of load itself that its is not a function. In both, FF and IE.



Netui is just a tagLibrary which is an extension of struts taglibs by Bea Weblogic. It is used to maintain a pageflow architecture which would main the form variables/values, states, callbacks etc throughout the application/ pageflow life cycle.

[hendricd]

autoScroll should be false on the window, and thats already the default for MIFP as well.

[hendricd]

The getFrameWindow method is unique to the Panel, use MIF.getWindow() or MIFP.getFrameWindow().

Try this listeners block:



listeners: {
domready: function(frame){
console.log (['domready' , frame.id, frame.domWritable()]) ;

},
documentloaded: function(frame){
console.log (['loaded' , frame.id, frame.domWritable()]) ;
if(frame.getWindow().newFileWasPostedOK() ){
closeWindow();
}
}
}



... so we can tell what's fired and not ?

[jayghodasara]

["domready", "ext-gen55", true]
["loaded", "ext-gen55", true]

frame.getWindow().newFileWasPostedOK is not a function
http://localhost:7001/main.portal?_nfpb=true&_pageLabel=lblAdministerRoles&_nfls=false
Line 220

[hendricd]

How and where in the embedded page is newFileWasPostedOK defined?

[jayghodasara]

How and where in the embedded page is newFileWasPostedOK defined?

I'm sorry!! it was my mistake. The method wasnt declared globally.. it was inside Ext.onReady block. I moved it out and it worked fine. But I dont know the reason, in FF it keeps on processin something after the window is closed.

it keeps the progress bar of FF continuosly ON and it says 'read localhost' so i guess its waiting for some reply. It doesnt do that in IE.

[hendricd]

hmm ,may have a bad url for s.gif in there, or a markup problem with your post results.

Keep huntin!

[jayghodasara]

hmm ,may have a bad url for s.gif in there, or a markup problem with your post results.

Keep huntin!

I guess the problem this time again is from where we started. In FF, the loading is taking time or what I'm not sure, but this setTimeout in the listener did the job:


documentloaded: function(frame){
if(frame.getWindow().newFileWasPostedOK()){
setTimeout(function(){
closeWindow();
} ,100);
}
}

[hendricd]

Yes, looks like the frame is being torn down during the main documentloaded event handler as a result of your closeWindow() (which is likely why the sendMessage didn't work, the API hooks got destroyed just prior to frame destruction!)

You might try the original sendMessage again approach (if you have the nerve) with:

closeWindow.defer(100) works well too (same thing).


I may need to make that documentloaded event asynchronous, hmm.. :-?

Glad to see you got things working, tho.

[jayghodasara]

About the sendMessage, I'm going to keep both this approaches in my application at different scenarios. The documentLoad serves best to trigger the window events while sendMessage will help a lot in communication with iFrame.

Thanks Doug for this wonderful MIF plugin. It just makes life a lot easier!!! More than a year back I had built such kind of a iFrame from scratch in my project which resulted in a very crappy UI. MIF plugin just blends with Ext making it breeze to work with.

Keep up the good work!!! I thought about using ext-basex, but it doesnt have a little cross-domain ajax communication which makes it not exact to serve my purpose. I thought about one thing, that when normal HTML lets you submit a form with even a multipart-request to external server, there could be a tweak to play with Ajax engine to do that. I'm thinking about spending time with that if I get a chance to do it.

[hendricd]

I thought about one thing, that when normal HTML lets you submit a form with even a multipart-request to external server, there could be a tweak to play with Ajax engine to do that. I'm thinking about spending time with that if I get a chance to do it.ext-basex is designed to operate under the data.Connection layer to provide additional low-level) goodies for AJAX. It's not really the place (yet?) to create yet-another scriptTagProxy. Given the same-origin policy we have to live with currently, scriptTagProxy will work just fine if you can convince your remote domains to wrap EVERYTHING in function call for the <SCRIPT> tag.

Unless your have a need for:
synchronous XHR,
custom form encoding,
want to handle events based on http Status (session timeouts, etc)
need support for all HTTP verbs ( HEAD, PUT, etc)
local-file-system support.
access to XHR-httpAuth (user, password)
Authentication cache cleanup.. you would not benefit much by including ext-basex.js.

Press on!

[KENT]

@Kent -- Do yourself a favor. Post a little code frag or something to see, huh? /:)


new Ext.TabPanel({
activeTab:0,
deferredRender:true,
layoutOnTabChange:true,
plain:true,
autoScroll: true,
items: [
{
title: 'Trade',
id: 'tradeonline',
xtype:'iframepanel',
closable:false,
loadMask:{msg:'Loading'},
defaultSrc:'page.to.php',
buttons: [{text: "Reload", handler: function() {Ext.getCmp("tradeonline").getFrameWindow().document.location.reload() }}]

},{
title: 'Execed Trans',
id: 'ExedTrans',
xtype:'iframepanel',
closable:false,
loadMask:{msg:'Loading'},
defaultSrc:'page.et.php',
buttons: [{text: "Reload", handler: function() {Ext.getCmp("ExedTrans").getFrameWindow().document.location.reload() }}]
}]
})


As you see, I put two buttons to reload MIF. Now I want to used only one button to reload the activeTab but I wonder how to get the ID of the activeTab. Thank you in advance

Sorry for my bad english.

[hendricd]

Try:


buttons: [{text: "Reload", handler: function() {Ext.getCmp("tradeonline").setSrc() }}]
or

if(tabs.activeTab) tabs.activeTab.setSrc();

[ignatius]

var win = desktop.createWindow({
id: 'your-Iframewin',
title:'Managed Iframe Window',
width:740,
height:480,
body: new Ext.ux.ManagedIFrame({autoCreate:{id:'dynamicIframe1',cls:'x-window-body',width:'100%',height:'100%',src:'yourpage.html'}}),
shim:false,
frame:true,
animCollapse:false

});

win.show();


Doug,

Forgive my ignorance... I'm still trying to get my head around ExtJS. But is it possible to have inline ExtJS script in yourpage.html (in your example quoted above). Reading thru masses of documentation and I think I saw somewhere that you can have Ext.onReady (or not).

Using your example above for the 2.0+ desktop example, I have a PHP script in place of yourpage.html which generates a fully formed html page with inline ExtJS script:


<html>
<head>
...
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();

var actions = new Ext.Panel({
Frame:true,
title: 'MyActions',
collapsible:true,
contentEl:'actionpanel',
titleCollapse: true
});
});
</script>
</head>
<body>
<ul id="actionpanel" class="x-hidden">
<li>
<img src="images/s.gif" class="icon-add"/>
<a id="action-add" href="#">Add</a>
</li>
<li>
<img src="images/s.gif" class="icon-view"/>
<a id="action-view" href="#">View</a>
</li>
<li>
<img src="images/s.gif" class="icon-test"/>
<a id="action-test href="#">Test</a>
</li>
<li>
<img src="images/s.gif" class="icon-del"/>
<a id="action-delete" href="#">Delete</a>
</li>
</ul>
</body>
</html>
All I'm getting is an "Ext is not defined" error on the Ext.onReady(function(){ line.

What am I missing?

[hendricd]

@ignatius -- If you're going to use Ext (onReady etc) in that embedded page, our PHP script should also be generating the necessary <script > tags for Ext-all.* in that pages' head section as well.

Your script would need to be aware of what the site root was relative to the calling page or just use absolute URL's for loading the Ext framework in that page.


Are you currently loading Ext in that page? Get it working that way first, then have a look at "Load Ext once, and apply it to your frames" (http://extjs.com/forum/showthread.php?p=120384#post120384).

[ignatius]

@doug -- Thanks... that worked good... the iframe document now renders correctly. I thought I tried that before and it didn't work. But now it seems to be working.

I did read the post... not that I can make sense out of it at the moment - still trying to get my head around it. I think I looked at inline.html and misinterpreted the bit about Load Ext ONCE... and therefore incorrectly assumed that it only needed to be loaded once from the desktop page.

As I'm an Ext-noob, can I ask... Is there a better way to do this? Are there any performance issues doing it this way? Does ext-all.* get reloaded again? Or is it automatically picked up from cache?

Basically, what I want to do is for each shortcut icon on the desktop, to launch an Ext window into which an Ext script/markup is loaded via a MIF... for various reasons, obviously it (hopefully) keeps the initial desktop page load small(er), allows individual modules to be independently tested - without having to reload the desktop, yada yada yada...

TIA,

Ignatius

[mykes]

I find this to be the most useful extension done. It really should be a part of Ext at some point in the future!

I have a couple of issues to report, related to desktop usage:
1) IFrame in a window. Click on the IFrame, window doesn't come to front. Click on any Ext decoration around the iframe and it does come to the front.
2) IFrame seems to grab pointer focus. IFrame is in a window behind another window. Drag the top window around fast enough and the mouse pointer moves over the IFrame but the dragging isn't keeping up (pointer no longer over the window title bar being dragged). The IFrame seems to grab the pointer focus, leaving the drag operation in a funky state (dragging stops, window being dragged opaque like being dragged, iframe active).
3) Updater for iframe panel doesn't seem to work right:
var value = iframePanel.getUpdater().el.dom.innerHTML;
The idea here is to get the HTML content of the iFrame. I guarantee there's good reason to do this :) If you need an example, consider a wiki implementation... You show the wiki page in an iframe, and the user clicks "edit" button, so you need to get the content so you can stuff it in the HTMLEditor. There are other methods to get the HTML, sure, but if you code it like I showed, you can drop-in-replace Ext.Panel with Ext.ux.ManagedIframePanel without having to change other code.

Misc:
1) GetWindow() and GetDocument() methods for managed iframe panel.
2) reset() method documented but not implemented.

Ideas:
Automatically integrate Ext within the iframe in certain cases. Probably could be a config option. Ext is already loaded, and it is surely a waste to reload it inside the iframe. Example: javascript inside the iframe might want to use a dialog over the whole browser window and not inside the iframe. I know there's message passing and all that, but it sure would be nice to just have Ext at your fingertips.

Perhaps the update() and setSrc() and load() type functions could set up Ext inside the iframe. Additionally, the document.open() method might be overridden to set up Ext as well. Only if you have the config option set, tho.

Regards

[hendricd]

@mykes -- I'll try to address each one in turn: ;)


I find this to be the most useful extension done. It really should be a part of Ext at some point in the future! Thanks.


I have a couple of issues to report, related to desktop usage:
1) IFrame in a window. Click on the IFrame, window doesn't come to front. Click on any Ext decoration around the iframe and it does come to the front.An iframe is yet another browser window context. As such, mouse events do not bubble up to parent page. Currently, you must propagate that event behaviour ultimately to the Ext.Window that hosts it -- yourself. ManagedIFrameWindow is planned, but not available yet. It would likely manage that for you at some point, but not today.


2) IFrame seems to grab pointer focus. IFrame is in a window behind another window. Drag the top window around fast enough and the mouse pointer moves over the IFrame but the dragging isn't keeping up (pointer no longer over the window title bar being dragged). The IFrame seems to grab the pointer focus, leaving the drag operation in a funky state (dragging stops, window being dragged opaque like being dragged, iframe active).MIFP supports a dragMask already for layouts. For instance, when a border-layout region splitBar begins a drag operation, MIF auto-masks itself (and all other MIF's on the same page), and unmasks them on the splitBar drop. One would need to trap the Window dragStart and make a call to showDragMask on any one of the MIFPanels, and it would do the same thing for Window drag operations. MIFWindow candidate, I know. ;)


3) Updater for iframe panel doesn't seem to work right:
var value = iframePanel.getUpdater().el.dom.innerHTML;
The idea here is to get the HTML content of the iFrame. I guarantee there's good reason to do this :) If you need an example, consider a wiki implementation... You show the wiki page in an iframe, and the user clicks "edit" button, so you need to get the content so you can stuff it in the HTMLEditor. There are other methods to get the HTML, sure, but if you code it like I showed, you can drop-in-replace Ext.Panel with Ext.ux.ManagedIframePanel without having to change other code.Iframes do not have a useful innerHTML property in the context you're likely familiar with. You would need to use the frames' document interface to do that:
MIF.getDocument().body.innerHTML MIF and MIFPanel already have the necessary 'hooks' in-place for UpdateManager behavior, permitting:


MIF.update('<div> new content </div>');
MIFP.update('<div> new content </div>');
MIFP.load(url);
etc... just like a normal Ext.Element interface would provide.


Misc:
1) GetWindow() and GetDocument() methods for managed iframe panel.
2) reset() method documented but not implemented.
Review the Wiki docs again, but these already exist :
For MIF: getWindow, getDocument, reset
For MIFP: getFrame.[reset()] , getFrameWindow, getFrameDocument
This all assumes your frame document came from the "same-origin" domain as your main page.


Ideas:
Automatically integrate Ext within the iframe in certain cases. Probably could be a config option. Ext is already loaded, and it is surely a waste to reload it inside the iframe. Example: javascript inside the iframe might want to use a dialog over the whole browser window and not inside the iframe. I know there's message passing and all that, but it sure would be nice to just have Ext at your fingertips.

Perhaps the update() and setSrc() and load() type functions could set up Ext inside the iframe. Additionally, the document.open() method might be overridden to set up Ext as well. Only if you have the config option set, tho.
Review the adviframes.html project included in the demoPack.zip. It includes a mechanism for loading Ext into each frame without the need for <link> (CSS) or conventional <script> tags. This should be done selectively (not automatically) as it may interfere with other frameworks/libs loaded in the embedded page. Creating a config option for that behaviour implies a fair amount of dependencies and extra code (ext-basex, ux.ModuleManager, a modernized Ext.EventManager for IE) and complexity that's best left to the implementation.

Thanks for input. ManagedIframeWindow is in the works, but complicated !

[mykes]

IFrame supports these two events:
onFocus
onBlur

Can those events be bubbled up?

[mykes]

Also, while ManagedIframeWindow is going to be great, no doubt, it's not a substitute for being able to put an iframe in the midst of a layout inside a normal window. Know what I mean?

[hendricd]

IFrame supports these two events:
onFocus
onBlur

Can those events be bubbled up?
[...chewing on the implications....]


Also, while ManagedIframeWindow is going to be great, no doubt, it's not a substitute for being able to put an iframe in the midst of a layout inside a normal window. Know what I mean?"normal window"??

Which, still poses an interesting survey question:

How many of you render other items in the same container (ie Panel.items++) as the IFRAME (child of Panel.body)?

If the answer was never, hmm. :-?

[KENT]

Try:


buttons: [{text: "Reload", handler: function() {Ext.getCmp("tradeonline").setSrc() }}]
or

if(tabs.activeTab) tabs.activeTab.setSrc();



Hi Doug,
I did this but it doesn't work. I want to get the ID of activeTab to use only one button for reloading tabs of a window.




createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('TradeSystem-win');

if(!win){
win = desktop.createWindow({
id: 'TradeSystem-win',
title: 'Trade',
width:840,
height:500,
layout: 'fit',
items:
new Ext.TabPanel({
activeTab:0,
deferredRender:true,
layoutOnTabChange:true,
plain:true,
autoScroll: true,
items: [
{
title: 'Order',
id: 'tradeonline',
xtype:'iframepanel',
closable:false,
loadMask:{msg:'Loading'},
defaultSrc:'page.tradeonline.php'

},{
title: 'Execed',
id: 'ExedTrans',
xtype:'iframepanel',
closable:false,
loadMask:{msg:'Loading'},
defaultSrc:'page.exedtransaction.php'
}]
}),
buttons: [{text: "reload", handler: function() { if(tabs.activeTab) tabs.activeTab.setSrc()}}]
});
}

win.show();
}

[hendricd]

@kent --

id = tabs.activeTab.id, but you already gave all your framepanels ids.

Give your tabPanel an id and your single-toolbar-button handler could look like this:



Ext.getCmp('tradeTabs').activeTab.setSrc();


right?

[mykes]

[...chewing on the implications....]

"normal window"??

Which, still poses an interesting survey question:

How many of you render other items in the same container (ie Panel.items++) as the IFRAME (child of Panel.body)?

If the answer was never, hmm. :-?

I use IFrame as part of complex containers (Panels) all the time.

Even if you wanted to just make a browser window out of it, you'd want a text field for the address/URL.

You know the benefits of IFrames... In a window, the biggies are that you can style/css the iframe custom, any HTML inside the iframe can be badly broken (e.g. what does 5x </div> do to an Ext page?), and cross domain (load / share content from other sites).

Look at the Feed Reader demo. The bottom pane could be an IFrame. Since he's showing posts that might have URLs (links) inside, the user clicks on a link and only the IFrame would change, not reload your whole desktop. But you want all the nice Ext decorations (button) all around.

Cheers

[KENT]

@kent --

id = tabs.activeTab.id, but you already gave all your framepanels ids.

Give your tabPanel an id and your single-toolbar-button handler could look like this:



Ext.getCmp('tradeTabs').activeTab.setSrc();


right?

It works ! :D I'm so happy, it really really works! \:D/ Thanks

[eclectus]

Hi Doug,

First - amazing job, now no-one can call himself "just an Ext User" as you have set the standard way up there.

I have started from your adviframes example, and started loading my own html with Ext into the Demo tabs. When I insert a new url in the code, the tab is created and loaded fine in both IE and FF. However, once I refresh the page, IE loads the page without the Ext elements (just like before using your IFrame extension), while FF loads fine with no errors.

Another instance of the bug, if I submit my form and the following page loads, then hit the browser Back button, in IE the page loads without the Ext, while FF loads fine with no errors.

I tried this with a simply login form and i get the same result.

NOTE: my page has link and script references to the Ext. When I tried removing them like you did with the tabs example page, I got an error of Ext no recognized, but maybe this is related to the issue i am having.

I have been reading back in forth in this huge post, and maybe this has been discussed but i can't find it. Any help will be greatly appreciated.

[hendricd]

@eclectus - You will have problems with IE if you did not replace the EventManager code in your copy of /examples/miframe/ext-all.js as outlined here (http://extjs.com/forum/showthread.php?p=120384#post120384).

The main page adviframe.html uses that copy of ext-all as well.

ensure you're using the latest version 1.03 and the latest demoPack.zip.

If you're still having trouble after checking all that, post your new panel Ctor and we'll take it from there.

[eclectus]

of course I made the EventManager change, and tested your demo long before I tried to implement my version.

I don't know what Ctor is? here is the files I am loading:

in my version of adviframes.js (DAG is my Demo):

,config : { loadMask : {hideOnReady:true, msg:'Masked Until domready...'}
,defaultSrc : {url:'index.html', callback:DAG.handlers.callback.createDelegate(DAG)}
,eventsFollowInternalLinks : true


index.html:

<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="css/examples.css" />

<script type="text/javascript" src="js/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext/ext-all.js"></script>
<script type="text/javascript" src="js/login.js"></script>
</head>
<body>
<center>
<h1>test</h1>
<p>login</p><p></p>
<table width="700" align="center"><tr><td align="center">
<div id="login" align="center"></div>
</td></tr></table>
</body>
</html>

and login.js:

Ext.onReady(function(){

Ext.QuickTips.init();

// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';

var login_form = new Ext.FormPanel({

id: login_form,
//labelWidth: 75,
frame:true,
title: "Login Form",
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 200},
onSubmit: Ext.emptyFn,
submit: function() {
this.getForm().getEl().dom.action = 'dag.php';
this.getForm().getEl().dom.submit();
},
defaultType: 'textfield',

items: [{
fieldLabel: 'Email',
name: 'email',
vtype:'email',
allowBlank:false
},{
fieldLabel: 'Password',
inputType:'password',
name: 'password',
allowBlank:false
},{
name: 'step',
inputType:'hidden',
value: 'login'
}
],
buttons: [{
text: 'Login',
handler: submitForm
}]
});


function submitForm(){
login_form.submit();
}

login_form.render('login');

});

All my css/js files are in the correct directories, the ext-all with the change version 2.0.2 etc.

Also, its not consistent, i just tried it and the refresh loaded the login form, but the Back button didn't. Also, keep in mind that when I do the refresh, the index.html is not visible as it only loads when I select the name for the tab in the tree.

[hendricd]

@eclectus -- the design of adviframes.js presumes that Ext.* is NOT referenced in the embedded page, and will be loaded by the main page ( Demo.transform method) when the embedded page's DOM is ready.

In your case, Ext.* is already scripted in the <head> section, and your login.js would create the Form as it would in a normal page-loading scenario -- onReady.

Adding your new index.html page to the demoTree heirarchy is going to force Ext to be re-applied to the frame regardless of its existing markup.

IOW: Your index.html example does not follow the original 'theme' of the demo -- that is, load an embedded page without Ext referenced in it.

I think what you're really after is this:
--index.thml --


<head>
<title>test</title>
<script type="text/javascript" src="js/login.js"></script>
</head>
<body>
<center>
<h1>test</h1>
<p>login</p><p></p>
<table width="700" align="center"><tr><td align="center">
<div id="login" align="center"></div>
</td></tr></table>
</body>
</html> -- login.js --



var startLogin = function(){
Ext.onReady( function(){ //Optional, as Dom is already in place by now.
Ext.QuickTips.init();

// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';

var login_form = new Ext.FormPanel({

id: login_form,
//labelWidth: 75,
frame:true,
title: "Login Form",
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 200},
onSubmit: Ext.emptyFn,
submit: function() {
this.getForm().getEl().dom.action = 'dag.php';
this.getForm().getEl().dom.submit();
},
defaultType: 'textfield',

items: [{
fieldLabel: 'Email',
name: 'email',
vtype:'email',
allowBlank:false
},{
fieldLabel: 'Password',
inputType:'password',
name: 'password',
allowBlank:false
},{
name: 'step',
inputType:'hidden',
value: 'login'
}
],
buttons: [{
text: 'Login',
handler: submitForm
}]
});


function submitForm(){
login_form.submit();
}

login_form.render('login');

}); //optional
}; Then, this should get things started after index.html loads, and DAG.transform gets Ext in place:



,config :
{ loadMask : {hideOnReady:true, msg:'Masked Until domready...'}
,defaultSrc : 'index.html'
,listeners: {documentloaded : function(frame){frame.getWindow().startLogin();}}
}

[eclectus]

OK, i think i'm starting to see the problem. When i run your code it fails, and in FF it gives me a startLogin is not a function, when inspecting the DOM it seems the index.html it is using is an old version, so when i hit refresh, or close the FF tab and open a new one, its still loading the old file referenced in the iframe?! any idea how to force the loading of a new file into the iframe. My app is all php files that are created on the fly, so it must load the new file whenever that tab is loaded.

Also, i see you removed the "callback:DAG.handlers.callback.createDelegate(DAG)" and
"eventsFollowInternalLinks : true" which you use for the extjs.com frame, any reason why I don't need them?

[hendricd]

Also, i see you removed the "callback:DAG.handlers.callback.createDelegate(DAG)" and
"eventsFollowInternalLinks : true" which you use for the extjs.com frame, any reason why I don't need them?


The callback was just to display to pretty balloon :"> (proving the callback works) and true is the default for eventsFollowInternalLinks anyway.

for now, try:

,defaultSrc : 'index.html?_dc=' + (new Date().getTime());

[eclectus]

Now it is loading the new index.html, and giving me the error I mentioned in my first post when removing the reference to Ext classes from the html - Ext is not defined - for the first line in login.js Ext.QuickTips.init();

here is the new login.js:

var startLogin = function(){
//Ext.onReady(function(){

Ext.QuickTips.init();

// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';

var login_form = new Ext.FormPanel({

id: login_form,
//labelWidth: 75,
frame:true,
title: "Nefesh B'Nefesh - Dynamic Application Generator",
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 200},
onSubmit: Ext.emptyFn,
submit: function() {
this.getForm().getEl().dom.action = 'dag.php';
this.getForm().getEl().dom.submit();
},
defaultType: 'textfield',

items: [{
fieldLabel: 'Email',
name: 'email',
vtype:'email',
allowBlank:false
},{
fieldLabel: 'Password',
inputType:'password',
name: 'password',
allowBlank:false
},{
name: 'step',
inputType:'hidden',
value: 'login'
}
],
buttons: [{
text: 'Login',
handler: submitForm
}]
});


function submitForm(){
login_form.submit();
}

login_form.render('login');

}

the index.html is your version.

btw - thank you for taking the time to see me through this.

[hendricd]

Add this log statement and see if Ext has been successfully applied (by DAG.transform) to frames' window object:


,config :
{ loadMask : {hideOnReady:true, msg:'Masked Until domready...'}
,defaultSrc : 'index.html'
,listeners: {documentloaded : function(frame){
console.log(frame.getWindow());
frame.getWindow().startLogin();
}}
}

[hendricd]

You're missing the most important part.



,config :
{ loadMask : {hideOnReady:true, msg:'Masked Until domready...'}
,defaultSrc : 'index.html'
,listeners: {
domready : {fn:DAG.transform, scope:DAG},
documentloaded : function(frame){
console.log(frame.getWindow());
frame.getWindow().startLogin();
}}
}

[eclectus]

OK, its loading now, but when I click login (which simply goes to a php file with print "login") and click back on the browser, the file loads without the form.
Also, the examples.css does not load as I can see the missing border and bachground of the form, and the button is just text.

IE of course loads nothing since it does not recognize "console".

what i can't understand is how the extjs.com site loads and works fine (obviously you didn't strap the Ext references from their pages) and our simple page needs all this work. Even your tabs example didn't seem to have problems and did not require this "listeners" config.

[hendricd]

what i can't understand is how the extjs.com site loads and works fine (obviously you didn't strap the Ext references from their pages) and our simple page needs all this work. Even your tabs example didn't seem to have problems and did not require this "listeners" config.
because, the adviframes tab examples have event listeners attached automatically when the tab in constructed:


var sampleNodes = [
{'text':'Transformations'
,'id':'\/transform'
,'leaf':false
,iconCls:'folder'
,expanded:true
,children: [
{
text:'via UpdateManager'
,id:'\/transform\/updater'
,leaf:true
,tabTitle:'UpdateManager Transformed'

,config : { loadMask : {hideOnReady:true, msg:'Masked Until domready...'}
,disableMessaging: false
,fitToParent: true
,autoLoad : {url : 'inline.html'
,scripts : true //to render the NASA image only
,nocache : true
,callback : Demo.handlers.callback.createDelegate(Demo)
}
,tbar:[{
text:'Refresh',
handler: function(){
var panel = Ext.getCmp('demoTabs').activeTab;
if(panel){
panel.loadMask.msg='Reloading your selection...';
panel.getUpdater().refresh(Demo.handlers.callback.createDelegate(Demo));

}
}
}]
}
,events:{
documentloaded :evs.documentloaded
,domready : Demo.transform
,exception : Demo.handlers.exception
,message : Demo.handlers.message
,scope : Demo
}
}
I can't tell when/how you're creating your MIFP without seeing the whole thing.

adviframe.js is not something you can just copy and tweak for production. It's scripted to demonstrate a whole lot more than you are likely to use day2day.

You should start out with your own controller script and borrow the Demo.transform function from the adviframes and go from there, using a more traditional approach for rendering your MIFP(s), rather than from a complex set of treeNodes.

[hendricd]

@eclectus -- Further,

loading extjs.com (a foriegn-domain) does not permit the level of access to the frames document because its not hosted by the same domain as adviframes.html. The samples (extjs.com, ajaxian.com) are simply there for those who wanted to see how to add MIFP to a tabPanel.

Remote sites cannot have Ext applied to them in the same fashion as the first two Demo treeNodes (these two are loaded with a "same-origin" policy).

[eclectus]

it just so happens that i was building a very similar interface to your adviframes and having problems with Panel.load getting an external php file with Ext to load into dynamic tabs.

What i have is a tree with only one leaf, then the single tab that start the app has a "Save and Continue" button on the tbar. When the user submits the form, it creates a new tab with the next form section (similar to a wizard) based on the data entered in the previous form (that's why its dynamic). The user can then click back to see his completed forms using the tabs, or a quick link by the new leafs that were created on the tree (there could be up to 40 forms).

back to our current issue, I already had the "events" setup like you have in the demo file, so maybe the listeners property got messed up? Also, shouldn't the eventsFollowFrameLinks property insure that the back button reloads the DOM including the Ext elements?

I will definitely try to simplify the entire structure based on your suggestion, maybe get rid of the tree altogether.

Once more question - if you don't mind - since the DOMs are cached for each tab, wouldn't the browser have a problem with opening several (i.e. 30) tabs with Ext forms on them? is there a way to "empty" the iframe in the tab when its not visible, and then reload it when the user selects the tab? my php already check if the user completed the form and serves different (read only fields or text only html) content.

Thank you again for all the help.

[hendricd]

Also, shouldn't the eventsFollowFrameLinks property insure that the back button reloads the DOM including the Ext elements?Who's back button are you referring to (and back from where?)

a) frame.window.back, or
b) main.window.back

regardless, there is no special handling other than optional Ext state management for MIFP's last defaultSrc (or setSrc) value.


Once more question - if you don't mind - since the DOMs are cached for each tab, wouldn't the browser have a problem with opening several (i.e. 30) tabs with Ext forms on them? is there a way to "empty" the iframe in the tab when its not visible, and then reload it when the user selects the tab? my php already check if the user completed the form and serves different (read only fields or text only html) content.Yes, 30+ iframes are going to be expensive, but MIF does a good job of cleanup/orphan control.

If need be, you can call MIFP.getFrame().reset() to empty it out and just call MIFP.setSrc(url) again when you wish to load it again.

[eclectus]

Just for the benefit of people that might have the same issue as i had with the css not being applied to the iframe loaded files inside tabs:

in Doug's demo adviframes.js there is a change of all images referenced in ext-all.css:

MM.styleAdjust = (name == 'ext-all.css'?{pattern:/url\(\s*\.\.\//ig, replacement:'url(../../resources/'}:null);

if you build an app with your own dir structure, or only use individual css files you need (not ext-all) or create your own, you should adjust the reference to any images in relation to the host page's location, for example in my case the structure was this:


host-file.html
css/css-files.css
images/images-files
js/js-files.js
in this case I adjusted the reference to ext-all.css inside my iframecontroller.js as follows:

MM.styleAdjust = (name == 'ext-all.css'?{pattern:/url\(\s*\.\.\//ig, replacement:'url('}:null);
this replaced the '../images/default/x.gif' in the ext-all.css to simply 'images/default/x.gif' which is the correct relation to the host file in my structure.

[eclectus]

Doug,

I hate to bother you again, but I can't seem to shake off this cache issue. To make it simple for you to recreate, and make sure its not my code, I used your demo code to demonstrate the bug.

In your adviframes.html page, when clicking on the "via UpdateManager" tree node we get the inline file to load, and there is a tbar with a refresh button on it. If you comment out the tbar, and run the demo again, the tbar is still there with the refresh button. Just to make sure its no a browser cache, I changed the name of the tab title to "UpdateManager Test Transformed" and the title does change (so the new .js is being used) but the tbar still shows up.

Here is the modified code:

var sampleNodes = [
{'text':'Transformations'
,'id':'\/transform'
,'leaf':false
,iconCls:'folder'
,expanded:true
,children: [
{
text:'via UpdateManager'
,id:'\/transform\/updater'
,leaf:true
,tabTitle:'UpdateManager Test Transformed'

,config : { loadMask : {hideOnReady:true, msg:'Masked Until domready...'}
,disableMessaging: false
,fitToParent: true
,autoLoad : {url : 'inline.html'
,scripts : true //to render the NASA image only
,nocache : true
,callback : Demo.handlers.callback.createDelegate(Demo)
}
/*,tbar:[{
text:'Refresh',
handler: function(){
var panel = Ext.getCmp('demoTabs').activeTab;
if(panel){
panel.loadMask.msg='Reloading your selection...';
panel.getUpdater().refresh(Demo.handlers.callback.createDelegate(Demo));

}
}
}]*/
}
,events:{
documentloaded :evs.documentloaded
,domready : Demo.transform
,exception : Demo.handlers.exception
,message : Demo.handlers.message
,scope : Demo
}
}
Please let me know what is causing this or if this is a bug in the cache. I have tried it in IE, FF, new sessions etc. The tbar is always there.

[hendricd]

Demo.handlers.nodeSelect defines a default tbar for all tabs. You just commented out the tbar-override for the 'via UpdateManager' MIFPanel. ;)

make it tbar:false instead.

[jexxi]

Question: how to set auto-fit if the ManageIframePanel is in ViewPort's center region?
here are the codes:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Managed Iframe</title>
<link type="text/css" rel="stylesheet" href="lib/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="lib/ext/ux/miframe/miframe.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
// reference local blank image
Ext.BLANK_IMAGE_URL = 'lib/ext/resources/images/default/s.gif';

// create namespace
Ext.namespace('BP2ext.Default');

// create application
BP2ext.Default.app = function() {
// do NOT access DOM from here; elements don't exist yet
// private variables

var vp; //viewport
// public space
return {
// public properties, e.g. strings to translate
btn1Text: 'Button 1'
// public methods
, init: function() {
Ext.QuickTips.init();

//prepare viewport
vp = new Ext.Viewport({
id: 'vp'
, layout:'border'
, items: [{
region: 'north'
, id: 'panNorth'
, height: 97
, border: true
, html: 'north view'
}, {
region: 'south'
, id: 'panSouth'
, height: 24
, border: true
, html: 'south view'
}, {
region: 'west'
, id: 'panWest'
, width: 205
, autoScroll: true
, border: true
, html: 'west view'
}, {
region: 'center'
, id: 'panCenter'
, border: true
, items: {
xtype: 'iframepanel'
, id: 'iframecontent'
, border: true
, autoHeight: true
, defaults: {
bodyStyle:{ width:'100%', height:'100%' }
}, defaultSrc: 'http://www.google.com'
}
}]
});
}
};
}(); // end of app
Ext.onReady(BP2ext.Default.app.init, BP2ext.Default.app);
</script>
</html>
In IE6, iframe will auto-fit, but not for IE7, FF 3 beta 4, Flock 1.1 (FF 2.0.0.12), Opera 9.26.
Please see attachment for details.
Please can anyone point me out what was wrong?

Thanks,
Johan

[hendricd]

@jexxi - Let the layout do the work for you. There is no need to embedd MIFP in another panel because it is a panel.

Try it this way:



{
region: 'center'
, xtype: 'iframepanel'
, id: 'frameCenter'
, border: true
, defaultSrc: 'http://www.google.com'
}

[mscdex]

I was pointed to this thread whilst looking for an alternative for XHR for browsers that do not support it. Why isn't something like this (or is it planned?) in ext itself where if it detects that the browser doesn't support XHR it switches to a (hidden) iframe method to make a call to the server and retrieve the results? Is it because of overhead of creating the iframe or something else?

[jexxi]

@hendricd
yes, I try your way and it works perfectly. But I when I try to put MIF in nested panel, the code like this:


{
region: 'center'
, autoHeight: true
, height: '100%'
, items: [{
region: 'north'
, height: 75
, html: '<a style="cursor:pointer;text-decoration:underline" class="goto">www.google.com</a> | <a style="cursor:pointer;text-decoration:underline" class="goto">www.extjs.com</a>'
},{
region: 'center'
, xtype: 'iframepanel'
, id: 'frameCenter'
, border: true
, defaultSrc: 'http://www.google.com'

}
My goal is, in the main 'center' region, I need nested region:
- 1st child region(north region): show navigation link
- 2nd child region(center region): placed MIF
and it happened again :(. Please see attachment.
Can you once again point me out the problem?
Regards,
Johan

[smcguire36]

I have a weird thing happening. I have a tab panel set with each panel containing a managed IFrame. The Tab Panel resides inside of a viewport so it takes up the whole browser window (except for a title bar above it). In one frame I have links to anchor tags lower in the page. When I click on that link the page properly reloads with the anchor tag on the end of the url (i.e. http://.....#MyAnchor), the page scrolls down to the proper place in the html page and this is the weird part: The WHOLE tabset moves UP in the browser window by about the height of a horizontal scrollbar, obscuring half of the titlebar above the tab panel.

Thinking that the main window had just scrolled, I tried to programmatically scroll the window using the window.scrollTo() and window.scrollBy() functions but to no avail. I think that, for some reason, either the viewport has moved on the page or the tab panel has moved for some reason and I am not sure why. This seems like a bug to me (I'm just not sure if it is in the Managed IFrame or the Viewport or the TabPanel). Can anyone confirm this?

--Stewart McGuire

[hendricd]

@jexxi -- You need to read up on layouts a bit more. Have you looked at any of /examples ? ;)



{ region: 'center'
,layout:'border' //nested border layout
,items: [{
region: 'north'
, height: 75
, html: '<a style="cursor:pointer;text-decoration:underline" class="goto">www.google.com</a> | <a style="cursor:pointer;text-decoration:underline" class="goto">www.extjs.com</a>'
},{
region: 'center'
, split:true
, xtype: 'iframepanel'
, id: 'frameCenter'
, border: true
, defaultSrc: 'http://www.google.com'

}]

}]

[hendricd]

I was pointed to this thread whilst looking for an alternative for XHR for browsers that do not support it. Why isn't something like this (or is it planned?) in ext itself where if it detects that the browser doesn't support XHR it switches to a (hidden) iframe method to make a call to the server and retrieve the results? Is it because of overhead of creating the iframe or something else?

I suspect it's because Ext is designed for use with todays "A-grade" browsers which all support xmlhttprequest. What browser are you using that doesn't support it?

[jexxi]

@jexxi -- You need to read up on layouts a bit more. Have you looked at any of /examples ? ;)



{ region: 'center'
,layout:'border' //nested border layout
,items: [{
region: 'north'
, height: 75
, html: '<a style="cursor:pointer;text-decoration:underline" class="goto">www.google.com</a> | <a style="cursor:pointer;text-decoration:underline" class="goto">www.extjs.com</a>'
},{
region: 'center'
, split:true
, xtype: 'iframepanel'
, id: 'frameCenter'
, border: true
, defaultSrc: 'http://www.google.com'

}]

}]


@hendricd (http://extjs.com/forum/member.php?u=8730), thanks to point me out my mistake.
Anyway your MIF is one of great extension that people ever made and really helps me out for my current project now.

Cheers,
Johan

[glasgowboy84]

I am still having problems with this script below, basically I am trying to achieve is when a tab is clicked the Tab Panel iframe is refreshed.

[SIZE=3][FONT=Calibri]I have added an listener but it

[hendricd]

@glasgowboy84 -- Updater methods are reserved for when YOU update(write) the embedded DOM, not for managing the iframe.src property. Try this one:



.. listeners:{
tabchange:function(){Ext.getCmp('sites').getActiveTab().setSrc(); } //refresh
},

[richgoldmd]

ManagedIframePanel::update is missing from the code (but is in the documentation).

I had to call mif.getFrame.update(...) instead.

[ping_pong]

I'm looking for a method of controlling the iframe through back and forward buttons.

When using history.back() or history.go(-1) the button will only work once.

Any help is much appreciated! thanks in advance

[hendricd]

ManagedIframePanel::update is missing from the code (but is in the documentation).

I had to call mif.getFrame.update(...) instead.

For MIFPanel, the update method is inherited from Ext.Panel, so it wasn't necessary to override it for MIFPanel. This should work just like a regular panel does, but writes to the iframes.document instead:


yourMIFP.update('<div>cleared</div>');

[hendricd]

I'm looking for a method of controlling the iframe through back and forward buttons.

When using history.back() or history.go(-1) the button will only work once.

Any help is much appreciated! thanks in advance

Have you played with:


var win = MIF.getWindow(); // get the Iframes window object
win.history.back(); //accessible if same-origin domain only

or, for MIFPanel:
MIFP.getFrameWindow().forward();

[richgoldmd]

For MIFPanel, the update method is inherited from Ext.Panel, so it wasn't necessary to override it for MIFPanel. This should work just like a regular panel does, but writes to the iframes.document instead:


yourMIFP.update('<div>cleared</div>');

I'll have to look back through my code, but I did originally try yourMIFP.update and it threw errors, which prompted me to go through the MIFP code to look for the method.

I'll check again...

Rich

[richgoldmd]

I must be missing something, Ext.Panel does not have an update() member. I have to do mypanel.body.update(..) if I want to update the body of an Ext.Panel.

I am using 2.0.2.

What am I missing?

[victerz]

I had a similar question along the lines of including an external domain iframe and
allowing the user to have a back/forward button in MIFPanel.

I imagined it would involve a listener with eventsFollowFrameLinks, but is it possible
to get the current url of the loaded iframe in the listener? This way we can make our
own navigation, but as it stands now when I load an external iframe, the user has no
back button.

IE load wikipedia iframe for users to see a description of a word. The user clicks a link
on wikipedia and wants to go back to the initial page. I understand we can have a home or refresh button which would just reload the initial page, but is it possible to do this right and
actually have back and forward buttons?

[hendricd]

I must be missing something, Ext.Panel does not have an update() member. I have to do mypanel.body.update(..) if I want to update the body of an Ext.Panel.

I am using 2.0.2.

What am I missing?

Sorry Rich,

I had UpdateManager on the brain ! ;)

Ext.Panel does NOT have a update method. Using a standard Ext.panel, you would need to do one of the following to update its body:



panel.body.update(...)
panel.getUpdater().update(....)


For a MIFPanel, use one of the following:


MIFpanel.getUpdater().update(....) //getUpdater returns the iframe
MIFPanel.getFrame().update(...)


Maybe I should add the update method to MIFP (even tho Ext.Panel doesn't support that) ?

[hendricd]

I had a similar question along the lines of including an external domain iframe and
allowing the user to have a back/forward button in MIFPanel.

I imagined it would involve a listener with eventsFollowFrameLinks, but is it possible
to get the current url of the loaded iframe in the listener? This way we can make our
own navigation, but as it stands now when I load an external iframe, the user has no
back button.

IE load wikipedia iframe for users to see a description of a word. The user clicks a link
on wikipedia and wants to go back to the initial page. I understand we can have a home or refresh button which would just reload the initial page, but is it possible to do this right and
actually have back and forward buttons?

@victerz --
For an iframe loaded from a foreign domain, the document.location object is protected (cannot even be read) , so the current URL would not be available. It's window.history object as also off-limits in that scenario. No one is allowed to mess with history/back/forward from a foreign domain.

For MIF loading a foreign domain (with eventsFollowFrameLinks==true), the documentloaded (domready will not) event will fire after the user clicks-an-<a>, submits, etc. But then the browsers same-origin restrictions get imposed /:)

[shamor]

how to hide menu over the iframe? could anyone help this? Thanks!!

[hendricd]

Have you tried changing the style: z-order of your menu, or Ext.useShims = true ?

Tough to offer more without seeing some code.

[unique33]

Hi
I need the windows containing the Iframe to load maximized by default .
I added this line :
maximized : true ,
the windows start maximized , but vanishes when I press the maximize button to unmaximized the window .
What I should do to current the problem ?

[hendricd]

Without seeing any of you Ext.Window config, it should contain:

layout:'fit',
autoScroll:false,

If you still need help after that, post your Window config for review.

[victerz]

When using a tabpanel with the tabs being iframepanels .. when I add a new tab(or just change tabs, basically unfocus the previous iframe) the other tabs remain at the same source, but any media on the page is refreshed. Is this just inherit with iframes? To replicate, just
use youtube.com or any video in the iframepanel, and then change tabs and come back to a reloaded video.

[hendricd]

@victorz -- Yes, this is normal behaviour for FF (IE doesn't do that =P~ ). Look at the tabPanel configs in the demoPack. You'll notice that all MIFP's are configured for absolute positioning and hideMode:'visibility' (you could try 'offsets' as well). That tends to solve that problem for FF.

[victerz]

That fixed all my issues, thanks :)


defaults:{
style :{position:!Ext.isIE?'absolute':'relative'}
,hideMode :!Ext.isIE?'visibility':'display'
,closable :true
}

[hendricd]

Version 1.04 fixes/adds:

fix: auto-dragMask feature did not work with nested border layouts
fix: documentloaded event is now fired asynchronously.
add: writeScript fixes for Safari(Webkit)
add: added MIF.getDocumentURI method
enhance: state Management.

The demoPack.zip example files are updated as well.

Updates to FAQ and Wiki Docs as well.

[mbogdanovich]

Hello Doug,

I have a tabbed panel in the center of my application which uses the portal system in one of the tabs. The portlets are iframes. I would like to hit the tools icon to have the portlet open in a new tab in the center region. Not really sure how to do this. I am wondering how I capture the defaultSrc for the portlet which contains the content I would like to tab.

Here is my tools var:


var tools = [{
id:'plus',
handler: function(e, target, panel){
tabs.add({
xtype : 'iframepanel',
defaultSrc : panel.getFrame().getDocumentURI()
}).activate();
}
},{
id:'close',
handler: function(e, target, panel){
panel.ownerCt.remove(panel, true);
}
}];]
here is my center area:



{,{
region: 'center',
id:'center-panel',
autoScroll:true,
layout:'fit',
activeTab:0,
items:
new Ext.TabPanel({
deferredRender:false,
id: 'center-tabPanel',
activeTab:0,
height: 400,
items:[{
title: 'Activity Search',
closable:false,
autoScroll:true,
activeTab:0,
layout: 'fit',
items:
new Ext.TabPanel({
deferredRender:false,
activeTab:0,
defaultType: 'iframepanel',
defaults:{height:300,
loadMask:{msg:'Loading Site...'},
loadMask:true,
autoShow: true
},
items:[{
title: 'Region Search',
closable:false,
defaultSrc: 'assets/regionsearch.cfm'

},{
title: 'Topic Search',
closable:false,
defaultSrc: 'assets/topicsearch.cfm'
}]
})
},{
xtype : 'portal',
id: 'portal_system',
title: 'Widgets',
autofit: true,
closable: false,
autoScroll: true,
items : [ {
columnWidth : .50,
style : 'padding:10px 0 10px 0',
items:[{
title: 'North State Recreation Forums',
id: 'RecForum',
defaultType: 'iframepanel',
defaults:{height:225,
loadMask:{msg:'Loading Site...'},
autoShow: true
},
tools: tools,
items:
[{defaultSrc : 'media/forums/index.html'
}]
}
,{
title: 'Outdoor Articles',
defaultType: 'iframepanel',
defaults:{height:350,
loadMask:{msg:'Loading Site...'},
autoShow: true
},
tools:tools ,
items:
[{defaultSrc : 'media/rss/index.cfm'
}]
},{
title: 'Outdoor Images',
id: 'outDoorImages',
defaultType: 'iframepanel',
defaults:{height:475,
loadMask:{msg:'Loading Site...'},
autoShow: true
},
tools: tools,
items:
[{defaultSrc : 'media/readerGallery/index.html'
}]
},{
title: 'web Cam',
id: 'webCam',
defaultType: 'iframepanel',
defaults:{height:225,
loadMask:{msg:'Loading Site...'},
autoShow: true
},
tools:tools ,
items:
[{defaultSrc : 'media/webCam/WebCam.html'
}]
}]
}, {
columnWidth : .50,
style : 'padding:10px 0 10px 0',
items:[{
title: 'Weather',
id: 'weather',
defaultType: 'iframepanel',
defaults:{height:450,
loadMask:{msg:'Loading Site...'},
autoShow: true
},
tools: tools,
items:
[{defaultSrc : 'weather/index.cfm'
}]
},{
title: 'Fish Map',
id: 'FishMap',
defaultType: 'iframepanel',
defaults:{height:300,
loadMask:{msg:'Loading Site...'},
autoShow: true
},
tools: tools,
items:
[{defaultSrc : 'media/fishMap/index.html'
}]
},{
title: 'Recreation Slide Show',
id: 'RecSlideShow',
defaultType: 'iframepanel',
defaults:{height:375,
loadMask:{msg:'Loading Site...'},
autoShow: true
},
tools: tools,
items:
[{defaultSrc : 'media/publisherGallery/index.html'
}]
}]
}]
},{
title: 'Site Use Guide',
closable:false,
autoScroll:true,
layout: 'fit',
items:[{
autoLoad:{url:'assets/instructions.cfm',
scripts: true}
}]
}]
})
},


I combed the past pages only to not find what I was looking for. Can you point me in the right direction?

Thanks

[hendricd]

@Matt - Ironically, release 1.04 was posted yesterday, adding a new method you may find useful: MIF.getDocumentURI.

Your tool handler would simply need to query the current URI of the frame. If your Iframes are fed by same-origin servers (looks to be your case), the getDocumentURI method would give you the current absolute URI or you could use the last known URL that you set for the frame using MIF.src or MIFP.defaultSrc properties.

Note: The frames' window.location and document object are 'protected' when loaded from foreign domains. In that case MIF.getDocumentURI() would return the last URL you set, not where the user may have traveled by clicking an embedded link/post.

This one should work well:


var tools = [{
id:'gear', ??
handler: function(e, target, panel){
tabs.add({
xtype : 'iframepanel',
defaultSrc : panel.getFrame().getDocumentURI()
}).activate();
}
},.... ]

[provagino]

suggestion:



showMask: function(msg,msgCls,forced){
var lmask;
if((lmask = this.loadMask) && (!lmask.disabled|| forced)){
if(lmask._vis) return;

if(!lmask.masker) {
lmask.masker = Ext.get(lmask.maskEl||this.dom.parentNode||this.wrap({tag:'div',style:{position:'relative'}}));
lmask.masker.mask.defer(lmask.defer||5,lmask.masker,[msg||lmask.msg , msgCls||lmask.msgCls] );
} else {
lmask.masker.mask(msg||lmask.msg , msgCls||lmask.msgCls );
}
lmask._vis = true;
}
}

[smartesttom]

the bottom arrowhead of scroll bar can't work well when using ManagedIframePanel with tablpanel without init items.


Ext.onReady(function(){
var centerPanel = new Ext.ux.InlineToolbarTabPanel({
id: 'center_panel',
region:'center',
deferredRender:false,
defaultType:"iframepanel",
activeTab: 0,
enableTabScroll : true
});
var viewport = new Ext.Viewport({
layout:'border',
items: [
{
region:'west',
id:'west-panel',
title: ' ',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 0 0 5',
layoutConfig:{
animate:true
},
items: [{
contentEl: 'west',
border:false,
iconCls:'nav'
}]
},
centerPanel]
});
});

function createTabItem(id,url,title){
var centerPanel = Ext.getCmp('center_panel');
centerPanel.add({id:id, title: title,defaultSrc: url}).show();
}

as you see, there is no items in centerPanel, when it run, program will create new itempanel by function 'createTabItem', ervery thing ok. if the page of new itempanel overflow, scroll bar will display. but the bottom arrowhead of scroll bar will disappear!(init.gif) when i collapse west region, then extend it, the bottom arrowhead of scroll bar will display again. (after.gif)
how could i run it ok without put items in centerPanel?

[hendricd]

@provagino -- Thanks for the second eye, but I'm not clear what advantage your change presents. Can you clarify? Maybe I'm missing something, but your revision would prevent the desirable defered mask operation if the mask element was already defined, which would prevent the mask message from centering properly.

@smarttestom - You're missing an important step when adding components to parent containers after they are rendered.

Either add layoutOnTabChange:true to your centerPanel, or call doLayout yourself:



function createTabItem(id,url,title){
var centerPanel = Ext.getCmp('center_panel');
var p = centerPanel.add({id:id, title: title,defaultSrc: url});
centerPanel.doLayout();
p.show();
}

[mbogdanovich]

thanks for the response Doug,

firebug error gives me this:

tabs is not defined
handler(Object browserEvent=Event mouseout button=0 type=mouseout, Object dom=div#ext-gen135.x-tool id=ext-gen135, Object initialConfig=Object)Main_debug.js (line 8)
createToolHandler(Object browserEvent=Event mouseout button=0 type=mouseout)ext-all-debug.js (line 15947)
h(Object browserEvent=Event mouseout button=0 type=mouseout)ext-all-debug.js (line 1630)
getViewWidth(click clientX=0, clientY=0)ext-base.js (line 10)
[Break on this error] tabs.add({

Not really sure what I am lacking. Currently the code is pasted in like the example you put in this morning....and thank you again!

[hendricd]

@Matt -- give your tabPanel an ID, and substitute 'tabs' in my example with that: /:)

var tabs = Ext.getCmp('yourTabPanelWithoutAnIdYet');
tabs.add (.......

[mbogdanovich]

Doug,

I bow in your general direction...I am getting closer..I know I am.....and when it happens, I will fall to my knees and cry, thank you...:)

I gave it an id and now firebug tells me:

tabs has no properties
handler(Object browserEvent=Event DOMFrameContentLoaded button=-1, Object dom=div#ext-gen135.x-tool id=ext-gen135, Object initialConfig=Object)Main_debug.js (line 8)
createToolHandler(Object browserEvent=Event DOMFrameContentLoaded button=-1)ext-all-debug.js (line 15947)
h(Object browserEvent=Event DOMFrameContentLoaded button=-1)ext-all-debug.js (line 1630)
getViewWidth(click clientX=0, clientY=0)ext-base.js (line 10)
[Break on this error] tabs.add({

Thanks for your patience.

[hendricd]

@MAtt - Update your post #473 with your current layout code; can't see nuthin'.

[hendricd]

var tools = [{
id:'plus',
handler: function(e, target, panel){
var tabs= Ext.getCmp('center-tabPanel');
if(tabs){
var newP = tabs.add({
xtype : 'iframepanel',
defaultSrc : panel.getFrame().getDocumentURI()
});
tabs.doLayout();
newP.activate();
}
}
},{
id:'close',
handler: function(e, target, panel){
panel.ownerCt.remove(panel, true);
}
See it now?

[mbogdanovich]

Doug,

the one that I left out above the tools var:



var tabs = Ext.getCmp('center-tabPanel')


I just left it out of my post...not my code...

[hendricd]

Matt, you see it (in my prev post) ?

[mbogdanovich]

Yes....sorry about that...

I placed it in just like that

firebug:

panel.getFrame is not a function
handler(Object browserEvent=Event resize button=-1 type=resize, Object dom=div#ext-gen135.x-tool id=ext-gen135, Object initialConfig=Object)Main_debug.js (line 11)
createToolHandler(Object browserEvent=Event resize button=-1 type=resize)ext-all-debug.js (line 15947)
h(Object browserEvent=Event resize button=-1 type=resize)ext-all-debug.js (line 1630)
getViewWidth(click clientX=0, clientY=0)ext-base.js (line 10)
[Break on this error] defaultSrc : panel.getFrame().getDocumentURI()

[hendricd]

Your tools configs are not assigned to the Iframe portlet panels, but rather the portlet columns (standard panels) themselves. They should be defined as such:



autoScroll: true,
items : [ {
columnWidth : .50,
style : 'padding:10px 0 10px 0',
items:[{
title: 'North State Recreation Forums',
id: 'RecForum',
defaultType: 'iframepanel',
defaults:{
height:225,
loadMask:{msg:'Loading Site...'},
autoShow: true,
tools: tools
},
tools: tools,
items:
[{defaultSrc : 'media/forums/index.html' }]
}
,{
Correct those throughout your portal column configs and try it again.

[smartesttom]

@smarttestom - You're missing an important step when adding components to parent containers after they are rendered.

Either add layoutOnTabChange:true to your centerPanel, or call doLayout yourself:



function createTabItem(id,url,title){
var centerPanel = Ext.getCmp('center_panel');
var p = centerPanel.add({id:id, title: title,defaultSrc: url});
centerPanel.doLayout();
p.show();
}


thanks your response!
i do as you said. but it doesn't work. problem still exists.

[hendricd]

@smartesttom - Might be wrong but, I really don't think the problem is with MIF.
Ext Containers were not designed to be rendered without items:[]. I would recommend two things:

1) Change your ux.tabPanel to a normal Ext.TabPanel (just to eliminate the possibility of a problem there)
2) Add a blank Panel to your initial TabPanel config and see if the problem persists.

If you have no luck there, post your dilemma to the general Help Forum for a wider audience.

[mbogdanovich]

This has taken out the add graphic out of my portlet header...strange that the close is still there.

[hendricd]

@Matt - Sorry, I can't tell much with that photo other than, it's apparent you still don't have your tools array defined in the right place. Do you have a public URL for examination or just post your latest layout config again.

The iframesdemo.html has examples of MIF's as portlets anyway with tools buttons. Have you checked them out yet?

[mbogdanovich]

Doug,

I made a number of changes based on the example, thanks for that...should have looked there first.

It seems allot more simple to me. However, when I click on the add button I get an error. The error is:

newP.activate is not a function
handler(Object browserEvent=Event mousemove button=0, Object dom=div#ext-gen135.x-tool id=ext-gen135, Object initialConfig=Object)Main_debug.js (line 14)
createToolHandler(Object browserEvent=Event mousemove button=0)ext-all-debug.js (line 15947)
h(Object browserEvent=Event mousemove button=0)ext-all-debug.js (line 1630)
getViewWidth(click clientX=0, clientY=0)ext-base.js (line 10)
[Break on this error] newP.activate();



Ext.onReady(function() {

var tools = [{
id:'plus',
handler: function(e, target, panel){
var tabs= Ext.getCmp('center-tabPanel');
if(tabs){
var newP = tabs.add({
xtype : 'iframepanel',
defaultSrc : panel.getFrame().getDocumentURI()
});
tabs.doLayout();
newP.activate();
}
}
},{
id:'close',
handler: function(e, target, panel){
panel.ownerCt.remove(panel, true);
}
}];
var panel = new Ext.Panel({
id:'main-panel',
layout:'border',
border: true,
bodyBorder: true,
renderTo: 'main',
width: 1050,
height: 1100,
// applied to child components
items:[{
region:'north',
// height of both panels
height: 240,
bodyStyle : "background-color:transparent; border-color: #ffffff;",
border: false,
items: [{
id: 'north-panel',
region: 'north',
// height of just north
height: 130,
html:'<h1 align="left" style="color:#ffffff;">mydomain.com</h1>',
style: 'background-image:url(images/lake3.jpg); background-repeat:no-repeat;'
},{

region: 'center',
border: true,
defaultType: 'iframepanel',
defaults:{height:125,
loadMask:{msg:'Loading Site...',
fitToFrame:true}
},

items:[{
defaultSrc: 'northPanel/advertising/nPanelAdvert.cfm',
scrollBar: false
}]

}]
},{
region:'west',
id:'west-panel',
title:'Tools',
split:true,
width: 150,
minSize: 50,
maxSize: 400,
style: 'background:#ffffff',
collapsible: true,
margins:'0 0 0 5',
layout:'accordion',
layoutConfig:{
animate:false
},
items: [{
title:'Navigation',
border:false,
iconCls:'nav'
},{
title:'My Favorites',
html:'<p>Some settings in here.</p>',
border:false,
iconCls:'settings'
}]
},{
region: 'center',
id:'center-panel',
autoScroll:true,
layout:'fit',
activeTab:0,
items:
new Ext.TabPanel({
deferredRender:false,
id: 'center-tabPanel',
activeTab:0,
height: 400,
items:[{
title: 'Activity Search',
closable:false,
autoScroll:true,
activeTab:0,
layout: 'fit',
items:
new Ext.TabPanel({
deferredRender:false,
activeTab:0,
defaultType: 'iframepanel',
defaults:{height:300,
loadMask:{msg:'Loading Site...'},
loadMask:true,
autoShow: true
},
items:[{
title: 'Region Search',
closable:false,
defaultSrc: 'assets/regionsearch.cfm'

},{
title: 'Topic Search',
closable:false,
defaultSrc: 'assets/topicsearch.cfm'
}]
})
},{
xtype : 'portal',
id: 'portal_system',
title: 'Widgets',
autofit: true,
closable: false,
autoScroll: true,
items : [ {
columnWidth : .50,
style : 'padding:10px 5px 10px 5px',
defaultType: 'iframeportlet',
defaults:{loadMask:{msg:'Loading Site...'},
autoShow: true,
tools: tools
},
items:[{
title: 'North State Recreation Forums',
id: 'RecForum',
height:225,
defaultSrc : 'media/forums/index.html',
tools: tools
}
,{
title: 'Outdoor Articles',
height:350,
defaultSrc : 'media/rss/index.cfm',
tools: tools

},{
title: 'Outdoor Images',
id: 'outDoorImages',
height:475,
defaultSrc : 'media/readerGallery/index.html',
tools: tools
},{
title: 'Whiskeytown Cam',
id: 'WhiskeyCam',
height:225,
defaultSrc : 'media/webCam/WebCam.html',
tools: tools
}]
}, {
columnWidth : .50,
style : 'padding:10px 5px 10px 5px',
defaultType: 'iframeportlet',
defaults:{loadMask:{msg:'Loading Site...'},
autoShow: true,
tools: tools
},
items:[{
title: 'Weather',
id: 'weather',
height: 450,
defaultSrc : 'weather/index.cfm',
tools: tools
},{
title: 'Fish Map',
id: 'FishMap',
height:300,
defaultSrc : 'media/fishMap/index.html',
tools: tools
},{
title: 'Recreation Slide Show',
id: 'RecSlideShow',
height:375,
defaultSrc : 'media/publisherGallery/index.html',
tools: tools
}]
}]
},{
title: 'Site Use Guide',
closable:false,
autoScroll:true,
layout: 'fit',
items:[{
autoLoad:{url:'assets/instructions.cfm',
scripts: true}
}]
}]
})
},{
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: 800,
defaultSrc: 'eastpanel/epanel.cfm'
}]
},{
region:'south',
title: 'collapsible',
split:true,
height: 50,
minSize: 100,
maxSize: 600,
collapsible: true,
margins:'0 0 0 0'
}
]
});
});

[hendricd]

Try newP.show()

[mbogdanovich]

newP.show() in the firebug window gave me the error:
newP is not defined

Also, I PMed you.

[hendricd]

Post just your tools handler again

[mbogdanovich]

var tools = [{
id:'plus',
handler: function(e, target, panel){
var tabs= Ext.getCmp('center-tabPanel');
if(tabs){
var newP = tabs.add({
xtype : 'iframepanel',
defaultSrc : panel.getFrame().getDocumentURI()
});
tabs.doLayout();
newP.activate();
}
}
},{
id:'close',
handler: function(e, target, panel){
panel.ownerCt.remove(panel, true);
}
}];

[hendricd]

var tools = [{
id:'plus',
handler: function(e, target, panel){
var tabs= Ext.getCmp('center-tabPanel');
if(tabs){
var newP = tabs.add({
xtype : 'iframepanel',
defaultSrc : panel.getFrame().getDocumentURI()
});
if(newP){
tabs.doLayout();
newP.show();
}
}
}
},{
id:'close',
handler: function(e, target, panel){
panel.ownerCt.remove(panel, true);
}
}];
I hope this is not your first attempt at an Ext project and you've looked at some of the examples.

[mbogdanovich]

Worked like a charm....

I built this from many examples. Yes this is my first EXT project and learning has been rough. I have combed the forum, built all examples in the learn tab, read many books on javascript, tried to cram this stuff down my throat. Every day it makes more sense, but I cant learn it fast enough. Any suggestions would be great.

You will get a donation in your slot from me.

Thanks!

[buenavida]

Thanks for your ManagedIFrame, it is great and I am building something using it.

If I may ask you a question about the id of the iframepanel added.

I need to access the id of the frame so I can use notation like frame["_myFrameId"].
I noticed through firebug that the iframe added using your component can not be queried as above.

here is the way I have created the iframe:


tree = new Tree.TreePanel({
title:treeTitle,
useArrows:true,
autoScroll:true,
animate:true,
enableDD:true,
containerScroll: true,
loader: _treeLoader,
collapsed: Cookies.get('expandedAccordionPanelName') != panelStateCookieName,
tbar: menubar,
listeners: {
'click': {
fn: function(node) {
_debugNodeClick = node;
_debugPathClick = node.getPath();

// Save in the cookie the tree NODE clicked
Ext.state.Manager.set(treeStateCookieName, _debugPathClick);

// only node has link
if (!node.hasChildNodes() && node.isLeaf() ) {
var _myMainPanel = Ext.getCmp(__mainPanelId); // __mainPanelId is defined in index.jsp
if (node.attributes.typeUrl == 'externalUrl')
{
_myMainPanel.loadUrl(node);
}
}
}
}
}
});
while loadUrl function is as follows:



loadUrl : function(node) {
var _activeTabId = 'myTab';

this.add({
xtype:'iframepanel',
id: _activeTabId,
title: node.text,
defaultSrc: node.attributes.linkName,
border:false
,listeners: {
'documentloaded' : {
fn: function() {
if ((node.id == 'Foreign1') || (node.id == 'Foreign2') || (node.id == 'Foo'))
{
console.log (node.id + ' loaded');
console.log('_activeTabId = ' + _activeTabId);

var dst = node.attributes.crossFrameLink;
var msg = node.attributes.crossFrameUid;

console.log('dest = ' + dst);
console.log('msg = ' + msg);

__debug123 = Ext.getCmp(_activeTabId);

console.log('1234 __debug123 = ' + __debug123);

YAHOO.util.CrossFrame.send(node.attributes.crossFrameLink,
frames['0'],
msg);
}
}
}
}
});
I have made a wrong assumption that the frame created using code above will have an id of _activeTabId, so I can go and refer somewhere else
in my code like frames[_activeTabId] which returns nothing.

Is there a way for me to find out the real id of the frame that gets greated using ManagedIFramePanel ???

I am trying to do cross - domain message passing from my application to the sub-application which is housed in the frame of my application.

Thanking you in advance Hendrick.

Best Regards
Marty

[hendricd]

@buenavida - _activeTabId used in your context is the Ext component ID of the MIFP, not the underlying frame. However, the documentloaded event passes the MIF to the event handler:



loadUrl : function(node) {
var _activeTabId = 'myTab';

this.add({
xtype:'iframepanel',
id: _activeTabId, //should really be unique
title: node.text,
defaultSrc: node.attributes.linkName,
border:false
,listeners: {
'documentloaded' : {
fn: function(frame) {
if ((node.id == 'Foreign1') || (node.id == 'Foreign2') || (node.id == 'Foo'))
{
console.log (node.id + ' loaded');
console.log('_activeTabId = ' + _activeTabId);

var dst = node.attributes.crossFrameLink;
var msg = node.attributes.crossFrameUid;

console.log('dest = ' + dst);
console.log('msg = ' + msg);

__debug123 = Ext.getCmp(_activeTabId);

console.log('1234 __debug123 = ' + __debug123);

YAHOO.util.CrossFrame.send(node.attributes.crossFrameLink,
frame.doms['0'],
msg);
}
}
}
}
});
The id of the iframe (within the event handler) is just frame.id.

[JeffBurr]

First, thank you for the extension. It provided great help in several projects.

I have a problem, though. I created a great system for popping-up a window with "poll" questions in sync with a media player. It uses an Ext.window with a MIF that goes to get the poll questions, saves the responses, and presents the results.

On my machine (and several other respectable Windows machines using IE) this worked perfectly. I considered the project done and moed on (too soon). Turns out that on machines with less local processing power, there is often a huge wait time for the page in the MIF to load. It will eventually load but can take minutes, which is obviously no good.

I am not doing anything especially unique, using setSrc to load a local file. Does anyone have clue(s) as to why this might happen and how to approach it?

Thanks -