PDA

View Full Version : ux.ManagedIframePanel (1.05, 1.0 baseline closed)



Pages : [1] 2 3

hendricd
29 Oct 2007, 2:24 PM
Note: The new 1.2 baseline (http://extjs.com/forum/showthread.php?t=40961) is now the current development track for MIF/MIFP.

ux.ManagedIFrame (Release 1.05)

Some features available:
UpdateManager.update and load support (to IFrames document).
advanced scripting support.
loadMask support.
Cross-frame messagingSupported events:
documentloaded
domready (fired when used with Updatemanager.update method, or when the document DOM reports ready)
message[: subject]
exception
ux.ManagedIframePanel (Release 1.05, extends Ext.Panel) leverages the cool layout management features of a Panel, but embeds a ManagedIframe into the body of the panel. This preserves the native header, footer, and toolbar support of a standard panel, but permits creation of complex body layouts surrounding an IFrame.

Related Links:
Wiki Manual here (http://extjs.com/learn/Extension:ManagedIframe).
FF IFRAME Refresh Troubles (http://extjs.com/forum/showthread.php?p=110004#post110004)?
For an advanced demonstration, see post: "Load Ext once, and apply it to your frames" (http://extjs.com/forum/showthread.php?p=120384#post120384).Examples:
Extract the current source files and demoPack.zip directly into a new/existing: /examples/miframe directory of your standard 2.x Ext.distribution (except for the desktop.zip demo -- that should go in /examples/desktop).

Updated: Version 1.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;
Updated: Version 1.02 released. MIF now supports tag-based message filtration during cross-frame messaging.

Updated: Version 1.03 released. MIF/Panel can now handle message:tag event registration like this:


MIF.on('message:startup', startupHandler);

or
var MIFP = new Ext.ux.ManagedIframePanel({
listeners: { 'message:ticker', tickerFeedHandler },
.... });

and, add fitToParent config (thx Condor) for free-standing MIFPanels only.

Updated: Version 1.04 released. fixed dragMask problem with nested border layouts, writeScript fixes for Safari, added MIF.getDocumentURI method, improved state Management.

Updated 4/11/08: Version 1.05 released. fixed dragMask bleed-thru on IE. This version adds a new hideMode config option for MIFPanels: 'nosize' (prevents frames from refreshing using other hideModes (ie. 'display'). DragMask now uses an image shim.
See this post (http://extjs.com/forum/showthread.php?p=151509#post151509)on 1.05 upgrade notes.

Updated 4/13/2008 - The version 1.0 baseline is now closed to new development/enhancements but will likely be supported for some time to come. The new 1.1 baseline (http://extjs.com/forum/showthread.php?t=40961) is now the current development track for MIF/MIFP.

Thanks to all for the valuable feedback.

mglaser
30 Oct 2007, 1:43 AM
I use iframes alot so this will be really useful, thank you.

What would be the best way of referencing the iframe parent's Ext code, I'd like to expand a legacy HTML project running inside the iframe with some nice Ext widgets - can I pass a reference using the Javascript eval feature of your extension?

fangzhouxing
30 Oct 2007, 3:55 AM
hi,hendricd, Ext.ux.ManagedIFrame is very useful.

adds execScript method for 'eval' js source modules directly into the Iframe's window context.

The main problem of my current usage of IFrame is loading ext-all.js in every iframe page, and slows down application. Can function of execScript solve this problem?

hendricd
30 Oct 2007, 6:24 AM
What would be the best way of referencing the iframe parent's Ext code, I'd like to expand a legacy HTML project running inside the iframe with some nice Ext widgets - can I pass a reference using the Javascript eval feature of your extension?


The main problem of my current usage of IFrame is loading ext-all.js in every iframe page, and slows down application. Can function of execScript solve this problem?


:-? Much of that depends on your IFrame's adherence to the 'same-domain' policy enforced by your browser (is it loaded by setting it's SRC attribute?) and how much control you have over it's legacy content and scripting environment. As a general rule, IFRAMEs are expensive to operate and in the end, it's more advisable to convert them to 'true' Ext.Containers if your going to want Web2.0 behaviour for their content. Then you forego all of these issues:

But, to answer to your, question... Yes it is possible to eval a modified (for IE) version of ext-all.js (or better yet, package deployment) into the IFrame window context. It can be done either thru execScript or using the reverse method: (accessing the (cached somewhere) source strings directly from the parent like:


eval(parent.codeCache['ext-base']);
eval(parent.codeCache['ext-core']);
But there is an issue with EventManager(part of ext-core) on IE that you'll need to consider (more on that here (http://extjs.com/forum/showthread.php?t=16439)). For 1.1.1 and 2.0b+ this has been solved though. I have a custom version of EventManager that considers the current value of Ext.isReady, before rendering its' DocumentReady tags and event handlers which aren't really needed if you're apply Ext to an existing IFRAME DOM structure. I have a working 1.1.1 Demo site that demonstrates all this in action (using modular Ext packages and something called ux.ModuleManager providing something like Ext.require('ext-base','ext-core','forms'); ) but my current environment would not support the pounding its likely to receive. I may just zip- it-up for download at some point.

Then, there are the stylesheets (ext-all.css) that one would need to render in the document as well. There are couple if different ways of handling that as well (dynamic link or style tags, etc). The next version of ManagedIFrame will include a styleSheet management interface as well. ;)

Then, there is absolute vs relative addressing withing the IFRAME document as well, but the parent window knows where it should be looking for other externals(more scripting required).

General rule-of-thumb with IFRAME content: You can't touch it's document interface(trust) if you didn't generate it either locally or from a same-domain source.

That all seems like a lot of trouble to go through tho doesn't it.

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

fangzhouxing
30 Oct 2007, 7:30 AM
hendricd,Thanks for your reply.

After reading your post, I am sorry I think my question is still not answered.Can you provide more detail?

hendricd
30 Oct 2007, 8:09 AM
hendricd,Thanks for your reply.

After reading your post, I am sorry I think my question is still not answered.Can you provide more detail?

/:) I believe I did:



But, to answer to your, question... Yes it is possible to eval a modified (for IE) version of ext-all.js (or better yet, package deployment) into the IFrame window context. It can be done either thru execScript or using the reverse method: (accessing the (cached somewhere) source strings directly from the parent like:....

as well as the issues you are going to encounter...

As I mentioned earlier, much depends on your iframe implementation...

Are you writing content to it directly (likely not yet) or just setting it's src attribute to load a full page in there?
Does that src come from the local-domain ?

I don't know where you've been or where you want to go with it ;)

mglaser
30 Oct 2007, 12:48 PM
Thanks for the detailed reply.

In my case both sites come off the same domain and I have full control over both projects, however the legacy app logic is very much oriented around full page reloads and form postings, so thats why it would be nice to leave it like that but spruce up some of the input forms without loading a separate copy of Ext on every page refresh.

I'll have a bit of a play with an iframe, but long term the plan is to convert it all to Ext so I may just have to get down and do it :)

hendricd
30 Oct 2007, 12:53 PM
Sounds like the right plan.

fangzhouxing
30 Oct 2007, 5:08 PM
hendricd, Yes, I just setting iframe's src attribute to load a full page (with ext-all.js, ext-all.css like the main page) and
that src come from the local-domain.How can I improve this through Ext.ux.ManagedIFrame?

hendricd
7 Nov 2007, 7:48 AM
var win = desktop.createWindow({
id: 'your-Iframewin',
title:'Managed Iframe Window',
width:740,
height:480,
layout : 'fit',
items: {
xtype : 'iframepanel',
defaultSrc : 'yourpage.html'
},
shim:false,
frame:true,
animCollapse:false

});

win.show();

davidchantf
7 Nov 2007, 12:54 PM
I tried your example and now able to load my legacy html into the desktop window demo, there are some hyper links are using javascript function in my legacy html (some inline, some referece to other js file), it seems these javascripts function are not found when I click them, both IE and firefox give error said function is not defined.

any idea how to make them visible to these iframe html?

hendricd
7 Nov 2007, 1:07 PM
@davidchantf - You must consider that an iframe does not share the Javascript context of it's parent browser page.

If you have dependent functions required to support the Iframes document, those function/libraries must be defined/loaded there (within the IFrames Document) as well.

davidchantf
9 Nov 2007, 9:00 AM
Something wrong in somewhere, my iframe is loaded, but whenever I click on a link inside iframe, which use javascript function defined within the iframe html, browser said function is not defined, the same page works fine when loaded outside iframe.

I even tested to call the iframe javascript function from main window, and that works. I checked the DOM in firebug, and see these javascript functions are defined in contentWindow of the iframe.

This only happens to my legacy html, which is very complex with a lot of javascript functions.

When I write a simple test html with a couple of javascript functions in iframe, then everything works fine.

but why it is not visible within iframe itself for this complex html?

any idea where I should look at?

thanks.

hendricd
9 Nov 2007, 9:07 AM
Are your iframes functions defined/loaded via <script> tags using a relative path-name ("../../js/myFuncs.js")?

Iframes would typically (might) need to use absolute pathnames in such URLs.

davidchantf
9 Nov 2007, 9:37 AM
It turns out there is <base target="_top"> in my leagcy html cause problem, after I removed this line, now all these javascript functions works.

I am not sure why this is problem, or at least the firefox should give better error mesg.

temporary
13 Nov 2007, 2:50 AM
Hi henricd,

great stuff, just what I've been looking for ;-)

But I have a question - how do i dynamically change the source of the Iframe?
I tried it with

Ext.get('my_iframe_id').src = 'http://www.extjs.com';
but this doesn't work. Nothing happens.


document.getElementById('my_iframe_id').src = 'http://www.extjs.com';
works, though.

Can you give me a hint on this? Maybe a setSource() method could be implemented?

Bye, Stephan

hendricd
13 Nov 2007, 4:27 AM
Ext.get('my_iframe_id').dom.src = 'http://www.extjs.com';

liberte
16 Nov 2007, 11:41 AM
:-? But, to answer to your, question... Yes it is possible to eval a modified (for IE) version of ext-all.js (or better yet, package deployment) into the IFrame window context. It can be done either thru execScript or using the reverse method: (accessing the (cached somewhere) source strings directly from the parent like:


I want to share the Ext code between one top level window and all its frames or iframes (or popup windows, for that matter) using NO reloading or even reevaluating of ext-all.js? I would like to do something like the following in an iframe:


Ext = new parent.Ext(window); // make window-local instance of Ext
// and then use Ext normally:
if (Ext.isReady) whatever...


Every reference to Ext in the shared Ext library code would have to be changed to something like Ext.self, and instead of accessing window directly, shared code should use Ext.self.window. These properties (Ext.self and Ext.self.window) would be set up by the Ext constructor. Then any other non-shared code could use this localized Ext object as is without changes.

Another possibility is to have every Ext component know its window-local ext instance, but this requires more space storing this singleton (one per window) in each component.

This seems doable to me. Is it worth the trouble? Loading/evaluating the the ExtJS code requires about 1/2 second on my machine, and these add up across each iframe. ExtJS and additional libraries could grow to a much larger size if we didn't have to worry about the load time for each page.

liberte
16 Nov 2007, 12:04 PM
Well, on reflection, it doesn't help if Ext code references Ext.self because that would still be the same global Ext rather than the local Ext that I was intending. (If you don't follow that, never mind - I was confused too. :-/)

Basically there is no way to get the local Ext context without storing it (directly or indirectly) in each component.

hendricd
16 Nov 2007, 12:13 PM
Basically there is no way to get the local Ext context without storing it (directly or indirectly) in each component.Correct, the only way you'll get a 'useful' Ext (window.document) context for your Iframe, is either:

a) load ext-all.js via script tag in your IFrame's document (likely cached, but still expensive), or..
b) eval the contents (of a modified for IE - EventManager) ext-all.js into the iframes window(global) namespace, (but you must 'own' the Iframes' document to do that). That's also specifically why ux.ManagedIframe.execScript (http://extjs.com/learn/ManageIframe:Manual:Frame_Scripting#managedIframe:execScript) was implemented ;)

tysonofyork
20 Nov 2007, 6:32 AM
I think this may be broken with the 2.0 RC1 release.

Is anyone else experiencing this?

It worked great before RC1, but now it doesn't seem to insert the iframe into the tabs. Here's the code that was working fine:



var quoteId = 'quote' + quotenum;
var iframe = new Ext.ux.ManagedIFrame({
autoCreate: {
id: 'iframe-' + quoteId,
frameBorder: 0,
cls: 'x-panel-body',
width: '100%',
height: 500
}
});

if (!tabs.findById('quote' + quotenum)) {
tabs.add({
id: quoteId,
title: 'Quote# ' + quotenum,
body: iframe
}).show();

iframe.load('ViewQuote.aspx?QN=' + quotenum);
}
else {
tabs.activate(quoteId);
}

hendricd
20 Nov 2007, 6:52 AM
For RC1, make sure these are set on TabPanel:

deferredRender:false,
layoutOnTabChange:true //new for RC1

then,



var quoteId = 'quote' + quotenum;

if (!tabs.findById(quoteId)) {

var iframe = new Ext.ux.ManagedIFrame({
autoCreate: {
id: 'iframe-' + quoteId,
frameBorder: 0,
cls: 'x-panel-body',
width: '100%',
height: 500
}
});

tabs.add({
id: quoteId,
title: 'Quote# ' + quotenum,
body: iframe
});
//tabs.doLayout(); //required when layout changes and layoutOnTabChange = false.

iframe.load('ViewQuote.aspx?QN=' + quotenum);
}

tabs.activate(quoteId); //should force a doLayout for you

hendricd
20 Nov 2007, 12:30 PM
See the first post of this thread for more details.

The ux.tutorial (http://extjs.com/learn/Extension:ManagedIframe) has also been updated.

sj137
27 Nov 2007, 8:49 AM
Hi guys,

I'd like to view xml files and rss files in a managed iframe... when i view the files in the normal browser window both FF and IE automatically pretty-print the xml and provide +&- buttons to open and close nodes....

however when i view in the same files in the managed iframe, i only see the content and not the xml tags....

is there a way to view the browser-rendered version... in the managed iframe?

Many thanks in advance

SJ

i.e. how it appears in a standard iframe...
;-)

hendricd
27 Nov 2007, 9:04 AM
sure, just set the iframes source to the target XML document:



uxIframe.dom.src = '/data/your.xml';

sj137
27 Nov 2007, 9:49 AM
Thanks for responding so fast!

unfortunately i'm still having the same problem though...

here's my code:




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


var win = desktop.createWindow({
id: 'your-Iframewin',
title:'Managed Iframe Window',
width:740,
height:480,
body: uxIframe,
shim:false,
frame:true,
animCollapse:false
});

win.show();

uxIframe.dom.src = "myrss.rss";





***I'm using the Ext web-desktop example to create a window with the managed iframe...***

hendricd
27 Nov 2007, 9:55 AM
So, give it a src:



var uxIframe = new Ext.ux.ManagedIFrame({autoCreate:
{id:'dynamicIframe1'
,src: 'your.xml'
,cls:'x-window-body',width:'100%',height:'100%'}});

sj137
27 Nov 2007, 10:14 AM
Hi Doug,

really appreciating the help, many thanks

but i tried that first, (putting the src attribute inline) then i thought to move it to after "win.show();"

...i must be doing something wrong somewhere else... but i've checked everything twice and can't seem to find where im going wrong...

...
:-S

perhaps it's something todo with the web-desktop example stuff....

hendricd
27 Nov 2007, 10:19 AM
Did you look at the desktop.zip example on the first post of the 2.0 ux page? It has working examples.

Does the iframe render at all? Try setting the src to 'http://www.google.com' and see what you get. Could be your src is not resolvable ?

sj137
27 Nov 2007, 10:29 AM
Hi Doug,

yes it renders and displays the correct content, but it strips the xml tags...

if i try a webpage like google it displays perfectly...

I've just tried running the following code (see below) from firebug and it worked!! (ie it showed the rss as an pretty-printed xml document with +&- buttons etc...)

...so i don't know why it didn't work with the desktop example.

I'll check the working example you pointed out and post back with results...




Ext.get(document.body).update('<div id="test"></div>');
new Ext.ux.ManagedIFrame({autoCreate:{id:'dynamicIframe1',src:"myrss.rss",cls:'x-window-body',width:'500px',height:'400px'}});

hendricd
27 Nov 2007, 10:35 AM
Ah, IE only is the problem.

Make sure your server returns Content_type: text/xml or application/xml in the response.

sj137
27 Nov 2007, 11:21 AM
Cheers Doug, absolutely right, it works fine in IE but not in FF.... :-(

not sure how i can change the server's response content_type since i'm fetching a file.... but will look into it.

Many thanks!

;)

hendricd
27 Nov 2007, 11:24 AM
A file?

That's why. On IE, with the absence of a Content_type, the iframe will not create the necessary XMLDOC interface for your file, thus no pretty features.

sj137
28 Nov 2007, 3:26 AM
Hi it's me again....

...sorry to disagree, but i'm finding all my problems are with firefox...

IE seems to correctly pretty-print the rss xml, whether i send it as a file, or as text from my servlet (with either content_type... text/xml or application/xml)

but firefox doesn't display the xml nicely no-matter how i send it... even worse when i send it from my servlet, it produces lots of errors from a file called FeedProcessor.js which i've never seen before...

but ...and this doesn't make any sense... if i simply call
Ext.get(document.body).update('<div id="test"></div>');

from firebug (ie replace everything with a new empty div...)

and then call....



new Ext.ux.ManagedIFrame({autoCreate:{
id:'dynamicIframe1',
src:"abc.rss",
cls:'x-window-body',
width:'500px',
height:'400px'
}});


it shows the rss xml perfectly...!!

But if i just modify your desktop example to pick up the local file (or the returned xml from my servlet with the content_type set) ...it doesn't :((

it's been suggested to me that this is being caused by firefox having 2 internal dom models... (:|

hendricd
28 Nov 2007, 5:46 AM
Can you post your project, so we can see your html and constructors ?

sj137
28 Nov 2007, 7:35 AM
sure thing :)

please find attached the files for the example desktop app

it's the same as your desktop.zip download, except i've added a sample rss file and modified the sample.js slightly

click the IFramedGrid Tab to view the rss file...

it works ok in IE (apart from a strange initial error...) but not in FF...

(I haven't included my java app, but if you serve the xml via a server the result is the same...)

Many thanks for looking into this :D

best regards

SJ

hendricd
28 Nov 2007, 9:25 AM
Opening your rss file from the filesystem doesn't render it as an xml document, but adding this does:



<?xml version="1.0" encoding="ISO-8859-1"?>
<rss version="2.0">
<channel>
<title>ASP @ BellaOnline</title>
<...

FF doesn't know it's XML without the PI.

KENT
3 Dec 2007, 11:00 PM
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();

Hello,
How can I make the managedIframe to creat an autoscroll bar ? I put an attribute 'autoScroll:true' but it didnt work in Bogus Window.

I also have a TabPanel, it has 3 tab, I used managedIframe in 2 tabs, both has autoScroll:true .. but only 1 tab works :| What do I have to do now ?

KENT
4 Dec 2007, 12:22 AM
Hi again,
I found the problem. The managedIframe has conflicted with mootools. :( How to solve this ? Please help me out

JeffHowden
4 Dec 2007, 12:30 AM
I found the problem. The managedIframe has conflicted with mootools. :( How to solve this ? Please help me out

I don't mean to suggest the obvious, but one possible solution is to remove mootools. Now, in all seriousness, does mootools provide anything you can't get with Ext?

KENT
4 Dec 2007, 1:52 AM
I don't mean to suggest the obvious, but one possible solution is to remove mootools. Now, in all seriousness, does mootools provide anything you can't get with Ext?

I'm not sure. But I just build mootools with Ajax feature and its core ( and some dependencies ) Removing mootools is okay but not a good solution.

KENT
4 Dec 2007, 2:36 AM
Agent !
I'm so sorry. There's no conflicts with mootools. :| The problem is something in desktop.css ( of mxracer's desktop 2.0 )



/*
* Ext JS Library 2.0
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://www.extjs.com/license
*/

html, body {
font: normal 12px tahoma, arial, verdana, sans-serif;
margin: 0;
padding: 0;
border: 0 none;
overflow: hidden;
height: 100%;
}

.start {
background-image: url(images/taskbar/black/startbutton-icon.gif) !important;
}

.quickstart-menubutton {
background-image: url(images/taskbar/black/quickstart-menubutton-icon.gif) !important;
}

.bogus {
background-image: url( images/bogus.png ) !important;
}

.logout {
background-image: url( images/logout.png ) !important;
}

.settings {
background-image: url( images/gears.png ) !important;
}

#dpanels {
width: 250px;
float: right;
}

#dpanels .x-panel {
margin: 15px;
}

#dpanels .x-date-picker {
border: 0 none;
border-top: 0 none;
background: transparent;
}

#dpanels .x-date-picker td.x-date-active {
background: #ffffff;
}

#dpanels .x-date-picker {
width: 100% !important;
}

#x-desktop {
width: 100%;
height: 100%;
border: 0 none;
position: relative;
overflow:hidden;
zoom:1;
background:#f9f9f9 url( ../wallpapers/qwikioffice.jpg ) no-repeat fixed center center;
}

#ux-taskbar .x-btn {
float: left;
margin: 1px 0 0 1px;
position:relative;
}

#ux-taskbar-start .x-btn {
float: left;
margin: 0;
padding-left: 8px;
position:relative;
}

#ux-taskbar button {
/* width: 150px;
overflow: hidden; */
text-align: left;
color: #ffffff;
}
#title-bar-wrapper {
height:35px;
}

#title-bar {
color: #225599;
padding: 9px 7px;
font: bold 16px tahoma,arial,verdana,sans-serif;
float:left;
}

#x-logout {
float:right;
padding:6px 7px;
}

.x-btn-text-icon .x-btn-center .logout {
background-position:0pt 3px;
background-repeat:no-repeat;
padding:3px 0pt 3px 18px;
}

#ux-taskbar {
background:transparent none;
height:30px;
margin:0;
padding:0;
position:relative;
z-index:12001;
}

.x-btn-icon .ux-quickstart-button-center .x-btn-text{
background-position: center;
background-repeat: no-repeat;
height: 16px;
width: 16px;
cursor:pointer;
white-space: nowrap;
padding:0;
}

.x-btn-icon .ux-taskbutton-center .x-btn-text{
background-position: center;
background-repeat: no-repeat;
height: 16px;
width: 16px;
cursor:pointer;
white-space: nowrap;
padding:0;
}

.x-btn-icon .ux-taskbutton-center{
padding:1px;
}

.x-btn-text-icon .ux-taskbutton-center .x-btn-text{
background-position: 0 6px;
background-repeat: no-repeat;
padding:7px 0px 7px 20px;
}

.x-btn-text-icon .ux-startbutton-center .x-btn-text{
background-position: 0 4px;
background-repeat: no-repeat;
color:#000000 !important;
font-weight:bold;
padding:8px 0px 8px 28px;
}

.ux-taskbutton-left, .ux-taskbutton-right{
font-size:1px;
line-height:1px;
}
.ux-taskbutton-left{
width:4px;
height:28px;
background:url(images/taskbar/black/taskbutton.gif) no-repeat 0 0;
}
.ux-taskbutton-right{
width:4px;
height:28px;
background:url(images/taskbar/black/taskbutton.gif) no-repeat 0 -28px;
}
.ux-taskbutton-left i, .ux-taskbutton-right i{
display:block;
width:4px;
overflow:hidden;
font-size:1px;
line-height:1px;
}
.ux-taskbutton-center{
background:url(images/taskbar/black/taskbutton.gif) repeat-x 0 -56px;
vertical-align: middle;
text-align:center;
padding:0 5px;
cursor:pointer;
white-space:nowrap;
}

#ux-taskbar .ux-taskbutton-left{
background-position:0 0;
}
#ux-taskbar .ux-taskbutton-right{
background-position:0 -28px;
}
#ux-taskbar .ux-taskbutton-center{
background-position:0 -56px;
}

#ux-taskbar .x-btn-over .ux-taskbutton-left{
background-position:0 -252px;
}
#ux-taskbar .x-btn-over .ux-taskbutton-right{
background-position:0 -280px;
}
#ux-taskbar .x-btn-over .ux-taskbutton-center{
background-position:0 -308px;
}

#ux-taskbar .x-btn-click .ux-taskbutton-left{
background-position:0 -168px;
}
#ux-taskbar .x-btn-click .ux-taskbutton-right{
background-position:0 -196px;
}
#ux-taskbar .x-btn-click .ux-taskbutton-center{
background-position:0 -224px;
}

#ux-taskbar .active-win .ux-taskbutton-left{
background-position:0 -84px;
}
#ux-taskbar .active-win .ux-taskbutton-right{
background:url(images/taskbar/black/taskbutton.gif) no-repeat 0 -112px;
}
#ux-taskbar .active-win .ux-taskbutton-center{
background:url(images/taskbar/black/taskbutton.gif) repeat-x 0 -140px;
}
#ux-taskbar .active-win .ux-taskbutton-center button {
color:#fff;
}

#spacer {
height: 25px;
float: left;
width: 0;
overflow: hidden;
margin-top: 2px;
}

.x-window-body p,.x-panel-body p {
padding: 10px;
margin: 0;
}

.x-window-body {
background:#fff;
}

.x-window-mc {
background:#ffffff none;
border:1px solid #000000;
}

.x-window-maximized .x-window-bc {
height:0;
}

.icon-grid {
background-image:url(images/grid.png) !important;
}
.add {
background-image:url(../../Ext/shared/icons/fam/add.gif) !important;
}
.option {
background-image:url(../../Ext/shared/icons/fam/plugin.gif) !important;
}
.remove {
background-image:url(../../Ext/shared/icons/fam/delete.gif) !important;
}
.save {
background-image:url(../../Ext/shared/icons/save.gif) !important;
}
.accordion {
background-image:url(images/accordian.gif) !important;
}
.tabs {
background-image:url(images/tabs.gif) !important;
}

/* IM window icons */

.user {
background-image:url(images/member.png) !important;
}

.user-add {
background-image:url(../../Ext/shared/icons/fam/user_add.png) !important;
}

.user-delete {
background-image:url(../../Ext/shared/icons/fam/user_delete.png) !important;
}

.connect {
background-image:url(../../Ext/shared/icons/fam/connect.png) !important;
}

.user-girl {
background-image:url(../../Ext/shared/icons/fam/user_female.png) !important;
}

.user-kid {
background-image:url(../../Ext/shared/icons/fam/user_green.png) !important;
}

.user-suit {
background-image:url(../../Ext/shared/icons/fam/user_suit.png) !important;
}

.ux-start-menu {
background:transparent none;
border:0px none;
padding:0;
}

.ux-start-menu-tl .x-window-header {
color:#f1f1f1;
font:bold 11px tahoma,arial,verdana,sans-serif;
padding:5px 0 4px 0;
}

.x-panel-tl .x-panel-icon, .ux-start-menu-tl .x-panel-icon {
background-position:0pt 4px;
background-repeat:no-repeat;
padding-left:20px !important;
}

.ux-start-menu-tl {
background: transparent url(images/taskbar/black/start-menu-left-corners.png) no-repeat 0 0;
padding-left:6px;
zoom:1;
z-index:1;
position:relative;
}

.ux-start-menu-tr {
background: transparent url(images/taskbar/black/start-menu-right-corners.png) no-repeat right 0;
padding-right:6px;
}

.ux-start-menu-tc {
background: transparent url(images/taskbar/black/start-menu-top-bottom.png) repeat-x 0 0;
overflow:hidden;
zoom:1;
}

.ux-start-menu-ml {
background: transparent url(images/taskbar/black/start-menu-left-right.png) repeat-y 0 0;
padding-left:6px;
zoom:1;
}

.ux-start-menu-bc {
background: transparent url(images/taskbar/black/start-menu-top-bottom.png) repeat-x 0 bottom;
zoom:1;
}

.ux-start-menu-bc .x-window-footer {
padding-bottom:6px;
zoom:1;
font-size:0;
line-height:0;
}

.ux-start-menu-bl {
background: transparent url(images/taskbar/black/start-menu-left-corners.png) no-repeat 0 bottom;
padding-left:6px;
zoom:1;
}

.ux-start-menu-br {
background: transparent url(images/taskbar/black/start-menu-right-corners.png) no-repeat right bottom;
padding-right:6px;
zoom:1;
}

.x-panel-nofooter .ux-start-menu-bc {
height:6px;
}

.ux-start-menu-splitbar-h {
background-color:#d0d0d0;
}


.ux-start-menu-bwrap {
background:transparent none;
border:0px none;
}

.ux-start-menu-body {
background:transparent none;
border:0px none;
}

.ux-start-menu-apps-panel {
background:#ffffff none;
border:1px solid #1e2124;
}

.ux-start-menu-tools-panel {
border:0px none;
background:transparent url(images/taskbar/black/start-menu-right.png) repeat-y scroll right 0pt;
}

#ux-taskbar-start {
background:#000000 url(images/taskbar/black/taskbar-start-panel-bg.gif) repeat-x left top;
left:0px;
padding:0;
position:absolute;
}

#ux-quickstart-panel {
background:#000000 url(images/taskbar/black/taskbar-start-panel-bg.gif) repeat-x left top;
left:0px;
padding:0;
position:absolute;
}

#ux-taskbar-start .x-toolbar {
background: none;
padding:0px;
border:0px none;
}

#ux-taskbuttons-panel {
background:#000000 url(images/taskbar/black/taskbuttons-panel-bg.gif) repeat-x left top;
padding-top:0;
position:relative;
}

.ux-quickstart-strip-wrap {
width:100%;
overflow:hidden;
position:relative;
zoom:1;
}

ul.ux-quickstart-strip {
display:block;
width:5000px;
zoom:1;
}

ul.ux-quickstart-strip li {
float:left;
margin-left:0px;
}


ul.ux-quickstart-strip li.ux-quickstart-edge {
float:left;
margin:0 !important;
padding:0 !important;
border:0 none !important;
font-size:1px !important;
line-height:1px !important;
overflow:hidden;
zoom:1;
background:transparent !important;
width:1px;
}

.ux-taskbuttons-strip-wrap {
/* overflow:hidden;
position:relative;
width:100%; */

width:100%;
overflow:hidden;
position:relative;
zoom:1;
}

ul.ux-taskbuttons-strip {
display:block;
width:5000px;
zoom:1;
}

ul.ux-taskbuttons-strip li {
float:left;
margin-left:2px;
}


ul.ux-taskbuttons-strip li.ux-taskbuttons-edge {
float:left;
margin:0 !important;
padding:0 !important;
border:0 none !important;
font-size:1px !important;
line-height:1px !important;
overflow:hidden;
zoom:1;
background:transparent !important;
width:1px;
}

.x-clear {
clear:both;
height:0;
overflow:hidden;
line-height:0;
font-size:0;
}

.x-taskbuttons-scrolling {
position:relative;
}

.x-taskbuttons-scrolling .ux-taskbuttons-strip-wrap {
margin-left:18px;
margin-right:18px;
}

td.ux-taskButtons-edge {
/*float:left;*/
margin:0 !important;
padding:0 !important;
border:0 none !important;
font-size:1px !important;
line-height:1px !important;
overflow:hidden;
zoom:1;
background:transparent !important;
width:1px;
}

.ux-taskbuttons-scroller-left {
background: transparent url(images/taskbar/black/scroll-left.gif) no-repeat -18px 0;
width:18px;
position:absolute;
left:1px;
top:0px;
z-index:10;
cursor:pointer;
}
.ux-taskbuttons-scroller-left-over {
background-position: 0 0;
}
.ux-taskbuttons-scroller-left-disabled {
background-position: -18px 0;
opacity:.5;
-moz-opacity:.5;
filter:alpha(opacity=50);
cursor:default;
}
.ux-taskbuttons-scroller-right {
background: transparent url(images/taskbar/black/scroll-right.gif) no-repeat 0 0;
width:18px;
position:absolute;
right:0;
top:0px;
z-index:10;
cursor:pointer;
}
.ux-taskbuttons-scroller-right-over {
background-position: -18px 0;
}
.ux-taskbuttons-scroller-right-disabled {
background-position: 0 0;
opacity:.5;
-moz-opacity:.5;
filter:alpha(opacity=50);
cursor:default;
}

.ux-toolmenu-sep {
background-color:#18191a;
border-bottom:1px solid #858789;
display:block;
font-size:1px;
line-height:1px;
margin:2px 3px;
}

.x-menu-item-active {
background: #f5f8fb url(images/taskbar/black/app-item-over.gif) repeat-x left bottom;
border:1px solid #b0c4ca;
padding: 0;
}

.ux-start-menu-tools-panel ul.x-menu-list li.x-menu-list-item a.x-menu-item {
color:#ffffff;
}

.ux-start-menu-tools-panel ul.x-menu-list li.x-menu-list-item .x-menu-item-active a.x-menu-item {
color:#000000;
}

#ux-taskbar .x-splitbar-h {
background:#000000 url(images/taskbar/black/taskbar-split-h.gif) no-repeat 0 0;
width:14px;
}

.x-window-header-text {
cursor:default;
}

/*
* Begin Start button
*/
.ux-startbutton-left, .ux-startbutton-right{
font-size:1px;
line-height:1px;
}
.ux-startbutton-left{
width:10px;
height:30px;
background:url(images/taskbar/black/startbutton.gif) no-repeat 0 0;
}
.ux-startbutton-right{
width:10px;
height:30px;
background:url(images/taskbar/black/startbutton.gif) no-repeat 0 -28px;
}
.ux-startbutton-left i, .ux-startbutton-right i{
display:block;
width:10px;
overflow:hidden;
font-size:1px;
line-height:1px;
}
.ux-startbutton-center{
background:url(images/taskbar/black/startbutton.gif) repeat-x 0 -56px;
vertical-align: middle;
text-align:center;
padding:0;
cursor:pointer;
white-space:nowrap;
}

#ux-taskbar .ux-startbutton-left{
background-position:0 0;
}
#ux-taskbar .ux-startbutton-right{
background-position:0 -30px;
}
#ux-taskbar .ux-startbutton-center{
background-position:0 -60px;
}

#ux-taskbar .x-btn-over .ux-startbutton-left{
background-position:0 -270px;
}
#ux-taskbar .x-btn-over .ux-startbutton-right{
background-position:0 -300px;
}
#ux-taskbar .x-btn-over .ux-startbutton-center{
background-position:0 -330px;
}

#ux-taskbar .x-btn-click .ux-startbutton-left{
background-position:0 -180px;
}
#ux-taskbar .x-btn-click .ux-startbutton-right{
background-position:0 -210px;
}
#ux-taskbar .x-btn-click .ux-startbutton-center{
background-position:0 -240px;
}

#ux-taskbar .active-win .ux-startbutton-left{
background-position:0 -90px;
}
#ux-taskbar .active-win .ux-startbutton-right{
background:url(images/taskbar/black/startbutton.gif) no-repeat 0 -120px;
}
#ux-taskbar .active-win .ux-startbutton-center{
background:url(images/taskbar/black/startbutton.gif) repeat-x 0 -150px;
}
#ux-taskbar .active-win .ux-startbutton-center button {
color:#fff;
}
/*
* End Start button
*/



/*
* Begin QuickStart button
*/
.ux-quickstart-button-left, .ux-quickstart-button-right{
font-size:1px;
line-height:1px;
}
.ux-quickstart-button-left{
width:4px;
height:28px;
background:url(images/taskbar/black/quickstart-button.gif) no-repeat 0 0;
}
.ux-quickstart-button-right{
width:4px;
height:28px;
background:url(images/taskbar/black/quickstart-button.gif) no-repeat 0 -28px;
}
.ux-quickstart-button-left i, .ux-quickstart-button-right i{
display:block;
width:4px;
overflow:hidden;
font-size:1px;
line-height:1px;
}
.ux-quickstart-button-center{
background:url(images/taskbar/black/quickstart-button.gif) repeat-x 0 -56px;
vertical-align: middle;
text-align:center;
padding:0;
cursor:pointer;
white-space:nowrap;
}

#ux-taskbar .ux-quickstart-button-left{
background-position:0 0;
}
#ux-taskbar .ux-quickstart-button-right{
background-position:0 -28px;
}
#ux-taskbar .ux-quickstart-button-center{
background-position:0 -56px;
}

#ux-taskbar .x-btn-over .ux-quickstart-button-left,
#ux-taskbar .x-btn-menu-active .ux-quickstart-button-left{
background-position:0 -252px;
}
#ux-taskbar .x-btn-over .ux-quickstart-button-right,
#ux-taskbar .x-btn-menu-active .ux-quickstart-button-right{
background-position:0 -280px;
}
#ux-taskbar .x-btn-over .ux-quickstart-button-center,
#ux-taskbar .x-btn-menu-active .ux-quickstart-button-center{
background-position:0 -308px;
}

#ux-taskbar .x-btn-click .ux-quickstart-button-left{
background-position:0 -168px;
}
#ux-taskbar .x-btn-click .ux-quickstart-button-right{
background-position:0 -196px;
}
#ux-taskbar .x-btn-click .ux-quickstart-button-center{
background-position:0 -224px;
}

#ux-taskbar .active-win .ux-quickstart-button-left{
background-position:0 -84px;
}
#ux-taskbar .active-win .ux-quickstart-button-right{
background-position:0 -112px;
}
#ux-taskbar .active-win .ux-quickstart-button-center{
background-position:0 -140px;
}
/*
* End QuickStart button
*/



/*
* Begin QuickStart MenuButton
*/
.ux-quickstart-menubutton-wrap {
/* width:18px; */
position:absolute;
right:0;
top:0px;
z-index:10;
}
/*
* End QuickStart MenuButton
*/



/*
* Begin Start Menu Tool
*/
.ux-start-menu-tools-panel .x-menu-item-active {
background:transparent none;
border-color:transparent;
//padding: 0;
}

.ux-startmenu-tool {
width:100%;
}

.x-btn-icon .ux-startmenu-tool-center .x-btn-text{
background-position: center;
background-repeat: no-repeat;
height: 16px;
width: 16px;
cursor:pointer;
white-space: nowrap;
padding:0;
}

.x-btn-icon .ux-startmenu-tool-center{
padding:1px;
}

.x-btn-text-icon .ux-startmenu-tool-center .x-btn-text{
background-position: 0 6px;
background-repeat: no-repeat;
padding:7px 0px 7px 20px;
}

.x-btn .ux-startmenu-tool-center .x-btn-text {
color:#ffffff;
padding:6px 0px 8px 0px;
}

.ux-startmenu-tool-left, .ux-startmenu-tool-right{
font-size:1px;
line-height:1px;
}
.ux-startmenu-tool-left{
width:10px;
height:27px;
background:url(images/taskbar/black/start-menu-tool.png) no-repeat 0 -81px;
}

.x-menu-item-active .ux-startmenu-tool-left{
background-position:0 0;
}

.ux-startmenu-tool-right{
width:10px;
height:27px;
background:url(images/taskbar/black/start-menu-tool.png) no-repeat 0 -81px;
}

.x-menu-item-active .ux-startmenu-tool-right{
background-position:0 -27px;
}

.ux-startmenu-tool-left i, .ux-startmenu-tool-right i{
display:block;
width:10px;
overflow:hidden;
font-size:1px;
line-height:1px;
}

.ux-startmenu-tool-center{
background:url(images/taskbar/black/start-menu-tool.png) repeat-x 0 -81px;
cursor:pointer;
padding:0 5px 0 0;
text-align:left;
vertical-align:bottom;
white-space:nowrap;
}

.x-menu-item-active .ux-startmenu-tool-center{
background-position:0 -54px;
}

/*
* End Start Menu Tool
*/



.x-resizable-proxy{
background:#C7DFFC;
opacity:.5;
-moz-opacity:.5;
filter:alpha(opacity=50);
border: 1px solid #3b5a82;
}



/*
* Desktop Shortcuts
*/
#x-shortcuts dt {
float:left;
margin:15px 0 0 15px;
clear:left;
width:64px;
font:normal 10px tahoma,arial,verdana,sans-serif;
text-align:center;
zoom:1;
display:block;
}
#x-shortcuts dt a {
width:64px;
display:block;
color:white;
text-decoration:none;
}
#x-shortcuts dt div {
width:100%;
color:#000;
overflow:hidden;
text-overflow:ellipsis;
cursor:pointer;
}
.ext-ie #x-shortcuts dt img {
background:transparent !important;
}
#x-shortcuts dt a:hover {
text-decoration:underline;
}

/*
* shortcuts
*/

#grid-win-shortcut img {
width:48px;
height:48px;
background-image: url(images/grid48x48.png);
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/images/grid48x48.png', sizingMethod='scale');
}
#tab-win-shortcut img {
width:48px;
height:48px;
background-image: url(images/grid48x48.png);
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/images/grid48x48.png', sizingMethod='scale');
}
#acc-win-shortcut img {
width:48px;
height:48px;
background-image: url(images/im48x48.png);
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/images/im48x48.png', sizingMethod='scale');
}
#bogus-win-shortcut img {
width:48px;
height:48px;
background-image: url(images/im48x48.png);
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/images/im48x48.png', sizingMethod='scale');
}

/*
* Message Box
*/

.x-window-dlg .desktop-download {
background:transparent url(images/icons/download.gif) no-repeat top left;
height:46px;
}
.x-window-dlg .x-window-mc {
border:1px solid #888 !important;
}
.x-window-dlg .x-window-body {
background:#575757 none !important;
border:1px solid #333 !important;
color:#ccc;
}

KENT
4 Dec 2007, 2:39 AM
html, body {
font: normal 12px tahoma, arial, verdana, sans-serif;
margin: 0;
padding: 0;
border: 0 none;
overflow: hidden;
height: 100%;
}

Sorry for wasting your time :p

JeffHowden
4 Dec 2007, 4:39 PM
I'm not sure. But I just build mootools with Ajax feature and its core ( and some dependencies ) Removing mootools is okay but not a good solution.

In that case, anything you have available in mootools is almost certainly available in Ext. Rather than mixing and matching libraries and polluting the global namespace, why not just stick to Ext and learn it inside and out?

hendricd
4 Dec 2007, 4:42 PM
You ever done sales Jeff? ;)

KENT
4 Dec 2007, 5:24 PM
@JeffHowden: Sorry, that was stupid.. I got an attribute 'overflow: hidden' defined in html tag. THere's no conflicts between mootools and extjs. Thanks

JeffHowden
5 Dec 2007, 1:28 AM
@JeffHowden: Sorry, that was stupid.. I got an attribute 'overflow: hidden' defined in html tag. THere's no conflicts between mootools and extjs. Thanks

Naw, I don't think stupidity is the issue here. You are using Ext, after all. *grin*

I'm serious about settling on one framework though. Every framework has its own style to learn, documentation (or not) to sift through, and quirks to become accustomed to. Personally, I'd always err on the side of learning as few distinct sets of that as possible. If I was in your shoes, I'd be allocating x% of time over the immediate future to port any mootools specific code over to the Ext equivalent.

JeffHowden
5 Dec 2007, 1:31 AM
You ever done sales Jeff? ;)

Nope. You think I should? ;)

DigitalSkyline
5 Dec 2007, 2:02 PM
Some things sell themselves... I'd wager most people here would qualify as Ext salesmen. ;)

temporary
5 Dec 2007, 3:25 PM
In that case, anything you have available in mootools is almost certainly available in Ext. Rather than mixing and matching libraries and polluting the global namespace, why not just stick to Ext and learn it inside and out?

How about this?

http://digitarald.de/playground/uplooad.html

I'd love to see an Ext extension for it ;-)

Stephan

temporary
5 Dec 2007, 3:33 PM
How about this?

http://digitarald.de/playground/uplooad.html

I'd love to see an Ext extension for it ;-)

Stephan

Oh... Ext.ux.SwfUploadPanel (http://extjs.com/forum/showthread.php?t=19082)

Nervermind :D

cucumber
6 Dec 2007, 6:49 AM
I got a problem.when i invoke Ext.get('myFrame').load('/test/child.action'),in IE,i got nothing,if i resize the splitter,child page show corectly.why?

in firefox,everything ok

hendricd
6 Dec 2007, 8:43 AM
You'll need to post some code for help -- a little vague so far.

cucumber
6 Dec 2007, 6:49 PM
OK! this is the parent page


<script type="text/javascript">

Ext.onReady(function(){
Ext.QuickTips.init();

var content=new Ext.ux.ManagedIFrame ({
autoCreate:{
id:'content',
frameBorder: 0,
cls:'x-panel-body',
width: '100%',
height: '100%'
}
});

var viewport = new Ext.Viewport({
layout:'border',
monitorResize:true,
items:[
new Ext.BoxComponent({ // raw
region:'north',
el: 'header',
height:32
}),
new Ext.BoxComponent({ // raw
region:'south',
el:'foot',
height:32
}),
new Ext.tree.TreePanel({
id:'forum-tree',
region:'west',
title:'Navigator',
split:true,
width: 225,
minSize: 175,
maxSize: 400,
margins:'0 0 0 1',
loader: new Ext.tree.TreeLoader({dataUrl:'/tangram/getJsonMenuData.action'}),
rootVisible:false,
lines:false,
autoScroll:true,
root: new Ext.tree.AsyncTreeNode({
expanded:true
})
}),
new Ext.Panel({
id:'main-view',
region:'center',
margins:'0 1 0 0',
title:'Loading...',
body:content
})
]
});

var tree = Ext.getCmp('forum-tree');
var sm = tree.getSelectionModel();
sm.on('selectionchange', function(sm, node){
Ext.get('content').dom.src='/tangram/menuMgr.action';
Ext.getCmp('main-view').setTitle(node.text);
});
});

</script>

the child page


<script type="text/javascript">

Ext.onReady(function(){
var menuTreePanel=new Ext.tree.TreePanel({
id:'menu-tree',
region:'center',
rootVisible:false,
lines:false,
border:false,
autoScroll:true,
loadMask:true,
monitorResize:true,
loader: new Ext.tree.TreeLoader({dataUrl:'/tangram/getJsonMenuData.action'}),
root: new Ext.tree.AsyncTreeNode({expanded:true})
});

var view=new Ext.Viewport({
layout:'border',

items:[
menuTreePanel
]
});
});

hendricd
6 Dec 2007, 7:28 PM
IE Version ?

cucumber
6 Dec 2007, 8:14 PM
IE6 & IE7 have the same problem

FF is ok

hendricd
7 Dec 2007, 5:32 AM
Just for grins, try this first:



new Ext.Panel({
id:'main-view',
region:'center',
margins:'0 1 0 0',
title:'Loading...',
contentEl:content
})



This forces the iframe deeper inside the body (also a block element).

tryanDLS
7 Dec 2007, 8:29 AM
@Doug
Have you thought about building in the ability to hide the frame on create and defer setting the src property until rendered. Currently, I do this, but it's not ideal if you're doing this multiple times.


xtype:'panel',
title:'Gizmodo',
collapsible:false, autoScroll:true, frame:false, animCollapse:false,
body: new Ext.ux.ManagedIFrame({
autoCreate:{
tag:'iframe', cls:'x-panel-body x-hidden',
frameBorder:0, width:'100%', height:'100%'
}
}),
listeners: {
activate:{
fn:function(pnl) {
pnl.body.dom.src = 'http://www.gizmodo.com';
pnl.body.removeClass('x-hidden');
},
single:true
}
}

hendricd
7 Dec 2007, 8:40 AM
xtype:'panel',
title:'Gizmodo',
collapsible:false, autoScroll:true, frame:false, animCollapse:false,
body: new Ext.ux.ManagedIFrame({
autoCreate:{
tag:'iframe', cls:'x-panel-body x-hidden',
frameBorder:0, width:'100%', height:'100%'
}
}),
listeners: {
activate:{
fn:function(pnl) {
pnl.body.dom.src = 'http://www.gizmodo.com';
pnl.body.removeClass('x-hidden');
},
single:true
}
}

I'd be afraid to create even more confusion. It's designed to be used anywhere in the DOM, not just in Panels. You handle it well as presented here though.

Fear not: ux.ManagedIframePanel is coming soon. ;)

temporary
7 Dec 2007, 1:47 PM
Fear not: ux.ManagedIframePanel is coming soon. ;)

Uhhh... this would be great, i'm using it as a panel right now... Any ETA for this? :)

hendricd
7 Dec 2007, 1:49 PM
Not before the holidays Christmas ;)

cucumber
7 Dec 2007, 8:39 PM
Just for grins, try this first:



new Ext.Panel({
id:'main-view',
region:'center',
margins:'0 1 0 0',
title:'Loading...',
contentEl:content
})



This forces the iframe deeper inside the body (also a block element).


great! now everything ok~

thx!!!

fangzhouxing
7 Dec 2007, 10:43 PM
Why ux.ManagedIframe?

I can use iframe in Window like this:



var winIframe = new Divo.layout.IFrameComponent( {
id : 'win-main',
autoScroll : true,
url : url
});

var win = new Ext.Window( {
title : 'Test',
iconCls : 'icon-win',
height : 440,
width : 622,
resizable : true,
plain : true,
modal : modal,
autoScroll : true,
closeAction : 'hide',
layout : 'fit',
closable : true,
items : winIframe,
maximizable : true
});

win.show();

where Divo.layout.IFrameComponent defined as follows:


Divo.layout.IFrameComponent = Ext.extend(Ext.BoxComponent, {
onRender : function(ct, position) {
this.el = ct.createChild( {
tag : 'iframe',
id : 'iframe-' + this.id,
frameBorder : 0,
src : this.url
});
}
});

mjlecomte
10 Dec 2007, 4:12 AM
Sorry if this is stupid question, is this not an appropriate usage?


var uxIframe = new Ext.ux.ManagedIFrame({autoCreate:
{id:'dynamicIframe1'
,src: 'your.pdf'
,cls:'x-window-body',width:'100%',height:'100%'}});

hendricd
10 Dec 2007, 6:59 AM
The trick to rendering it in-line (I presume you want?), is to either:

a) serve up the PDF file as a stream, setting the appropriate response headers (eg. content-disposition: inline=filename.pdf ).
ASP Fragment:


---------------------------- PDF files ----------------------------
Response.ContentType = "application/pdf";
Response.AddHeader("Content-Type", "application/pdf");
Response.AddHeader("content-disposition", "inline;filename=file.pdf");
PageData.WriteTo(Response.OutputStream);
b) or, simply write the Acrobat compatible <object> tag to a panel or Iframe.

Try a few searches on:

ExtJS: PDF embed
Google: Content-Disposition

drbugs
10 Dec 2007, 11:27 AM
Just for grins, try this first:



new Ext.Panel({
id:'main-view',
region:'center',
margins:'0 1 0 0',
title:'Loading...',
contentEl:content
})



This forces the iframe deeper inside the body (also a block element).

Hi,
I've got a similar problem (worked great on FF, failed on IE6/7). I applied the fix (using contentEl instead of using the body:) and it now looks great on IE. Problem is now on Firefox it doesn't put the autoScrolls on. Also, if I use the height/width of 100%, the layouts will go wierd, to the point that some panels are not accessible.

Here's the relavent code. I create 3 panels, and throw them into an Ext.Window, using border layout for the window.

North panel 9s contains just a combobox to select what version, not shown. This panel has region:north

Content Panel - center.



var diffIFrame = new Ext.ux.ManagedIFrame({
autoCreate:{
id: 'diffContent',
frameBorder: 0,
cls:'x-panel-body',
height: '99%', //100 breaks the view
width: '99.6%'
}
});

this.diffPanel = new Ext.Panel({
autoScroll: true, //not working in FF
height: diffRegionH,
id: 'diffPanel',
region: 'center',
contentEl: diffIFrame
});

South Panel. Note the column layout and two child panels.


this.olderSrcIframe = new Ext.ux.ManagedIFrame({
autoCreate:{
id: 'olderSrcIframe',
frameBorder: 0,
cls:'x-panel-body',
width: '99.6%'}
});
this.newerSrcIframe = new Ext.ux.ManagedIFrame({
autoCreate:{
id: 'newerSrcIframe',
frameBorder: 0,
cls:'x-panel-body',
//height: '99.6%',
width: '99%'}
});

this.sourceVersions = new Ext.Panel({
id: 'sourceVersionPanel',
collapsible: true,
collapsed: true,
// collapseMode: 'mini',
height: popH - diffRegionH - diffMetadataH - 30,
layout: 'column',
margins:'5 5 5 0',
region: 'south',
title: 'Sources',
titleCollapse: false,
items: [
{
autoScroll: true,
// body: this.olderSrcIframe,
contentEl: this.olderSrcIframe,
id: 'olderSrcRegion',
title: 'Version #',
columnWidth: '.5'
},{
autoScroll: true,
// body: this.newerSrcIframe,
contentEl: this.newerSrcIframe,
id: 'newerSrcRegion',
title: 'Version #' + currentVersionNum,
columnWidth: '.5'}
]
});

TIA!

Edit. Another dumb question is why IE needs the contentEl to work (the block element?). Just curious.

hendricd
10 Dec 2007, 11:51 AM
@drbugs - autoScroll just sets 'overflow:auto;' on the entire panel.body (may be all sorts of markup in there).

Give your ManagedIframe that responsibility (since they are in there solo):



new Ext.ux.ManagedIFrame({
autoCreate:{
id: 'newerSrcIframe',
frameBorder: 0,
cls:'x-panel-body',
style:{overflow:'auto'},
height: '99.6%',
width: '99%'}
});

and, an alternative to contentEl (and don't need the extra ManagedIframe features):



this.diffPanel = new Ext.Panel({
bodyCfg:{tag:'div' //Customize the body layout
,cls:'x-panel-body'
,children:[{
tag:'iframe',
name: 'google',
id : 'google',
src: 'http://www.google.com',
frameBorder:0,
width:'100%',
height:'100%',
style: {overflow:'auto'}
}]
},

height: diffRegionH,
id: 'diffPanel',
region: 'center'

});

drbugs
10 Dec 2007, 11:57 AM
The style tweek worked! Tx for such a fast response. I still have a lot to learn.

I'm pretty sure that two of the iframes could use the alternative you describe, but the content iframe is actually populated using the ManagedIFrame.update which works really well.

Tx again! I really appreciate your help!
Randy

hendricd
10 Dec 2007, 2:07 PM
Check out the first post on this thread for the new ux.ManagedIframePanel.

Happy Holidays All. ~o)

mjlecomte
10 Dec 2007, 4:17 PM
The trick to rendering it in-line (I presume you want?), is to either:

a) serve up the PDF file as a stream, setting the appropriate response headers (eg. content-disposition: inline=filename.pdf ).
ASP Fragment:


---------------------------- PDF files ----------------------------
Response.ContentType = "application/pdf";
Response.AddHeader("Content-Type", "application/pdf");
Response.AddHeader("content-disposition", "inline;filename=file.pdf");
PageData.WriteTo(Response.OutputStream);
b) or, simply write the Acrobat compatible <object> tag to a panel or Iframe.

Try a few searches on:

ExtJS: PDF embed
Google: Content-Disposition


Thanks for your guidance. Would you dumb it down a little further please? I think I understand the response stuff above, if I check firebug when I go direct to the php file below (manually) I think I may be seeing the pdf stream or something. However if I use the code below, I don't see any outgoing request nor a response. If I put a html file in the same spot, that gets served up just dandy.



var uxIframe = new Ext.ux.ManagedIFrame({autoCreate:
{id:'dynamicIframe1'
,src: 'http://localhost/some_file_that_generates_pdf.php'
,cls:'x-window-body',width:'100%',height:'100%'}});



Sorry if I'm posting out of context of your thread. I don't really even understand this enough to know if what I'm trying to do is dependent on your extension or not. I'm able to serve up this same pdf to what I'll call an iframe in the document body ok. But I'm try to class it up a bit by having the pdf show up in a panel that's movable,draggable, closable, something......a tab is better than nothing.

I did try searching around but didn't come up with anything to guide me on this point.

hendricd
10 Dec 2007, 4:33 PM
@mj
In light of your earlier(AM) post, I decided to include a possible approach to your dilema in todays new release of ux.ManagedIframe/Panel (http://extjs.com/forum/showthread.php?t=16590)v.4 and associated example.

Take a look at the "Inline PDF (Experimental)" Tab config of the latest example page. Depending on if/how you might use that approach in a TabPanel, it works just OK. There are still some issues with how <OBJECTS .. get treated in the DOM from a visibility standpoint.

Things get real flaky in a tabPanel ("deferredRender:false" is your friend for inline PDF!), but looks pretty nice in simpler panel configurations.

mjlecomte
10 Dec 2007, 5:08 PM
@mj
In light of your earlier(AM) post, I decided to include a possible approach to your dilema in todays new release of ux.ManagedIframe/Panel (http://extjs.com/forum/showthread.php?t=16590)v.4 and associated example.

Take a look at the "Inline PDF (Experimental)" Tab config of the latest example page. Depending on if/how you might use that approach in a TabPanel, it works just OK. There are still some issues with how <OBJECTS .. get treated in the DOM from a visibility standpoint.

Things get real flaky in a tabPanel ("deferredRender:false" is your friend for inline PDF!), but looks pretty nice in simpler panel configurations.

1. =D> Works great (fortunately I could at least observe I had to provide ex1.pdf:">)
2. I aspire to get better at js/extjs....but being able to author what you just did......yikes.
3. On the bright side, looks like I just have to pass in a variable with the pdf location and it should be good to go.
4. Seen this comment made before elsewhere, but looks even more obvious in this case.......lot's of seemingly repetitive code huh? tag 'object' and children have much of the same stuff over again.

Thanks for your help. I owe you a beer (or 4).

hendricd
10 Dec 2007, 5:14 PM
I see it as a testament to Ext's ability to be driven with a modest 120 lines of script/config options.

BTW: I've included the "elusive" ex1.pdf file in the latest zip.

mjlecomte
11 Dec 2007, 3:17 AM
The link (http://www.adobe.com/devnet/activecontent/articles/devletter.html)you posted earlier helped me understand some of this.

Your code has been helpful to learn ext/js.

You have an interesting approach to building the html property (using tag, children, etc.). I was unable to find anything in the API documenting your technique, do you know if it's documented?

In order to dynamically change the pdf file used I envision using a separate function to build the html (possibly similar to this (http://extjs.com/forum/showthread.php?t=18976)).

Or, I don't know if this makes sense, would using a listener be helpful to passing the pdf name?

hendricd
11 Dec 2007, 6:20 AM
That generated markup is made possible by Ext.DomHelper. You'll see it used throughout the source of the framework.


In order to dynamically change the pdf file used I envision using a separate function to build the html...Your right, wrapping that DomHelper config in a function would make more re-usable. Something like:



var pdfViewerMarkup = function(docUrl){
var id;
return {
tag: "div",
cls:'pdf-wrap',
children:[
{
tag:'object'
,classid:"clsid:CA8A9780-280D-11CF-A24D-444553540000"
,height : "100%"
,width : "100%"
,type : "application/pdf"
,align : "top"
,id : Ext.id(null,'acrobat-')
,children : [
{tag : "param"
,name : "SRC"
,value : docUrl
} ,
{tag :'embed'
,src : docUrl
,width : "100%"
,height : "100%"
,align : "top"
,type : "application/pdf"
,id : (id = Ext.id(null,'pdf-') )
,name : id
}
]
}] //object

}
};
};

Or, you could return the entire panel config in this fashion and just add it your layout.

Hmm, I smell a ux.PDFPanelux.MediaPanel (http://extjs.com/forum/showthread.php?t=23983)brewing, anyone?

hendricd
11 Dec 2007, 12:45 PM
Just updated the miframe_4.zip: iframesdemo.html page to smooth out embedded object behavior for displaying a Acrobat document inline (in an Iframe now).

Update: For those having trouble with FF, refreshing the iframe after hiding it:

panel.hideMode = visibility prevents that from happening but breaks tabPanel in a way I've have yet to figure out a solution for.

tdondich
14 Dec 2007, 9:59 AM
The issue is if the mouse down is activated in the splitter, and I mouse up, but the mouse up is over the iframe, the splitter is still stuck to my cursor.

This should be easilly fixed with a mouse down detection on document, and creating a overlay over the iframe to avoid this.

Something to think about?

Taylor

hendricd
14 Dec 2007, 10:09 AM
Not sure I understand why ManagedIframePanel? should suddenly become aware of a neighboring drag target ?

Got a sample use-case you can post?

tdondich
14 Dec 2007, 10:23 AM
Yeah, like I said, you have the managed iframe panel next to something like a treepanel, and the treepanel has split: true on it. So you've got this splitter next to your managed iframe. If you mouse down on the splitter to move it, and release on top of the iframe, sometimes the splitter gets stuck.

Taylor

DigitalSkyline
14 Dec 2007, 11:56 AM
I read something a while ago about this problem and I think the solution was to mask any iframe every time a drag is initiated.

tdondich
14 Dec 2007, 1:19 PM
Can we mask other items as well, such as objects (flash, etc)? This should be something to think about.

Taylor

mjlecomte
15 Dec 2007, 8:04 AM
It looks like this doesn't make a hill of beans difference, but it looks like you were a bit overzealous with commas? I need to go back to js101, I didn't think this would even work.:"> Maybe something with the implied returns of new lines keeps it working with the commas?

-Oh, I just took the inline js from the html and moved it to an externally referenced js file. I was doing my own pretty indenting and noticed the suspicious commas.



/*
* @class Ext.ux.ManagedIFrame
* Version: 0.4
* Demonstration code
* Author: Doug Hendricks 10/2007 doug[always-At]theactivegroup.com
*/

Ext.onReady(function(){

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

var comeHome = function(){
Ext.getCmp('sites').activeTab.setSrc();
// },//comma?
};

printPanel = function(){
Ext.getCmp('sites').activeTab.iframe.print();
// },//comma?
};

// _urlDelim = '\/',//comma?
_urlDelim = '\/';

getLocationAbsolute = function(){
var d= _urlDelim = location.href.indexOf('\/') != -1 ? '\/':'\\';
var u=location.href.split(d);
u.pop(); //this page
return u.join(d);
// },//comma?
};

getSiteRoot = function(){
var url = getLocationAbsolute().split(_urlDelim );
url.pop();
return url.join(_urlDelim);
// },//comma?
};

// pdfUrl = getLocationAbsolute()+_urlDelim+'ex1.pdf',//comma?
pdfUrl = getLocationAbsolute()+_urlDelim+'ex1.pdf';

win = new Ext.Window({
title: 'WebBrowser Fun',
id:'browserfun',
layout:'fit',
minimizable: false,
maximizable: true,
width:800,
height: 600,
plain: true,
items:{
xtype:'tabpanel',
deferredRender:true,
layoutOnTabChange:true,
id:'sites',
defaultType: 'iframepanel',
defaults:{
closable:true,
autoShow:true,
//hideMode: Ext.isGecko?'visibility':'display', //prevents iframe reloads on tabchanges
tbar : [
{
text:'Return',
handler: comeHome
}
,'-',
{
text: 'Print',
handler: printPanel
}]
},
items: [
{
id: 'google'
,title:'Google'
,defaultSrc : function(){return 'http://www.google.com';}
},{
id: 'ajaxian'
,title:'Ajaxian'
,defaultSrc : 'http://www.ajaxian.com'
},{
id: 'extjs'
,title:'Ext Forums'
,defaultSrc : 'http://extjs.com/forum/index.php'
},{
id: 'bogus'
,title:'Bogus Markup'
,html: '<h1>This Iframe should be printable.</h1>'+Ext.example.bogusMarkup
,listeners:{
documentloaded:function(iframe){Ext.example.msg('IFrame Panel(Markup)- ManagedIFrame', 'Document is Ready.');}
},
tbar:[{
text: 'Print',
handler: printPanel
}]
},{
id: 'inlinepdf'
,title:'Inline PDF (Experimental)' //honestly !
,tbar:null

,html: {
tag:'div',
cls:'pdf-wrap',
children:[
Ext.isIE ? {
tag:'object'
,classid:"clsid:CA8A9780-280D-11CF-A24D-444553540000"
,height : "100%"
,width : "100%"
,type : "application/pdf"
,align : "top"
,id : 'pdfViewer'
,type : "application/pdf"
,html : 'Acrobat Browser Plugin is not installed'
,children : [{
tag : "param"
,name : "SRC"
,value : pdfUrl
}]
}:{
tag :'embed' //Gecko embed
,src : pdfUrl
,width : "100%"
,height : "100%"
,align : "top"
,type : "application/pdf"
,page : 2
,pagemode : "none"
,id : 'pdfViewer'
}
]//end children
}//end html
,listeners:{
//blur the object/embed element first
deactivate:function(panel){ panel.iframe.getWindow().focus();}
,documentloaded: function(iframe){
Ext.example.msg('PDF Viewer', 'Viewer is Ready.');
this.pdfDoc = Ext.isIE?iframe.getDocument()['pdfViewer']
:iframe.getDocument().getElementById("pdfViewer");
}
}//end listeners
}//end inline pdf
]//end iframepanel items
}//end win items
});//end win

win.show();

Ext.EventManager.on(
window,
"beforeunload",
function(){
Ext.destroy(win);
},
win,
{single:true}
);


});

markpele
15 Dec 2007, 9:35 AM
I`m dynamically creating an iframe and dynamically loading a script inside it.
Is there a way to avoid firefox loading spinner and cursor change to hourglass?

I`ve tried adding and removing another iframe from the DOM. It works but the cursor still changes to hourglass.

Thanks

webguy
16 Dec 2007, 12:33 AM
Help. What I am trying to do is, if I click on a link in the left navigation, it opens a tab in the center. In this tab, it may have a standard submit form. When I click submit, i don't want it to open a new tab, but to process within my existing tab panel. I have been looking at applying iFrame, but haven't be successful. How would I apply the ManagedIframePanel to my Tabs.



<html>
<head>
<title>Start Page</title>
<link rel="stylesheet" type="text/css" href="../ext2.0/resources/css/ext-all.css" />
<link href="../_inc/styles.css" rel="stylesheet" type="text/css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../ext2.0/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

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

<!--<script language="javascript" src="../grid/PropsGrid.js"></script>-->
<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
p {
margin:5px;
}
.webpages {
background-image:url(../_img/icons/application_go.png);
}
.members {
background-image:url(../_img/icons/user1.png);
}
.appointments {
background-image:url(../_img/icons/calendar_31.png);
}
.invoices {
background-image:url(../_img/icons/line-chart.png);
}
.credits {
background-image:url(../_img/icons/credits-2.png);
}
.paypal {
background-image:url(../_img/icons/paypal-2.png);
}
.settings {
background-image:url(../_img/icons/folder_wrench.png);
}
.x-layout-collapsed-west{
background-image:url(../_img/explorer.gif);
background-repeat:no-repeat;
background-position:center;
}
.x-layout-collapsed-east{
background-image:url(../_img/tools.gif);
background-repeat:no-repeat;
background-position:center;
}
.x-layout-collapsed-south{
background-image:url(../_img/help.gif);
background-repeat:no-repeat;
background-position:center;
}
</style>
<script type="text/javascript">
Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({ // raw
region:'north',
el: 'north',
height:70
}),{
region:'south',
contentEl: 'south',
split:false,
height: 300,
minSize: 100,
maxSize: 300,
collapsible: true,
title:'Help Desk',
margins:'0 0 0 0'
}, {
region:'east',
title: 'Tools',
collapsible: true,
split:true,
width: 225,
minSize: 215,
maxSize: 300,
layout:'fit',
margins:'0 5 0 0',
items:
new Ext.TabPanel({
border:false,
activeTab:0,
tabPosition:'top',
items:[{
html:'<p>&nbsp;&nbsp;<img src="../_img/icons/keywords.png" width="24" height="24" align="absmiddle" border="0">&nbsp;<a href="keywords.php" class="nav3">Keywords</a></p><p>&nbsp;&nbsp;<img src="../_img/icons/analytics.png" width="24" height="24" align="absmiddle" border="0">&nbsp;<a href="google-analytics.php" class="nav3">Google Analytics</a></p><p>&nbsp;&nbsp;<img src="../_img/icons/marketing.png" width="24" height="24" align="absmiddle" border="0">&nbsp;<a href="marketing.php" class="nav3">Target Your Market</a></p>',
title: 'Marketing',
autoScroll:true
},
{
html:'<p>&nbsp;&nbsp;<img src="../_img/icons/welcome=email.png" width="24" height="24" align="absmiddle" border="0">&nbsp;<a href="welcome-email.php" class="nav3">Edit Welcome Email</a></p><p>&nbsp;&nbsp;<img src="../_img/icons/reg-success.png" width="24" height="24" align="absmiddle" border="0">&nbsp;<a href="registration-success.php" class="nav3">Edit Success Page</a></p>',
title: 'Registration Settings',
autoScroll:true
}]
})
},{
region:'west',
id:'west-panel',
title:'Explorer',
split:true,
width: 200,
minSize: 175,
maxSize: 300,
/*collapsible: true,*/
margins:'0 0 0 5',
defaults: {
stateEvents: ['expand','collapse'],
collapsed: true,
getState: function() {
return {collapsed: this.collapsed};
}
},
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
id: 'webPages',
contentEl: 'west',
title:'Web Pages',
html:'<p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="news.php" class="nav3">My News Items</a></p><p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="content.php" class="nav3">My Web Pages</a></p><p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="ads.php" class="nav3">My Advertisements</a></p>',
border:false,
iconCls:'webpages'
},{
id: 'members',
title:'Members',
html:'<p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="members.php" class="nav3">View Members</a></p><p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="insert-member.php" class="nav3">Add Member</a></p><p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="email-members.php" class="nav3">Email All Members</a></p><p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="reminder-email.php" class="nav3">Send Email Reminder</a></p>',
border:false,
iconCls:'members'
},{
id: 'appointments',
title:'Appointments',
html:'<p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="appointments.php" class="nav3">View Appointments</a></p><p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="insert-appointment.php" class="nav3">Add Appointment</a></p><p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="booked-appointments.php" class="nav3">Booked Appointments</a></p><p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="available-appointments.php" class="nav3">Available Appointments</a></p><p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="notification-email.php" class="nav3">Edit Notification Email</a></p><p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="print-appointments.php" class="nav3">Print Appointments</a></p>',
border:false,
iconCls:'appointments'
},{
id: 'invoices',
title:'Invoices',
html:'<p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="invoices.php" class="nav3">View Invoices</a></p>',
border:false,
iconCls:'invoices'
},{
id: 'credits',
title:'Credits',
html:'<p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="view-credits.php" class="nav3">View Credits</a></p><p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="update-credits.php" class="nav3">Update Credits</a></p><p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="insert-credits.php" class="nav3">Add Credits</a></p><p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="payment_option.php" class="nav3">Payment Option</a></p>',
border:false,
iconCls:'credits'
},{
id: 'payPalAccount',
title:'Pay Pal Account',
html:'<p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="view-paypal.php" class="nav3">View Account</a></p><p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="update-paypal.php" class="nav3">Update Account</a></p>',
border:false,
iconCls:'paypal'
},{
id: 'settings',
title:'Settings',
html:'<p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="preferences.php" class="nav3">My Preferences</a></p><p>&nbsp;&nbsp;<img src="../_img/icons/i.png" width="14" height="13" align="absmiddle" border="0">&nbsp;<a href="logo.php" class="nav3">My Web Site Logo</a></p>',
border:false,
iconCls:'settings'
}]
},
{
xtype: 'tabpanel',
id: 'center-panel',
region:'center',
activeTab: 0,
items: [{
contentEl: 'center',
title:'Start Page',
autoScroll: true
}]
}
]
});
Ext.getCmp('west-panel').body.on('click', function(e, target) {
e.stopEvent();
var center = Ext.getCmp('center-panel');
var newPanel = new Ext.Panel({
autoLoad: target.href,
title: target.innerHTML,
autoScroll: true,
closable: true
});
center.add(newPanel);
center.setActiveTab(newPanel);
}, this, {delegate: 'a.nav3'});


});
</script>
</head>
<body>
<script type="text/javascript" src="ext.js"></script><!-- EXAMPLES -->
<div id="west">
</div>
<div id="north">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="index.php"><img src="../_img/logo.gif" border="0"></a></td>
<td><div align="right" style="padding-right:25px;"><input name="logout" onClick="window.location='../logout.php?KT_logout_now=true'" style="cursor:pointer; width:80px; height:26px;" value="Sign Off" type="button"></div></td>
</tr>
</table>
</div>

<div id="center" class="x-hide-display">
<div style="padding-left:50px;padding-right:50px;">
<br/><br/>
Add to Center Panel
<br/><br/><br/>
</div>
</div>

<div id="south">
Add Info
</div>

</body>
</html>

johns
16 Dec 2007, 1:48 PM
I don't mean to suggest the obvious, but one possible solution is to remove mootools. Now, in all seriousness, does mootools provide anything you can't get with Ext?

http://static.popcap.com/iphone/

Mootools is a highly polished animation toolkit and is comparable in feature set with scriptaculous. Things like css transitioning, effects chaining, timed effects, are very robust and easy to pull off with it. What I like most is its size - about 25KB minified.

However drag-n-drop support in Mootools is not as good as Ext's. You can't use it for layout management or do windowing, which Ext excels at.

If you can leverage both I'd say you got a pretty decent shot at building neat things.

hendricd
17 Dec 2007, 7:17 PM
I need to go back to js101..@mjlecomte - These are equivalent:

var a=1,b=2,c=3

var a=1
,b=2
,c=3
,f=function(){}
Javascript doesn't care what line the commas are on ;)

hendricd
17 Dec 2007, 7:55 PM
.. I'll take a look at loadMask support for ManagedIframePanel... It might be useful for drag-mask/shimming...

In the interim, you could either:

a) manipulate the panel.bodyWrap DIV (but would mask toolbars, header, footer as well)

or

b) override the default bodyCfg of MIPanel further:




/**
* @cfg {String/Object/Function} bodyCfg
Custom bodyCfg used to embed the ManagedIframe.
*/
bodyCfg:{tag:'div'
, cls:'x-panel-body'
, children:[{tag:'div', cls:'myMasker' //wrap
,children:[{tag:'iframe',frameBorder:0,width:'100%',height:'100%',cls:'x-managed-iframe'}]
}]
},

..injecting the iframe into a div wrap where you've got precise class control !important

Somebody, please, let us know what the workable CSS ends-up being for drag operations :-?

mjlecomte
18 Dec 2007, 5:25 AM
@mjlecomte - These are equivalent:

var a=1,b=2,c=3

var a=1
,b=2
,c=3
,f=function(){}
Javascript doesn't care what line the commas are on ;)

Oh right, thanks. I didn't pick up on the var in front. So the code I included above would be bad because by including ";" at end without specifying var in front would include b and c globally instead of locally I think.


var a=1;b=2;c=3//b and c are global if use ";"


var a=1
,b=2
,c=3
,f=function(){}//a, b, c, and f are locally defined so won't override global instances of these variables


Thanks for the lesson.

hendricd
18 Dec 2007, 6:09 AM
@webguy - Just include miframe.js in your project, and start with something like this:


Ext.getCmp('west-panel').body.on('click', function(e, target) {
e.stopEvent();
var center = Ext.getCmp('center-panel');

var newPanel = center.add({
xtype : 'iframepanel',
defaultSrc: target.href,
title: target.innerHTML,
closable: true
});
if(newPanel){
center.doLayout();
center.setActiveTab(newPanel);
}
}, this, {delegate: 'a.nav3'});

hendricd
18 Dec 2007, 1:53 PM
Version 4.5 is posted.

Now with loadMask support for both ManagedIframe and ManagedIframePanel.

Enjoy.

markpele
18 Dec 2007, 2:06 PM
Do you know a workaround for the hourglass loading cursor when a script is loaded inside an iframe in FF?

hendricd
18 Dec 2007, 2:44 PM
@markpele - that is typically controlled by the browser (unless the script is doing it?). You won't have much control over that.

kouryuu
19 Dec 2007, 6:24 AM
My question may appear stupid but using this extension, I'm facing a funny problem. I'm trying to include a WebAdmin application written in PHP using this extension but when I configure the example to call the riight URL, I have two different problems relating to FF and IE :

- With FF, my current page is integrally replaced by the site written in PHP
- With IE, I have a perfect work until I log in because after this action, I can't make another or navigate the menu.

I can't paste code because it's for a company I'm working for so I will just ask not debug but if it is possible to manage a PHP site using an Iframe. If so, is the problem related to my Web Admin application and if you have any idea where I can start looking, it will be a great help for me.

Thanks in advance

hendricd
19 Dec 2007, 6:34 AM
It could be that your WebAdmin page has a 'framebuster' built into it. Beyond that, can't tell much without seeing anything. ;)

kouryuu
19 Dec 2007, 7:41 AM
I'm going to look on it. I'm not verfy familiar with this one but I will keep you informed as soon as possible

(I also apologize if my English is not very correct, I'm French :D )

KENT
19 Dec 2007, 6:04 PM
Version 4.5 is posted.

Now with loadMask support for both ManagedIframe and ManagedIframePanel.

Enjoy.

@hendricd: Thank you for your updates. I'm very suprised with the LoadMask, it's so useful ! But I dont know how to control the LoadMask Msg, I have two tabs and the first tab display the LoadMask Msg at Top Left but the second displays the LoadMask Msg at Middle-Center. ( In lastest FF )

hendricd
19 Dec 2007, 6:41 PM
You would set the msg just like you would in GridPanel:
[optional]

....,loadMask:{msg:'Loading PDF...'[, msgCls:'x-my-mask']}
..the first tab display the LoadMask Msg at Top Left but the second displays the LoadMask Msg at Middle-CenterWhat you are experiencing (when tabPanel: deferredRender:true) is the brief period when the MIFPanels' body is very small (upper left corner when the mask is applied). Since the default mask element is body, you might try adding this one of these to the MIFPanels' constructor:

bodyStyle:{width:'100%',height:'100%'},
maskEl:'bwrap',

I'll be uploading the required change for the last one 'maskEl' in just a few minutes. ;)

hendricd
19 Dec 2007, 7:42 PM
OK, the default maskEl for a ManagedIframePanel(.14) is now 'bwrap'. First Post (http://extjs.com/forum/showthread.php?p=101049#post101049) Zip has been updated.

The iframesdemo.html was also updated for use with the ux.ManagedIframePortal class.

KENT
19 Dec 2007, 8:45 PM
if(!win){
win = desktop.createWindow({
id: 'tab-webcharts',
title:'Biểu đồ ph&#226;n t&#237;ch kỹ thuật',
width:750,
height:600,
iconCls: 'tabs',
shim:false,
animCollapse:false,
border:false,
constrainHeader:true,
layout: 'fit',
items:
new Ext.TabPanel({
activeTab:0,
deferredRender:true,
items: [{
title: 'HOSTC',
xtype:'iframepanel',
defaultSrc:'http://google.com',
loadMask:{msg:'Loading GG..'},
autoShow:true,
bodyStyle:{width:'100%',height:'100%'},
maskEl:'bwrap',
border:false
},{
title: 'HASTC',
xtype:'iframepanel',
defaultSrc:'http://google.com',
loadMask:{msg:'Loading GG2..'},
border:false
}/*,{
title: 'B&#225;o c&#225;o tăng giảm',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
}*/]
})
});
}



This doesnt work :( Please help me hendricd

hendricd
19 Dec 2007, 9:05 PM
Can you be any more cryptic? ;)

KENT
19 Dec 2007, 10:31 PM
Can you be any more cryptic? ;)



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

appType : 'tabs',
id : 'tab-webcharts',

init : function(){
this.launcher = {
text: 'Biểu đồ ph&#226;n t&#237;ch kỹ thuật',
iconCls:'tabs',
handler : this.createWindow,
scope: this
}
},

createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('tab-webcharts');
if(!win){
win = desktop.createWindow({
id: 'tab-webcharts',
title:'Biểu đồ ph&#226;n t&#237;ch kỹ thuật',
width:750,
height:600,
iconCls: 'tabs',
shim:false,
animCollapse:false,
border:false,
constrainHeader:true,
layout: 'fit',

items:
new Ext.TabPanel({
activeTab:0,
defaults:{
bodyStyle:{width:'100%',height:'100%'},
maskEl:'bwrap'},
items: [{
title: 'HOSTC',
xtype:'iframepanel',
defaultSrc:'http://vnn.vn',
loadMask:{msg:'Loading VNN 1..'},
border:false
},{
title: 'HASTC',
xtype:'iframepanel',
defaultSrc:'http://vnn.vn',
loadMask:{msg:'Loading VNN 2..'},
border:false
}]
})
});
}
win.show();
}
});


I applied ur updates into this code, but it doesn't work. Maybe I did something wrong :-/

hendricd
20 Dec 2007, 7:17 AM
@Kent - you still haven't said what is wrong.

What are the symptoms?
What Browser?

Something ?

KENT
20 Dec 2007, 7:26 PM
Oh sorry, I was thinking.. er.. the problem is the loadmask's msg still misplaced, one is on the upper left of framepanel, the other is on mid-center :|

My browsers: IE 7, FF 2

hendricd
21 Dec 2007, 12:01 AM
OK, after working with the examples further, I found I had to re-think how best to apply a loadMask over an IFrame without destroying the panel.body(too badly). It turns out that Panels(let alone IFrames) are particularly difficult to center the masks' message text. Without content in the underlying panel.body/iframes, it becomes a challenge (especially when defferedRender:true in a tabPanel).

The differences in IFrame support between IE and FF is cumbersome, and running the demos shows that IE reflects those difficulties best. I've tried to avoid additional CSSRules but may have to consider it -- down the road.

Anyhow, latest version (attempt) with demo(ManagedIframePortlets added)/Desktop Example is posted on Post#1.

Merry Christmas and Happy New Year to all the Ext objects.

KENT
21 Dec 2007, 12:21 AM
Thanks Henricks,
It works great for me now. Merry Xmas to you and your family!
Again, thanks :)

yylurex
23 Dec 2007, 7:52 PM
I use iframes alot so this will be really useful, thank you.

cuteleaf
25 Dec 2007, 4:20 AM
in desktop,if open igrid.html with Ext.ux.ManagedIFrame,i want to load igrid.html with anoter theme(css),but i don't want modify igrid.html,just want modify sample.js


MyDesktop.IframeWindow = Ext.extend(Ext.app.Module, {
........

any suggestion?

cuteleaf
25 Dec 2007, 4:30 AM
what i want is:
mxracer's desktop,http://extjs.com/forum/showthread.php?t=10950
i think it is a good idea to use ManagedIFrame,but in his preferences,when set theme,the theme load sync,if use ManagedIFrame,how to set the part in ManagedIFrame sync,hendricd?

hendricd
25 Dec 2007, 7:52 AM
@cuteleaf - Just could probably just create a setTheme method for those window classes containing ManagedIframes. Not clear whether you are using ManagedIframePanel or not, but:


setTheme : function (absolutePath) {
if (absolutePath) {
this.iframe.getWindow().Ext.util.CSS.swapStyleSheet("theme", absolutePath);

}
}and invoke it anytime the theme of the parent changes. the Desktop.windows (WindowGroup) will have a list of active windows:




Ext.each(windows,function(window){
window.items.each(function(panel){
if(panel.setTheme){ panel.setTheme(themePath); }

});
});

franckxx
25 Dec 2007, 8:16 AM
what i want is:
mxracer's desktop,http://extjs.com/forum/showthread.php?t=10950
i think it is a good idea to use ManagedIFrame,but in his preferences,when set theme,the theme load sync,if use ManagedIFrame,how to set the part in ManagedIFrame sync,hendricd?

Hi all,

I use this nice plugin into Desktop 2.0 from MXRacer too, i search a solution to have iframe with same theme of the desktop.

If anyone have a solution .....

JorisA
27 Dec 2007, 6:09 PM
Hi, thnx for sharing this plugin.
A few suggestions if I may:
- Try to clean up your code a bit (especially indentation), it's kind of annoying to go through.
- Supply a much more simplified example, maybe along with the more complicated one.

Just my 5 cents :)

hendricd
27 Dec 2007, 7:23 PM
Which files have tabs trouble ?

JorisA
28 Dec 2007, 4:23 AM
http://joris.magicfly.nl/ext/miframe.png

All files are like this 8-|
Tip: click the show hidden characters button (something like this: http://www.adobepress.com/content/images/chap3_0321337050/elementLinks/inlinefig03_03.jpg

cuteleaf
28 Dec 2007, 5:03 AM
@cuteleaf - Just could probably just create a setTheme method for those window classes containing ManagedIframes. Not clear whether you are using ManagedIframePanel or not, but:


setTheme : function (absolutePath) {
if (absolutePath) {
this.iframe.getWindow().Ext.util.CSS.swapStyleSheet("theme", absolutePath);

}
}

i am sorry ,where those code add to?

in sample.js? just like :


MyDesktop.IframeWindow = Ext.extend(Ext.app.Module, {
....
setTheme : function (absolutePath) {
if (absolutePath) {
this.iframe.getWindow().Ext.util.CSS.swapStyleSheet("theme", absolutePath);

}
},

and where should i call setTheme

i tried ,but not work...

cuteleaf
28 Dec 2007, 5:31 AM
do you understand what i said?

look at the upload picture

desktop theme:vista

iframe :blue

how to set inner iframe theme vista?

(with js code ,not include css file in iframe)

hendricd
28 Dec 2007, 6:22 AM
@Jorisa -- Tab expansion troubling you? For your benefit, and perhaps others, the next zip-up will include source files without tabs.


- Supply a much more simplified example, maybe along with the more complicated one.

--Simple:
var p = new Ext.ManagedIframePanel({
width: 500,
height : 300,
defaultSrc : 'http://www.google.com'
});Any other recommendations? The desktop example posted is fairly complex as it is.

hendricd
28 Dec 2007, 6:38 AM
@Cuteleaf -- You should post your createWindow method for your embedded Ext page(iframe). The process will be different if not using ManagedIframePanel.


(with js code ,not include css file in iframe)When you change the theme on the desktop, you are (re)loading a css file. The same will be done with any child iframe running Ext in it. Examine the Ext.util.CSS class source more closely.

mxracers' version of desktop.js is significantly different from the one provided in the standard Ext distribution, but first, YOU/HE will need to adapt Ext.Desktop.setTheme for notifying open windows of the Theme change like this:


this.setTheme = function (o) {
if (o && o.id && o.path) {

windows.each(function(window){ //iterate each window
window.items.each(function(item){ //then, each window item
if(item.setTheme){ item.setTheme(o.path); }
});
});
Ext.util.CSS.swapStyleSheet("theme", o.path);
Ext.apply(app.desktopConfig.styles.theme, o);
}
};It would be even simpler if Desktop supported Events (themechange, etc). Somebody jump on that one ;)
Then, desktopConfig needs to be changed as well,to store the current themePath (not just id), as in:


app.desktopConfig.styles.theme = {id:'Vista Dark', path:'somepath/to/vistadark.css'};
Then, this fragment should get you started:

createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('iframewin');
if(!win){
win = desktop.createWindow({
id: 'iframewin',
title: 'IFramed Ext.Grid',
width:740,
height:480,
border:false,
layout: 'fit',
items:
{

id:'iframegrid',
xtype:'iframepanel',
loadMask:{msg:'<img src="images/powered.png" height="35px" width="99px" />'},
defaultSrc:'../grid/igrid.html',
setTheme : function (themePath) {
var win = this.iframe?this.iframe.getWindow():null;
if(win && win.Ext && themePath){
//themePath likely needs conversion to an absolute path
win.Ext.util.CSS.swapStyleSheet("theme", themePath);
}
}
,listeners:{
documentloaded : function(panel){panel.setTheme( MyDesktop.desktopConfig.theme.path);}
}
}
});
}
win.show();
}Run with it.

JorisA
28 Dec 2007, 10:18 AM
hendricd: tabs shouln't be a problem, but sometimes your using tabs, and others your using spaces, if you have a different tab width then you it will mess things up. Thnx anyway :)

Furthermore I haven't looked into it very much, but the inline pdf frame in combination with tcpdf (php pdf class) seems pretty interesting to generate print layouts for grid data and stuff.

cuteleaf
29 Dec 2007, 4:10 AM
@Cuteleaf -- You should post your createWindow method for your embedded Ext page(iframe). The process will be different if not using ManagedIframePanel.

When you change the theme on the desktop, you are (re)loading a css file. The same will be done with any child iframe running Ext in it. Examine the Ext.util.CSS class source more closely.

mxracers' version of desktop.js is significantly different from the one provided in the standard Ext distribution, but first, YOU/HE will need to adapt Ext.Desktop.setTheme for notifying open windows of the Theme change like this:


this.setTheme = function (o) {
if (o && o.id && o.path) {

windows.each(function(window){ //iterate each window
window.items.each(function(item){ //then, each window item
if(item.setTheme){ item.setTheme(o.path); }
});
});
Ext.util.CSS.swapStyleSheet("theme", o.path);
Ext.apply(app.desktopConfig.styles.theme, o);
}
};It would be even simpler if Desktop supported Events (themechange, etc). Somebody jump on that one ;)
Then, desktopConfig needs to be changed as well,to store the current themePath (not just id), as in:


app.desktopConfig.styles.theme = {id:'Vista Dark', path:'somepath/to/vistadark.css'};
Then, this fragment should get you started:

createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('iframewin');
if(!win){
win = desktop.createWindow({
id: 'iframewin',
title: 'IFramed Ext.Grid',
width:740,
height:480,
border:false,
layout: 'fit',
items:
{

id:'iframegrid',
xtype:'iframepanel',
loadMask:{msg:'<img src="images/powered.png" height="35px" width="99px" />'},
defaultSrc:'../grid/igrid.html',
setTheme : function (themePath) {
var win = this.iframe?this.iframe.getWindow():null;
if(win && win.Ext && themePath){
//themePath likely needs conversion to an absolute path
win.Ext.util.CSS.swapStyleSheet("theme", themePath);
}
}
,listeners:{
documentloaded : function(panel){panel.setTheme( MyDesktop.desktopConfig.theme.path);}
}
}
});
}
win.show();
}Run with it.

i am sorry,i do according these.but,fire bug return :

MyDesktop.desktopConfig.theme has no properties
[Break on this error] panel.setTheme(MyDesktop.desktopConfig.theme.path);

JorisA
29 Dec 2007, 5:21 AM
Hi,

This is what I'd like to see in a demo:
http://joris.magicfly.nl/ext/examples/iframe/simple.htm (some buttons need to be fixed)
Just a single panel, that shows all (or most of) the functionality. Portlets and Desktop are nice too, but for rookies they can be a bit complicated.

Download here:
http://joris.magicfly.nl/ext/examples/iframe/demo.rar

Feel free to use/repack it with your code.

hendricd
29 Dec 2007, 6:03 AM
@cuteleaf -- /:) That was not a drop in solution.


mxracers' version of desktop.js is significantly different from the one provided in the standard Ext distribution, but first, YOU/HE will need to adapt Ext.Desktop.setTheme for notifying open windows of the Theme changeLook. You chose the desktop example for your Application. It's a great start and adding new features and capabilities to it are cool. But, at some point YOU are going to have to make it behave the way you want. I don't own either solution's source code.

What I provided was a recommended approach for you to consider. It's up to you to make all the necessary changes to desktop/taskbar/start button, etc.. to make it change themes (the way you want). If there is enough interest in it, why not start up a public initiative yourself ?

hendricd
29 Dec 2007, 6:31 AM
@Jorisa -- Nice demo page. It looks like you've got lot's of other demonstration plans going in there as well. ;)

There has been talk lately of a hosting site for ux.Extensions and documentation, but I haven't heard much about details yet.

And, yes, I understand the importance of documentation and actual demos. Documenting MI/MIP will not be trivial as there are many security restrictions tied to an <IFrame>'s use. For now, a demo framework "that could be dropped into the Ext /example heirarchy" was top priority. I have 1.1.1 Demo site built that demonstrates MI (as well as other as-yet unreleased Extensions) that really shows what MI/MIP are capable of, but that really needs to be ported to the 2.0 release.

But, the problem remains -- where to host all that ?

JorisA
29 Dec 2007, 6:55 AM
Dammit I planned to just make a start, but what the hell :P
Most of the buttons should be working now, but I think I noticed some bugs.

- The loadingmask doesnt work
- The domready event doesn't occur when using setSrc
- Futermore I think it makes more sense to call the update and load functions directly on the panel instead of the panel.iframe. You could override the panels update function to apply it on the iframe. If someone does a update on the panel now, the iframe gets destroyed (thats what I did :P)

I also think build in inline pdf support would be awesome. (Something like framepanel.loadPdf("foo.pdf"); )

JUST MY 5 CENTS!!! :">

Ps. do you know how to get the title from the iframe without getting Permission denied to get property HTMLDocument.title (cross scripting protection)

hendricd
29 Dec 2007, 7:36 AM
- The loadingmask doesnt work You aren't using it properly, but, I have recently added an enabled:true/false -- permitting toggling in that fashion (posting this version later today).


- The domready event doesn't occur when using setSrc and
Ps. do you know how to get the title from the iframe without getting Permission denied to get property HTMLDocument.title (cross scripting protection) Neither are possible because loading an external URI (via setSrc) restricts access to the iframe's document object. You don't own the document unless

a)the URI complies with 'same host/port' policies.
b) you wrote static content directly into the Iframe.document (domready is possible only then).


I also think build in inline pdf support would be awesome. (Something like framepanel.loadPdf("foo.pdf"); ) Although that implemention was experimental (within an Iframe) it's not necessary to host a pdfdoc in that fashion. One could render those tags (<embed>,<object>) just as easily within a standard Panel or even as a BoxComponent.

JorisA
29 Dec 2007, 7:59 AM
Dammit, pdf was the only thing I needed :P (for now)
Anyway feel free to use and modify my example.

hendricd
29 Dec 2007, 2:41 PM
bump ;)

Hani
29 Dec 2007, 8:48 PM
Great extension!

Though I'm having an interesting issue with it. What I'd like to do is register a keymap for the panel so that the esc key can dismiss it.

So for example, when creating an ext Window with a iframepanel in it, I want to be able to hit escape while the focus is in the iframe and have the window be hidden/close. Ideally, all I'd need to do is register the keys on the window config...any thoughts on how to achieve that?

hendricd
29 Dec 2007, 9:21 PM
Where will the iframe's content be coming from same domain, external domain, or via miframe.update method ? (Security restrictions might make this difficult.)

If it's the first or the last, it's possible to use the 'sandbox' bound between the main page and it's iframe. Using the execScript method, you could set ESC key listeners within the child document with an eventual callback to:

parent.MyApp.window[window.closeAction]()

Do you have control over the IFrame content? If so, have it set the document ESC handler and call the parent (as above) instead.

Hani
29 Dec 2007, 9:32 PM
Hi Doug,

Can you elaborate on the execScript solution? I have full control over the iframe, and its contents are updated by my code programmatically (something similar to update).

What would I pass to the panel config to specify the key handling stuff?

hendricd
29 Dec 2007, 9:38 PM
If you 'own' the iframe, then just have it execute this on its EscapeKey callBack:

parent.Ext.getCmp('myWindow').close() [.hide()]

Nothing fancy required.

hendricd
30 Dec 2007, 8:00 AM
@hani - Been thinking on this some more.:-?

It may be possible to try something like this (assumes Ext is loaded in the iframe as well):


items:[{
xtype:'iframepanel'
, id: 'bogus'
, title:'Something Cool'
, defaultSrc : 'Extizedpage.html'
, listeners:{
documentloaded:function(iframe){
try{
var doc = iframe.getDocument();
var popup = Ext.getCmp('myWindow');
iframe.getWindow().Ext.get(doc).addKeyListener(27, popup[popup.closeAction],popup);
} catch(ex){ alert('Permission Problem? :' + ex.description || ex); }
}
}
}]....

KENT
31 Dec 2007, 9:20 PM
A suggestion if I may, is there any way to make the LoadMask continue to work after the page load is done ?

hendricd
1 Jan 2008, 10:44 AM
@Kent - not sure I understand (?)

Did you want to control the mask yourself? Just use panel.body.mask() / unmask(). That's essentially what MIPanel does.

galdaka
1 Jan 2008, 2:44 PM
Hi,

Sorry for my English.

Jack Slocum

hendricd
2 Jan 2008, 3:11 AM
I update the version of www.galdaka.es (http://www.galdaka.es) in my computer with your component. Now I want to
remove the iframe page ext library references. What is the way for do this?


@galdaka - It's not clear [to me] what you want to do. Can you post a code fragment/outline ?

~o)

massimo
2 Jan 2008, 3:19 AM
First of all let me thanks Doug Hendricks for sharing his work with us.
Your work help me a lot in developing an application. Thank you!

Now the problem.
The problem arises in IE7 and in FF when a page with a java applet is displayed within the Iframe (in IE6 everything works fine).
There is a toolbar with some menu buttons at the top of the Iframe. When the menu button is pressed the menu items are not displayed because they go under the Iframe.
When Ext.useShims property is set to true, then the problem is "quite" solved because the items are visible but the shadows stills remains under the Iframe, with a different behaviour for IE7 and FF.

I have attached a picture displaying the problem. In A everything works well, in B is displayed the problem with FF, in C the problem with IE7.

Sorry for my english!

Thanks in advance for your help.
Massimo

galdaka
2 Jan 2008, 4:14 AM
@galdaka - It's not clear [to me] what you want to do. Can you post a code fragment/outline ?

~o)

I thinking in use your component for not load Ext library in each iframe. All contents are in the same domain.

I want to remove the iframe page ext library references. What is the way for do this?

In the iframe pages that load in tabpanel I dont want to load ext library.

Thanks in advance,

galdaka
2 Jan 2008, 7:33 AM
@Galdaka -- Treat it to a custom renderer (if you want to manipulate the content before its written):





tabPanel.add({
id: Ext.id(),
xtype: 'iframepanel',
autoLoad: 'ExtcodeinXXX.html',
listeners:{
render:function(panel){
var noExtRE = /(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)/gi ; //adjust for your replace pattern
panel.getUpdater().setRenderer({
render:function(el, response, updateManager, callback){
el.update(
response.responseText.replace(noExtRE,''),
updateManager.loadScripts,
callback);
}
});
},
documentloaded : function(){},
domready : function(){},
single : true
}
});
tabPanel.doLayout();

Adjust the RegeXp to remove whatever you want from the fetched page before its written to the Iframe.


Sorry for my English again.

In my Iframes I use Ext. I want load Ext library only in parent window for load iframe more quickly. Is a fast way to do with your component?

This question: http://extjs.com/forum/showthread.php?p=79691#post79691

Thanks in advance,

hendricd
2 Jan 2008, 8:32 AM
@Galdaka -- An Iframe cannot share an Ext instance with its parent because Ext*.js binds its internal reference of 'window.document' privately (within a closure) during startup.

Each Iframe will need its own working Ext instance to host Ext components within it.

You'll need to load the required source files once, for use later:


var moduleCache={};
Ext.each([
{name:'base', url: 'adaptor/base/ext-base.js'},
{name:'all', url: 'ext-all.js'},
{name:'allstyle' , url: 'ext-all.css' } .....
], function(module){
Ext.Ajax.request( {
url:module.url,
success:function(response){
moduleCache[module.name] = response.responseText;
},
failure:function(response){
moduleCache[module.name] = '';
}
}, Ext);

Then, using the MIF.execScript method (This ext-all example will only work on FF, since a custom Ext build is required for IE) :

tabPanel.add({
id: Ext.id(),
xtype: 'iframepanel',
autoLoad: 'ExtcodeinXXX.html',
listeners:{
render:function(panel){
var noExtRE = /(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)/gi ; //adjust for your replace pattern
panel.getUpdater().setRenderer({
render:function(el, response, updateManager, callback){
el.update(
response.responseText.replace(noExtRE,''), //strip all script blocks
updateManager.loadScripts,
callback);
}
});
},
domready : function(){},
documentloaded : function(iframe){iframe.execScript( moduleCache.base+ moduleCache.all ); },
single : true
}
});
tabPanel.doLayout();You get the idea, no ?

hendricd
2 Jan 2008, 8:59 AM
The problem arises in IE7 and in FF when a page with a java applet is displayed within the Iframe (in IE6 everything works fine).Massimo

I think you may have to adjust a z-order somewhere in the document flow.

a) Perhaps either on the Shim itself, or
b) try giving each MIFP its own toolbar config ( tbar:[ .. ] );

Darius_D
3 Jan 2008, 3:30 AM
Hi,
At the beginning I'd like to say, that I've really liked your extension, it works great for me. But unfortunately I've encountered one problem. I'm working on a web page that contains one panel with toolbar on "north" side, one with grid on "west" and the main one (which is ManagedIFramePanel) on "center". The thing I would like to program is the possibility of printing main IFrame content. The code I'm using for achieving this is just little snippet:


mainViewport.getComponent( 'mainRegion' ).iframe.getWindow().print() ;It works fine on FF2.0 (it's printing just the IFrame content), but not on IE7 (it's printing whole site with all panels). Have you any experience with such behavior or any tips how to solve this problem?

I'm using Ext2.0, and ux.ManagedIFramePanel in version 0.46.

Thanks in advance,
Darius

hendricd
3 Jan 2008, 4:36 AM
mainViewport.getComponent( 'mainRegion' ).iframe.print();would set focus on the Iframe first (required for IE), then print()s it for you.

Darius_D
3 Jan 2008, 5:20 AM
Great, It worked. Didn't know that trick - thanks.

johnnydoe
4 Jan 2008, 1:33 PM
Hey all,

Got a quick question about handling links

If you were to click [create new tab] in the code below, it would open the new_link.html in a new tab (which is what i want to happen), then quickly destroy all of that and open http://www.google.com in an entirely new page (which is what i don't want to happen).

But that does make sense - the href is doing its thing, but how to stop that? How to get the link to open in the tab using the href's link as a source and NOT follow the href into a new window. Am i going about this the wrong way?

I want to use the href for readability (it wont always be me editing the link list), but im not necessarily married to that

Any ideas out there?

Thanks!



<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript">

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

var tabPanel = new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
items:[{
contentEl:'center1',
title: 'Home - default view tab',
autoScroll:true
}]
});

var linkPanel = new Ext.Panel({
region:'west',
id:'west-panel',
split:true,
collapsible: true,
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
contentEl: 'west',
title:'Link Panel',
border:true,
},{
title:'Some other stuff',
border:true,

}
});

var viewport = new Ext.Viewport({
layout:'border',
items:[linkPanel,tabPanel]
});

function addTab(tabTitle, targetUrl){
tabPanel.add({
title: tabTitle,
xtype:'iframepanel',
iconCls: 'tabs',
defaultSrc: targetUrl,
loadMask:true,
closable:true
}).show();
}

var actions = {
'create' : function(){
addTab("NEW TAB",'new_link.html');
}
};

function doAction(e, t){
e.stopEvent();
actions[t.id]();
}

linkPanel.body.on('mousedown', doAction, null, {delegate:'a'});
});

</script>
</head>
<body>
<div id="west">
<a id="create" href="http://www.google.com">[create new tab]</a>
</div>

<div id="center1">
</div>
</body>
</html>

hendricd
4 Jan 2008, 2:25 PM
@johnnydoe - think this thru a minute:


var actions = {
'create' : function(){
addTab("NEW TAB",'new_link.html');
}
};

function doAction(e, t){
e.stopEvent();
actions[t.id](); //whats with all this Action.Jackson stuff ;)
}

// linkPanel.body.on('mousedown', doAction, null, {delegate:'a'});

linkPanel.body.on( {
'mousedown': function(e, t){ // try to intercept the easy way
t.target = '_bland';
},
'click': function(e, t){ // if they tab + enter a link, need to do it old fashioned way
if(String(t.target).toLowerCase() == '_bland'){
e.stopEvent();
addTab('new tab', t.href);
}
},
delegate:'a'
});

</script>
</head>
<body>
<div id="west">
<a id="create" href="http://www.google.com">[create new tab]</a>
<a id="create" href="http://www.yahoo.com">[create new tab]</a>
</div>

maximumcoder
5 Jan 2008, 5:06 AM
hi hendrico,
ive been using the v47 plugin.
Using it as a tabpanel. The issue is... as i am loading different pages in the iframes. I intend to change the title of the panel with the title of the page loaded in the iframe.
i have retrieved the title of the page but cannot figure out how to change the title as i navigate to a different page.
I am using the documentloaded event listener as a trigger.




var newPanel = new Ext.ux.ManagedIframePanel({
title:"Loading...",
loadMask:true,
defaultSrc:l,
autoScroll:true,
listeners:{documentloaded:Main.setIframeTitle}
});
maintabpanel.add(newPanel).show();




function setIframeTitle(){
var title = o.getDocument().title;
//what to do next....
}

franckxx
5 Jan 2008, 5:10 AM
hi hendrico,
ive been using the v47 plugin.
Using it as a tabpanel. The issue is... as i am loading different pages in the iframes. I intend to change the title of the panel with the title of the page loaded in the iframe.
i have retrieved the title of the page but cannot figure out how to change the title as i navigate to a different page.
I am using the documentloaded event listener as a trigger.




var newPanel = new Ext.ux.ManagedIframePanel({
title:"Loading...",
loadMask:true,
defaultSrc:l,
autoScroll:true,
listeners:{documentloaded:Main.setIframeTitle}
});
maintabpanel.add(newPanel).show();




function setIframeTitle(){
var title = o.getDocument().title;
//what to do next....
}


It will be nice to have this improvement in future exemple release...

nice job

hendricd
5 Jan 2008, 5:14 AM
Any panel (as a child of a TabPanel) has it's header/footer removed, thus there will be no place to render a title. TabPanel uses that space to render it's tabStrip.

If you want each panel to 'emulate' a title, you'll have to insert a new element into the panels DOM yourself.

maximumcoder
5 Jan 2008, 5:15 AM
i did try to add the following line of code in the miframe.js



Ext.ux.ManagedIframePanel = Ext.extend(Ext.Panel, {
setTitle : function(title,cls){
//Ext.ux.ManagedIframePanel.superclass.setTitle.call(this,title,cls); this does not work...
Ext.ux.ManagedIframePanel.superclass.setTitle.call(this,"Test",cls);
hardcoding the title makes it to work perfectly but defeats the purpose ...

},

maximumcoder
5 Jan 2008, 5:20 AM
exactly... i wish to rename the title in the tabstrip.

b4 miframe i used to attach an iframe tag to a panel. And then again trapping the onload event to change the titles of the tabs. It used to work perfectly. I did have to keep tracks of the iframe id's.

my previous implementation... wokred flawlessly


var uniqID = Ext.id();
var newPanel = new Ext.Panel({
title: 'Loading....'
,collapsible:false
,closable:true
,id:uniqID
,bodyBorder:false
,border:false
,header:false
,applyTo:Ext.DomHelper.append(document.body,
{tag: 'iframe', frameBorder: 0, src: l,style:"frameBorder:0;width:100%;height:100%;",onload:"Main.setIframeTitle('"+uniqID+"',this)"})
,baseCls:'x-panel'
,autoScroll:true
,frame:false
,animCollapse:false //cannot animate a collapse/expand on an Iframe !
});
maintabpanel.add(newPanel).show();




if(frame){
if(frame.document){
if(frame.document.getElementByName("title")){

var innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document;
if(innerDoc.title)
Ext.getCmp(id).setTitle(innerDoc.title);
}
}
}

Any panel (as a child of a TabPanel) has it's header removed, thus there will be no place to render a title. TabPanel uses that space to render it's tabStrip.

If you want each panel to 'emulate' a title, you'll have to insert a new element into the panels DOM yourself.

hendricd
5 Jan 2008, 6:04 AM
This has been long-standing issue with Panel. It's still not fixed in 2.0 Final, but here (http://extjs.com/forum/showthread.php?p=81146#post81146)is the issue.

You can override either MIFP or Ext.Panel just to try it:

Ext.override (Ext.Panel, {
/**
* Sets the CSS class that provides the icon image for this panel. This method will replace any existing
* icon class if one has already been set.
* @param {String} cls The new CSS class name
*/
setIconClass : function(cls){
if(this.rendered && this.header){
var old = this.iconCls;
this.iconCls = cls;

if(this.frame){
this.header.addClass('x-panel-icon');
this.header.replaceClass(old, this.iconCls);
}else{
var hd = this.header.dom;
var img = hd.firstChild && String(hd.firstChild.tagName).toLowerCase() == 'img' ? hd.firstChild : null;
if(img){
Ext.fly(img).replaceClass(old, this.iconCls);
}else{
Ext.DomHelper.insertBefore(hd.firstChild, {
tag:'img', src: Ext.BLANK_IMAGE_URL, cls:'x-panel-inline-icon '+this.iconCls
});
}
}
}
}
});Then, this should work as orginally intended:


listeners:{documentloaded:trackTitle}

trackTitle = function(iframe){
try{
var panel, doc = iframe.getDocument();
if(doc && panel = iframe.ownerCt){
panel.setTitle(doc.title, iconClass);

}
} catch(ex){} //we might not "own" the iframes document
};

maximumcoder
5 Jan 2008, 6:12 AM
im sorry... i am quite a n00b at this...

where do i have to make the afore mentioned changes???

maximumcoder
5 Jan 2008, 6:17 AM
never mind.. i got it..!!!

its working like a charm!!! thanks!!

KENT
7 Jan 2008, 6:49 PM
Hi hendricd,
I'm using MIFP for a TabPanel, but it seems to make my tabs are set to 'closable' by default. How can I make my tab un-closable now ? thanks

hendricd
7 Jan 2008, 7:00 PM
That is the default behavior for MIFP.

Rational: If the URL specified for the defaultSrc returns an Error HTTP status (404), the user has the ability to close the tab (when loadMask==true).

Your call in the end but, to override that, just set:

closable:false in MIFP's constructor.

KENT
7 Jan 2008, 7:03 PM
That's what I need :D Thanks

MaksimS
8 Jan 2008, 9:01 AM
Hi Doug,

I have a ManagedIFrame displayed within a viewport layout panel - it's autocreated using:



var content=new Ext.ux.ManagedIFrame ({
autoCreate:{
id:'content',
frameBorder: 0,
cls:'x-panel-body',
width: '100%',
height: '100%',
src:'http://...an URL sitting on the same domain...'
}
});


...and used within viewport's layout panel via:



...
contentEl: content,
...


Both caller and iframe-based URLs are sitting on the same domain.

The problem is - I need to execute a JavaScript function already defined (and publicly exposed) within one of the frames displayed via managed iframe. Is there any example of how to access such functions? The other question is - how to set up a listener to listen to events raised via iframe-originating functions?

Regards,
Maksim Sestic

hendricd
8 Jan 2008, 9:20 AM
@MaksimS - I would recommend that you use MIFP, cleaner ;)



new Ext.Viewport({
....
items:[{
xtype:'iframepanel',
id:'content',
defaultSrc:'someLocalPage.html',
listeners:{documentloaded: doSomething}
}],
......
});
Not clear on what is in the Iframe, but you could execute JS in one of two ways:


doSomething = function(iframe){

//Method 1
var win = iframe.getWindow(); //get the Iframes window (global) object
win.document.title = "new Title";
//or
iframe.getDocument().title = "new Title";

//Method 2
iframe.execScript("document.title = 'new Title';");

};


The other question is - how to set up a listener to listen to events raised via iframe-originating functions?that depends (again) on what's inside the Iframe (another Ext instance)? What event are you trying to capture there?

dolittle
9 Jan 2008, 12:43 PM
Not sure if it is related to this extension.

I'm using an iframe with src="some website"

When the user clicks on a link and the url is changed inside the iframe it flickers.
I tried the same website without an iframe and the transition between pages is smooth.

Is it possible to make the transition inside the iframe smooth?
Could it be a cache issue? Maybe the broswer doesn't cache pages inside iframes?
Will frames instead of iframes be better?

Thanks

hendricd
9 Jan 2008, 1:07 PM
@dolittle - Didn't leave me much to go on.. ;)

What Browser(s), Version?

What site(s)?

Only apparent in MIF(P) or any Iframe?

dolittle
9 Jan 2008, 1:33 PM
With some websites IE7 works fine but with others it doesn't.
FF2 also flickers.

It happens with normal iframes.
An example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iframe</title>
</head>
<body>

<iframe src="http://www.drupal.org"
id="childFrame"
width=100%
height=800px;
name="childFrame">
</iframe>



</body>
</html>

Try to navigate between the pages.
When embedded inside the iframe you can see that the browser "paint" the objects again.
When the website is standalone it reappears immediately.

MaksimS
10 Jan 2008, 2:02 AM
Hi Doug,

Sorry for not being precise - please see attached drawing. I have a MIFP (thanks for the tip :) ) hosting a non-EXT URL/frameset sitting on the same domain. Frameset consists of, say, two named frames - FrameA and FrameB:

http://www.geoinova.com/examples/MIFP.jpg

In this example, FrameA hosts a JavaScript function named Refresh(). FrameB hosts certain function which raises OnPan() event. Basically, I'm trying to perform two operations:

1) Execute Refresh() function sitting inside FrameA
2) Intercept OnPan() event being raised within FrameB

This georgeous setup :) is not my idea - URL hosted within MIFP is actually MapGuide OpenSource Web application (http://mapguide.osgeo.org/).

Regards,
Maksim Sestic


@MaksimS - I would recommend that you use MIFP, cleaner ;)
Not clear on what is in the Iframe, but you could execute JS in one of two ways:

that depends (again) on what's inside the Iframe (another Ext instance)? What event are you trying to capture there?

hendricd
10 Jan 2008, 2:33 AM
Based on your diagram:



var frameSet = yourMIFP.iframe.getWindow(); //window context of your frameset
var frameA = frameSet.frames['FrameA']; //the kid frames
var frameB = frameSet.frames['FrameB'];

if(frameA){
frameA.Refresh()
}

if(frameB){
frameB.[someObject?.]OnPan = function(){ //panhandler };
}

But frankly, I don't see why you couldn't use two MIFPs in a column layout and get better control over the events etc...

MaksimS
10 Jan 2008, 3:29 AM
Thanks a lot, I'll give it a go and report on results.

Actually, I don't have any (or rather just a slight) influence on basic frames setup. MapGuide application for itself consists of/hosts 6 or 7 (!) frames in total, each of them having specific purpose. Each frame in every frameset expose several JavaScript utility functions targeted against displayed map and/or map elements (legend, commands, etc).

Have a look at some results:

http://www.geoinova.com/examples/MAP_01.jpg

http://www.geoinova.com/examples/MAP_02.jpg

Yes, this interactive map hosted within MIFP (sitting inside Viewport Layout) has several hidden frames. They talk to each other and that's a major catch for a more serious redesign.

I'm trying to build a better (EXT-based) UI around a MG Server, while preserving existing JS functionality. If there are interested parties around, we could together build EXT-based MG UI from scratch :) Frankly, I'm experienced with .NET / ASP.NET, JavaScript scares me a bit :D

Regards,
Maksim Sestic


Based on your diagram:
But frankly, I don't see why you couldn't use two MIFPs in a column layout and get better control over the events etc...

MaksimS
10 Jan 2008, 5:01 AM
Hi Doug,

Your code sample on calling JS functions worked, thanks a lot :) Please find attached a description of general MapGuide frames layout - they talk to each other heavily so any redesign seems all but trivial...

http://www.geoinova.com/examples/MG_FRAMES.jpg

Regards,
Maksim Sestic

hendricd
10 Jan 2008, 5:43 AM
Well, good luck with (ALL) that ! ;)

KENT
11 Jan 2008, 1:04 AM
Hi Hendricks,
May be a wrong placed question, but I want to increase window's width on tab change, what should I do ? Thanks for your help in advance :>

MaksimS
11 Jan 2008, 1:42 AM
Hmm, I've been thinking of available options for painless refactoring given design. I guess one of the ways is to create other MIFP(s) that display "proxy" elements of original frameset, something like:

http://www.geoinova.com/examples/MIFP_2.jpg

The thing is - frames talk to each other so it's not possible to break given structure. "Original" Frame2 should be hidden, while it's contents displayed as a "proxy" is visible within MIFP 2. Somehow, proxy frame should be unaware of it's "artificial" display context /:)

I have no idea whether it's possible at all, since "proxy" element is not just another instance of original element - it _is_ the instance of the original element.

Regards,
Maksim Sestic


Your code sample on calling JS functions worked, thanks a lot :) Please find attached a description of general MapGuide frames layout - they talk to each other heavily so any redesign seems all but trivial...

hendricd
11 Jan 2008, 4:33 AM
May be a wrong placed question, but I want to increase window's width on tab change, what should I do ?

@Kent -- Indeed. You'll need to post (to Help) more of your plan for resizing the Ext.Window or Browser Window?

hendricd
11 Jan 2008, 4:38 AM
@Maksims -- Where the frameset is the current bridge between FrameA/B (think parent.frames['FrameA']) your main page would become that bridge instead, FrameA and B both would become MIFPs, and would communicate with each other the same way.

IOW: the parent.frames[] interface would need to be preserved to pull it off. ;)

Gregory
11 Jan 2008, 5:11 AM
Ext.getCmp('my_iframe').iframe.setSrc('/something.html'); - do nothing in Opera 9.25 for Win.

To reload iframe I use this code:
var iframe = window.frames['my_iframe'];
iframe.location.href = '/something.html';

It works good in O 9.25, FF2 and IE 6.0

hendricd
11 Jan 2008, 9:20 AM
@Gregory -- In order to preserve MIF's 'documentloaded' event x-browser, the iframe.src = url method must be used. Opera (in its cache-centric-wisdom) will not honor a refresh by setting the src to the same previous URL value.

I have modifed MIF[P].setSrc to handle that scenario for Opera. In the interim, consider this workaround until the next release is posted:



if(Ext.isOpera){
Ext.getCmp('my_iframe_panel').setSrc('');
}
Ext.getCmp('my_iframe_panel').iframe.setSrc('/something.html');

//both .setSrc interfaces are equivalent.
Optionally, if same-domain:

Ext.getCmp('my_iframe_panel').iframe.getWindow().refresh();

Gregory
11 Jan 2008, 2:34 PM
if(Ext.isOpera){
// It works fine
// but only with not empty string :-)
Ext.getCmp('preview_iframe').setSrc('asfd');
}
Ext.getCmp('preview_iframe').setSrc('http://gooooooogle.com');

hendricd
11 Jan 2008, 2:40 PM
Are you calling setSrc again after the Panel is rendered with a defaultSrc ?

Gregory
11 Jan 2008, 2:49 PM
Are you calling setSrc again after the Panel is rendered with a defaultSrc ?

Yes:


mainTabPanel.add({
listeners: { activate: handleActivate0 },
title: 'Edit',
iconCls: 'ico_edit',
html: '<div class="big_form_container" id="form-ct"></div>'
},{
title: 'View',
xtype: "iframepanel",
id: 'preview_iframe',
iconCls: 'ico_view',
defaultSrc: 'http://something.org',
closable: false,
listeners: { activate: handleActivate1 }
}
);

hendricd
11 Jan 2008, 2:53 PM
Where/when are you calling setSrc again ?;)

Gregory
11 Jan 2008, 3:07 PM
I use the button in toolbar to reload iframe content:


toolbar.add({
text: 'Update',
iconCls: 'ico_update',
tooltip: {
cls: 'none',
text: 'Update page'
},
listeners : { click: onReloadFrameClick1 }
});

....

function onReloadFrameClick1(){
if(Ext.isOpera){
Ext.getCmp('preview_iframe').setSrc('huy');
}
Ext.getCmp('preview_iframe').setSrc('http://some.url/generated_in_php_script');
}

P.S.
In 9.50 Beta 1 for Linux setSrc working without any addons :-)

hendricd
11 Jan 2008, 4:08 PM
@Gregory -- When I post the next release (shortly) you'll be able to do this in your handler (actually you can now if it weren't for Win.Opera):




function onReloadFrameClick1(){
var panel = Ext.getCmp('preview_iframe');
if(!panel)return;

if(Ext.isOpera){
panel.setSrc('huy',true); //discard the Url afterwards
}
panel.setSrc(); //use whatever MIFP.defaultSrc was
}

hendricd
12 Jan 2008, 9:48 AM
Fixed that Opera issue (hopefully).

hendricd
16 Jan 2008, 6:12 AM
Gecko has a few long-standing problems:

plugins should withstand a reframe of the object frame
https://bugzilla.mozilla.org/show_bug.cgi?id=90268
Flash movie restarts when using JavaScript to hide/show a layer
https://bugzilla.mozilla.org/show_bug.cgi?id=262354


..with reloading objects (iframe, object, embed) when their parent container-style is set to display:none; To prevent the refresh, you must use visibility:visible/hidden.

For those of you using Iframes within a TabPanel on FireFox (any Release), the following Panel config option should be applied to all items in the layout (TabPanel or other 'card' layouts):



..... items:{
xtype:'tabpanel',
id:'sites',
activeItem:'yourFrame',
defaultType: 'iframepanel',
defaults:
Ext.apply({
closable:true,
loadMask:true,
height:'100%',
width:'100%',
},Ext.isGecko?
{style:{position:'absolute'},hideMode:'visibility'}
:false),
items:[ ............. ]
For collapsable Panels containing IFrames(MIFP) that do not participate in a Layout, you'll need this treatment as well:



//keep the el, bwrap from refreshing when hidden.
MIFP.on({ render : function(panel){
Ext.each([this.el, this[this.collapseEl]] ,
function( elm ) {
elm.setVisibilityMode(Ext.Element.VISIBILITY).originalDisplay ='visible';
});
},
scope:MIFP,
single:true
});
Hopefully mozilla.org will fix this in FF 3.x =D>

hendricd
18 Jan 2008, 4:29 PM
Thanks to everyone for their valuable feedback.

Enjoy.

njentit
20 Jan 2008, 8:37 AM
Hi i'm newbie on using Extjs libray.
My Report doesn't shown when i open it from Ext managedIframe, and the progress bar still continue although canel button clicked.
Can you give me advice on my problem.

thanks for the attention.

hendricd
21 Jan 2008, 12:08 PM
@njentit -- You would need to post some of your code. I depends largely on how you are loading the iframe content.

seade
21 Jan 2008, 4:05 PM
This is an excellent plugin, but in IE6 I am getting the "This page contains secure and nonsecure items" warning (my /"Display mixed content" setting is set to "prompt").

If I hit "No" to not display the nonsecure items the iframe initially gets an "Action cancelled" page before loading the real content. According to http://support.microsoft.com/kb/184960 it is most likely caused by some failure to load content.

Is anyone else seeing this problem?

Cheers,

Scott

hendricd
21 Jan 2008, 4:23 PM
This issue occurs because Internet Explorer determines that the successfully loaded frames are in the Internet domain and the internally generated error frames are on the local computer, and therefore sets the current zone to mixed. This triggers a security error message that alerts you that the page contains secure and non-secure items. As as general rule for IE, if your main page and inline content do share not the https: pragma, you will get this warning.

One of the two sources is not secure in this context.

KENT
21 Jan 2008, 8:18 PM
Hi Hendricks,
How can I get the name of MIFP ? I want to use some innerHTML but don't know how to get iframes' name created by MIFP.

hendricd
21 Jan 2008, 8:47 PM
@KENT -- After render, the iframe is available via the panel as:



panel.iframe

seade
21 Jan 2008, 9:56 PM
As as general rule for IE, if your main page and inline content do share not the https: pragma, you will get this warning.

One of the two sources is not secure in this context.
Okay - I knew that, but hadn't checked the code I was generating. I currently have defaultSrc set to a relative url that excludes the https of the surrounding page. I suspect that MIF is loading the page using http (causing the warning) and then hitting a redirect to https (which is why the page appears to work). I assume if a use a fully qualified url the problem will go away.

Cheers,

Scott

hendricd
21 Jan 2008, 9:59 PM
Yeah, on IE, it may require and absolute address for iframes in that scenario. Lemme know, huh?

seade
22 Jan 2008, 12:42 AM
Yeah, on IE, it may require and absolute address for iframes in that scenario. Lemme know, huh?
No, an absolute url does not resolve the problem.

Any other suggestions?

Scott

Some configuration details:


var centerPanel = new Ext.TabPanel({
id:'maincenter',
region: 'center',
enableTabScroll: true,
defaults: { autoScroll: true, layout: 'fit' }
});

var myTab0Obj = centerPanel.add({
id: 'myTab0',
xtype: 'iframepanel',
defaultSrc: 'https://mydomain.com/dir/mypage.html',
loadMask: {msg:"Loading content..."},
style:{position:(Ext.isIE?'relative':'absolute')},
hideMode:(Ext.isIE?'display':'visibility'),
tbar: new Ext.Toolbar({ items: [ '' ]}),
title: "My tab title",
closable: false
});

centerPanel.setActiveTab(0);

massimo
22 Jan 2008, 5:14 AM
I'm trying to switch the content of a MIFP between an URL source and a "markup" source.
Something like that, slightly modifying the code in ipanels2.html, adding a button that performs the switch:



var toggle = false;

[...]

{
id: 'bogus'
,title:'Bogus Markup'
,html: '<h1>This Iframe should be printable.</h1>'+Ext.example.bogusMarkup
,listeners:{
documentloaded:function(iframe){
Ext.example.msg('IFrame Panel(Markup)- ManagedIFrame', 'Document is Ready.');
}
},
tbar:[{
text: 'Print',
handler: function(){
Ext.getCmp('sites').activeTab.iframe.print();
}
},'-',{
text: 'Switch', //<-- Added this
handler: function(){
toggle = !toggle;
if (toggle)
Ext.getCmp('sites').activeTab.setSrc('http://www.google.com', true);
else
Ext.getCmp('sites').activeTab.iframe.update('<h1>This Iframe should be printable.</h1>'+Ext.example.bogusMarkup);
}
}]
}


In FF this seems work, but in IE7 I get an "Access denied" error when switching from url content to markup content.

Can someone give me a little help?

Thank you in advance.
Massimo

hendricd
22 Jan 2008, 6:17 AM
@Massimo -- this occurs because an iframe.update would violate IE's local-domain access policy, when iframe currently has Google loaded in it. To handle your scenario, you would need to switch the iframe back to a local domain context (eg, about:blank) to restore local access to the iframe's document object before an update can occur.

Try this approach:



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

i.setSrc('about:blank', true); //restore local domain context first.
}
}
}
}]

massimo
22 Jan 2008, 6:29 AM
Naturally your approach is the right approach!

Thank you Doug, for your help.

Massimo

seade
22 Jan 2008, 7:24 PM
No, an absolute url does not resolve the problem.


Okay, after much mucking about I have identified the problem.

At line 366 of the RC1 source an iframe tag is created without a src attribute. When the enclosing page is running over SSL, IE6 doesn't like this and produces the mixed content warning. The solution is to add the src attribute thus:


this.bodyCfg ||
(this.bodyCfg =
{tag:'div'
,cls:'x-panel-body'
,children:[Ext.apply({tag:'iframe',
frameBorder :0,
cls :'x-managed-iframe',
src :Ext.isIE&&Ext.isSecure?Ext.BLANK_IMAGE_URL:'',
style :{width:'100%',height:'100%'}
},unsup)
]
});
Only the 'src' line was added and you would need Ext.BLANK_IMAGE_URL to specify an SSL location.

Note that I have used Ext.BLANK_IMAGE_URL rather than Ext.SSL_SECURE_URL above, this is because Ext.SSL_SECURE_URL (which is "javascript:false") causes "false" to be rendered temporarily in the iframe (not very pretty). "javascript:'Loading...'" also works, if you don't mind something being rendered.

Thanks for making this excellent extension Doug. I hope this fix helps others that need IE6 support for SSL content.

Scott

hendricd
22 Jan 2008, 8:07 PM
@scott - Thanks for diligence on that one. However, as you might guess, that raises other issues (the reason src was not included in the first place ;) ) with UpdateManager and initial document ownership from foreign domains.

I'm hoping this variation will work equally well for you and keep the other quirks from wreaking havoc:



this.bodyCfg ||
(this.bodyCfg =
{tag:'div'
,cls:'x-panel-body'
,children:[Ext.apply(
{tag:'iframe',
frameBorder :0,
cls :'x-managed-iframe',
style :{width:'100%',height:'100%'}
} ,unsup, Ext.isIE&&Ext.isSecure?{src:Ext.SSL_SECURE_URL}:false )
]
});
A second option would be to simply pass the desired bodyCfg in your MIFP Ctor. As you can see, it's written that way for that purpose.

Either way, let me know how it turns out.
Thanks again !

seade
22 Jan 2008, 8:35 PM
I'm hoping this variation will work equally well for you and keep the other quirks from wreaking havoc:


The suggested change seems good and I would prefer it to having to specify bodyCfg myself.

Cheers,

Scott

hendricd
23 Jan 2008, 4:59 AM
@Scott -- Good to hear that works well.

I think I'm going to default as Ext.SSL_SECURE_URL though. If having 'false' display in the frame is undesirable, it still permits setting any value you want during startup:



Ext.BLANK_IMAGE_URL = '../resources/images/default/s.gif' ;
if(Ext.isIE && Ext.isSecure){
Ext.SSL_SECURE_URL = Ext.BLANK_IMAGE_URL;
}
I'll include more about this issue in the Docs/examples.

Thanks again.

seade
28 Jan 2008, 7:50 PM
In IE6, the content I am presenting in MIFP always displays a horizontal scrollbar that is not otherwise present when IE7 or Firefox is used. Is there some way to adjust the width for IE6 so that the horizontal scrollbar is no longer required.

I have attached screen shots of the same content presented in IE6 and IE7 to illustrate the problem.

Scott

hendricd
28 Jan 2008, 10:51 PM
@seade - Would need to see more of your MIFP Ctor and a description of the iframe's document styling to comment further on that.

seade
29 Jan 2008, 2:10 AM
@seade - Would need to see more of your MIFP Ctor and a description of the iframe's document styling to comment further on that.
Ctor is pretty much as set out in http://extjs.com/forum/showthread.php?p=112657#post112657

iframe's document styling is the same for IE6, IE7 and Firefox, but problem is in IE6 only. There is nothing width specific in the style sheet - the MIFP and its content resizes with the surrounding page. Rather than posting the entire style sheet is there something in particular you think I should be looking for?

Thanks for your responses.

Scott

hendricd
29 Jan 2008, 6:13 AM
@seade -- As the default style for the Iframe itself is {overflow:'auto'}, you should not need autoscroll on for the Panel. Try this :


var centerPanel = new Ext.TabPanel({
id:'maincenter',
region: 'center',
enableTabScroll: true,
defaults: { autoScroll: true, layout: 'fit' }
});

var myTab0Obj = centerPanel.add({
id: 'myTab0',
xtype: 'iframepanel',
defaultSrc: 'https://mydomain.com/dir/mypage.html',
loadMask: {msg:"Loading content..."},
style:{position:(Ext.isIE?'relative':'absolute')},
hideMode:(Ext.isIE?'display':'visibility'),
tbar: new Ext.Toolbar({ items: [ '' ]}),
title: "My tab title",
closable: false,
autoScroll: false
});

centerPanel.setActiveTab(0);

What DOCTYPE are you using? Can you get by without one?

seade
29 Jan 2008, 1:37 PM
@seade -- As the default style for the Iframe itself is {overflow:'auto'}, you should not need autoscroll on for the Panel. Try this :



autoScroll: false

Makes no difference.


What DOCTYPE are you using? Can you get by without one?
I am using XHTML Transitional, the problem occurs even if I eliminate this.

For kicks I just tried Safari and Opera (support for these is certainly not a priority for this particular application) - Safari is okay but Opera renders the content wider than the available space without a horizontal scrollbar!

There is only a limited set of style sheets in use for the framed content so I can probably tweak them so that no content appears over to the right, but it would be nice to get this working properly. I think that in order to go any further I will need to put a sample page together.

Cheers,

Scott

hendricd
29 Jan 2008, 1:41 PM
Yep, the sample would be useful.

seade
29 Jan 2008, 4:34 PM
Yep, the sample would be useful.
Okay, try http://members.westnet.com.au/seade/ext-2.0.1/mifp_hscroll_ie6.html

Problem is evident in IE6 and Opera.

Cheers,

Scott

hendricd
29 Jan 2008, 7:23 PM
Thanks, I'll take a look at at.

battisti
30 Jan 2008, 12:15 PM
Correct, the only way you'll get a 'useful' Ext (window.document) context for your Iframe, is either:

a) load ext-all.js via script tag in your IFrame's document (likely cached, but still expensive), or..
b) eval the contents (of a modified for IE - EventManager) ext-all.js into the iframes window(global) namespace, (but you must 'own' the Iframes' document to do that). That's also specifically why ux.ManagedIframe.execScript was implemented ;)

I need to load ext-all once and use it under my iframe.

someone have the code of the ( b ) option hendricd sugest ?

hendricd
30 Jan 2008, 12:27 PM
It involves a highly customized build of 1.1 (only), and a special ux.ModuleManager extension. It is not my intention to support it AT ALL (on this forum or otherwise) on 1.1 however.

I will be releasing a solution for 2.0+ in the coming weeks.


Why are you still on 1.x?

battisti
30 Jan 2008, 12:29 PM
no i use ext 2.0, have some other form to make it ?

hendricd
30 Jan 2008, 12:42 PM
Sorry, no. Still working on a custom build for 2.0+, and must replace the DocumentReady feature for IE in order to do it.

Will advise when I get closer.

evilized
30 Jan 2008, 1:59 PM
Hi, u have a very nice extension here. =D>

but, i've a problem with this.

in FF all work fine, but in IE7 or IE6 my iframe is show in blank (when i click any link in the menu) without content... but if i resize the window.. the content is show correctly.

i dont know wich is the problem. :((

my managediframe definition.


viewport = new Ext.Viewport({
layout:'border',
defaults:{border:false,style:'padding: 2px 2px 2px 2px;'},
items:[{
region:'west',
id:'west-panel',
title:'Menu',
tbar:[{
text:'Cerrar Sesion',
icon:'images/exit.png',
cls: 'x-btn-text-icon',
handler:doExit

},{
text:'Cambiar Clave',
icon:'images/settings.png',
cls: 'x-btn-text-icon',
handler:function(){
Orafti.User.cpwdDialog.show(-1);
}
}],
border:true,
collapsible:true,
animCollapse: true,
width: 200,
margins:'2 2 2 2',
layout:'accordion',
defaults:{border:false},
layoutConfig:{
animate:true
},
items: [
menuPanel,
reportPanel,
adminPanel
]
},
new Ext.BoxComponent({
region:'north',
style:'background-color:white;padding:5px 5px 5px 5px;',
el:'header',
height:15
})
,new Ext.BoxComponent({
region:'south',
style:'background-color:white;padding:5px 5px 5px 5px;',
el:'footer',
height:15
})
,{
id:'content',
region:'center',
autoScroll:false,
baseCls:'x-panel',
border:true,
body: new Ext.ux.ManagedIFrame ({
autoCreate:{
id:'main',
frameBorder: 0,
cls:'x-panel-body',
width: '100%',
height: '100%'
}
})
}]
});


and the HTML is:


<html>
<head>
<title>Orafti S.A.</title>
<link rel="stylesheet" type="text/css" href="sdk/ext-2.0/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="sdk/ext-2.0/resources/css/xtheme-slate.css"/>
<script type="text/javascript" src="sdk/ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="sdk/ext-2.0/ext-all.js"></script>
<script type="text/javascript" src="sdk/ext-2.0/ext-lang-sp.js"></script>

<script type="text/javascript" src="js/settings.js"></script>
<script type="text/javascript" src="sdk/ext-2.0/ext.ux.managediframe.js"></script>
<script type="text/javascript" src="js/change_pass.js"></script>
<script type="text/javascript" src="js/home.js"></script>

</head>
<body>
<div id="container">
<div id="footer" style="font-size:xx-small;">
&copy; Todos los derechos reservados por <a href="http://www.frontec.cl">www.frontec.cl</a>.
</div>
<div id="header" style="font-size:xx-small;">
&nbsp;
</div>

</div>
</body>
</html>

please, can anybody give an idea of this problem.

hendricd
30 Jan 2008, 3:35 PM
The ManagedIframePanel would be better suited for your layout:



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

Lester Burlap
31 Jan 2008, 2:32 PM
Thank you. Thank you. Thank you. (for this Component)

Sincerely,
Lester Burlap

seade
1 Feb 2008, 3:39 AM
Note that I have used Ext.BLANK_IMAGE_URL rather than Ext.SSL_SECURE_URL above, this is because Ext.SSL_SECURE_URL (which is "javascript:false") causes "false" to be rendered temporarily in the iframe (not very pretty). "javascript:'Loading...'" also works, if you don't mind something being rendered.


I just came across this: http://dev2dev.bea.com/blog/jsnyders/archive/2007/11/ie6_iframe_with_no_src_over_ss_1.html
Makes me wonder if Ext.SSL_SECURE_URL shouldn't be set to "javascript:void(0)" by default.

Scott

hendricd
1 Feb 2008, 4:48 AM
@seade - Yes, I've used that elsewhere (and in another framework) in the past with good results as Dean elaborates on. It would be a good alternative, but Ext still allows for it's use at our discression throughout the framework.

I'll probably wind up using that as the default for MIF in the final.

Your layout issues with IE/Opra are indeed a puzzle. I'm still playing with different combinations. I get it to work just fine by removing SCROLLING:auto, but as soon as you hover over a tabTitle, the frame reflows again. ;( Very wierd CSS behaviour !

Will let ya know if I find something tangible...

hendricd
4 Feb 2008, 9:18 PM
Hopefully this is the last round of changes before 1.0.

I'll be posting an example of how to load ext-all.* (or just modules) into ManagedIframes in a day or two and try to fill out the documentation some more (yuk :(). Stay Tuned ;)

Reen
5 Feb 2008, 4:34 AM
@hendricd: is it possible to detect changes in the iframe (e.g. the user surfed to a different url or submitted a form)?

hendricd
5 Feb 2008, 5:31 AM
@Reen - Sure. You would likely just set up a few listeners on the frame document to monitor things like that.

What all are you after?

csextjs
5 Feb 2008, 8:00 AM
Hi hendricd,

I've been following this thread and you've written a very useful extension.
Try to follow your given example, Do I need "Ext.ux.ManagedIframe.js"?
If so where can I get this file?

Thanks.

hendricd
5 Feb 2008, 8:28 AM
@csextjs -- The latest build (miframe.js) is available (in the attachments area) of the first post (http://extjs.com/forum/showthread.php?t=16590) of this thread.

csextjs
5 Feb 2008, 9:56 AM
Thank you.

csextjs

brookd
5 Feb 2008, 5:19 PM
Hi, I have tab that has a managedIframePanel inside it, and I want to be able to close the tab and add it back in without re-creating the iframe element. I tried to create the element via:


this.previewPanel = new Ext.ux.ManagedIframePanel({....})

But when ever I added that to a tabPanel, I got a wonky tab and no content, so I abandoned that Idea. Now I am trying this, which works the first time, but after the tab is closed, it gets added back in fine, but no iframe:



/* Create the preview panel if it does not exist */
if (!this.previewPanel){
this.previewPanel = this.tabBar.add({
xtype: 'iframepanel',
title:'Preview',
id:'liveeditpreviewtab',
closable:true,
autoDestroy:false,
defaultSrc: '',
autoScroll: false
}).show();

}else{

// show the existing panel
this.tabBar.add(this.previewPanel).show();

}

hendricd
5 Feb 2008, 6:09 PM
Nah,

Your tabPanel logic just needs to be addressed first.

Here, if the tab was closed, it still lives in the DOM, and has its original Id. Try this one:



this.showPreview = function(url){
var tab, id = 'liveeditpreviewtab';
tab = this.tabBar.getItem(id) //already in tabPanel ?
|| ( tab = this.tabBar.add( Ext.getCmp(id) || /* Create the preview panel if it does not exist */
{ xtype: 'iframepanel',
title :'Preview',
id :id,
closable :true,
autoDestroy:false,
autoScroll : false,
autoShow :true, //in case it was hidden on close
listeners:{
beforeclose: function(panel){
this.tabBar.remove(panel,false); //preserve the entire panel
document.body.appendChild(panel.getEl().dom);
panel.hide();
this.tabBar.doLayout();
return false;
},
scope: this
}
}) );

this.previewPanel = tab;
tab.setSrc(url);
this.tabBar.setActiveTab(tab);
return tab;
};
You really can't use this.previewPanel in your "existing-tab" decision because its a stale reference to a tab that "once was".

brookd
5 Feb 2008, 7:19 PM
Thank you for the reply. I thought that setting autoDestroy to false would mean the panel would not be destroyed, just hidden.

Do you find you use this kind of routine frequently (hiding components in the DOM for later use)?

hendricd
5 Feb 2008, 7:29 PM
Thank you for the reply. I thought that setting autoDestroy to false would mean the panel would not be destroyed, just hidden.

Do you find you use this kind of routine frequently (hiding components in the DOM for later use)?

Yes, autoDestroy simply removes it from it's containers items collection, but little else with the DOM itself. You have manage that.

It's come up twice for me, and few other threads here had similar issues.

Reen
6 Feb 2008, 6:01 AM
@Reen - Sure. You would likely just set up a few listeners on the frame document to monitor things like that.

What all are you after?
Which listeners do I have to set up? I'm currently experimenting with this:

var iframe = new Ext.ux.ManagedIframePanel({
listeners:{
documentloaded: function(e) {
console.info('documentloaded',this,e);
},
domready: function(e) {
Ext.select('body',false, e.dom.contentDocument).addListener('unload', function(ee) {console.info(ee);});
}
}
});

The unload event doesn't fire, so it seems I'm missing something?
What I need is an effective way to detect if the user submitted the form inside the iframe.

hendricd
6 Feb 2008, 6:35 AM
@Reen -- It's not clear whether the form has Ext loaded in it, but try these:


var postHandler = function(e){
e || (e=this.event); //for IE
console.info('unloading', e);
};

var iframe = new Ext.ux.ManagedIframePanel({
listeners:{
documentloaded: function(frame) {
console.info('documentloaded',this,frame);
},
domready: function(frame) { //will only fire if you have domain-privilege in the frame
console.info('domready',this,frame);

//Have doubts about this one, but try:
Ext.EventManager.on(frame.getWindow(),'beforeunload', postHandler );

//or:

frame.getWindow().onbeforeunload = postHandler.createDelegate(frame.getWindow()) ;

//or, if your Form is Ext-'ized' you could also set the listener within that page:
frame.execScript('Ext.EventManager.on(window,"beforeunload", parent.postHandler )');
}

}
});

hendricd
6 Feb 2008, 9:58 AM
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 demoPack.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,
(function(){var D=Ext.lib.Dom;var E=Ex......
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/adviframes.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).

hosehead
6 Feb 2008, 1:11 PM
anyway to use this with a jsonStore or do we have to break it out defining each part of the Store 1.1 style?

hendricd
6 Feb 2008, 1:17 PM
@hosehead -- Sorry I don't follow. JSONStore ?

Reen
7 Feb 2008, 1:34 AM
//Have doubts about this one, but try:
Ext.EventManager.on(frame.getWindow(),'beforeunload', postHandler );
This one works quiet well. Thanks for the help and this nice extension.

svdb
8 Feb 2008, 2:47 PM
Hi,
First, thanks a bunch for creating this handy component. Much much better than messing with the DOM to add iFrames to Panels.

I searched this thread for "split" and "splitbar" but couldn't find any post relevant to the problem I'm facing. Then I searched the whole forum and found only a couple of very old posts, but none of the suggested solutions worked for me.

My problem is about ManagedIframePanels in a border layout with splitters.
Actually I have 2 layouts, one is contained in the other to create a T shaped layout made of 3 panels.

Like this:


var west = new Ext.ux.ManagedIframePanel({
region:'west',
title:'Goolge',
defaultSrc:'http://www.google.com',
split:true,
width:500
});
var center_B = new Ext.ux.ManagedIframePanel({
region:'center',
title:'ExtJS',
defaultSrc:'http://www.extjs.com'
});
var north = new Ext.ux.ManagedIframePanel({
region:'north',
title:'Yahoo',
defaultSrc:'http://www.yahoo.com',
split:true,
height:300
});
var center_A = new Ext.Panel({
region:'center',
layout:'border',
items:[west, center_B]
});
var viewport = new Ext.Viewport({
layout:'border',
items:[north, center_A]
});

The splitter between the north and center_A panel works fine both in IE6 and FF2.

The spliiter between the west and center_B panel works fine in IE6, but has a weird behaviour in FF2.

I thought it'd be pretty simple to assemble panels this way. I didn't expect FF to misbehave.
I tried the same example but using simple panels with contenEl pointing to divs with iframes: same result. It's really the iFrames causing this in FF.

Is there any known workaround for this?

hendricd
8 Feb 2008, 3:47 PM
has a weird behaviour in FF2...not obvious yet. ;)

You have a couple of options to play with.

MIF/P both assert a className for the iframe being managed : 'x-managed-iframe'

You could tweak the CSS as needed:
{
.x-managed-iframe {z-index:1900;}

}

Some observations:
SplitBar zindex: 20002
Layout Splitbar zindex: 3

or panel.getFrame().setStyle({zindex:???, opacity:????});

svdb
8 Feb 2008, 4:32 PM
Thanks for your response.

Now I've set the 'x-managed-iframe' z-index to 1 and the spliiter's z-index to 4000.
Checking with FireBug I can see the styles being applied to these values.

I still see the same problem: when dragging the splitter, it stops moving when hitting the border between the two panels, while the mouse moves further (see screen capture).
When I release the mouse button, the grey splitter bar suddenly apears under the mouse and follows it until I right-click.

More hints?

Thx,
SV

Edit: Actually, when I add padding to x-panel-body, I can move the splitbar until over the padding area, then the splitbar stops moving when hitting the iFrame. How much higher does the zindex have to be? /:)

hendricd
8 Feb 2008, 6:06 PM
any min/maxWidth specified anywhere?

svdb
9 Feb 2008, 2:28 AM
Nope, the code I posted is exactly that what I used for testing and for the screen capture.
I wonder if I should post this on a more general thread as it seems to me now that this problem is not MIF specific. I can reproduce it using Ext Panels with manually embedded iFrames.

xor
12 Feb 2008, 3:44 AM
There is a little bug in ManagedIFrame._renderHook method. Curly braces for function body should be escaped in String.format call.

return this.writeScript( String.format('(function(){{parent.Ext.get("{0}")._windowContext={1};}})();'
,this.dom.id,(Ext.isIE?'window':'{eval:function(s){return eval(s);}}')))
&& this.domWritable();

hendricd
12 Feb 2008, 4:20 AM
@xor -- Is there a specific browser and/or replacement value pattern where this is an issue?

xor
12 Feb 2008, 7:09 AM
I had problems in FF, but I think it should behave like this in any browser. String.format() uses curly braces to indicate places for arguments substitution. How will it know where you meant to place argument, and where it should be a part of target string? Usually you should use double braces - {{ and }}.

hendricd
12 Feb 2008, 7:12 AM
I believe, format's regexp pattern covers it:


/\{(\d+)\}/g

but I'll see if I can break it. ;)

Did FF throw an actual error at you?

xor
12 Feb 2008, 7:27 AM
Yes. Kind of "(function()")._windowContext= ... blah-blah". Note that it ate all the content starting at first brace of body and ending at {0}.

hendricd
12 Feb 2008, 8:00 AM
Lets just "nip this in the bud":



return this.writeScript('(function(){parent.Ext.get("'+
this.dom.id+
'")._windowContext='+
(Ext.isIE?'window':'{eval:function(s){return eval(s);}}')+
';})();') && this.domWritable();

This will be committed for release 1.0.

dsorre
12 Feb 2008, 8:42 AM
hendricd -

This is a really great ux and I've been using your managed iframe for a little bit now with windows. Basically if there is a grid or dataview, etc onclick it opens a window with a managediframe inside which loads external content. THis works great, however I am running into one issue, which I know can be avoided, but I haven't figured it out so far...

My external code file in the window popup may have a grid on it and at this point I always have to load the entire ext library, etc again which is really taking a toll on the load times.

I saw your new demo and tried it out, however it's working with panels and tabs and I wouldn't know where to start to get it to work with my windows.

Is there a quick example or even just some pointers you could give me?

I'd greatly appreciate any help.

stever
12 Feb 2008, 9:01 AM
Edit: Actually, when I add padding to x-panel-body, I can move the splitbar until over the padding area, then the splitbar stops moving when hitting the iFrame. How much higher does the zindex have to be? /:)

This is not a z-index issue. The mouse move events are now flowing into the DOM of the iframe and that document does not know that you were doing a drag, so the drag stops. If you move it real slow, it will likely work because the events will be dropping into the div of the splitter.

For testing sake, put up a window and drag it via the titlebar (both quickly and slowly). I think that will show the effect a bit easier. You will be able to move the window only while the mouse stays inside the greyed out window as you move. Move faster than the redrawing/positioning, and the whole thing will stop. The iframe would have to do some coordination with the parent to know when to bubble the events out of its document and into parents.

This is quite an important issue when using Ext and any iframe on the page.

stever
12 Feb 2008, 9:08 AM
Actually, there might be a simpler fix -- the MIP could cover the iframe with a div while the parent has a drag event in progress, and removing it when the drag stops. This would prevent the "blackhole effect" of the iframe. The mouse events would flow to the div (with a higher z-index than the iframe), which would bubble it up to the parent's dom to the event manager, etc.

hendricd
12 Feb 2008, 9:35 AM
@dsorre -- I'll add a Ext.Window example to current sample shortly, but in general the process of Ext'izing an iframe's window context is exactly the same whether rendered in a standalone, tabbed, or Windowed fashion.

Load (cache) all the Ext files first, then apply them to the iframes document when fully loaded.

That means your embedded page markup will look different than the way it does today(leaner). It will have no Ext script/style tags. And you must apply your startup code (myApp.js) after the remote page has been Ext'ized, otherwise all references to Ext.* will fail. (Study the /examples/miframe/inline.html for an idea of what your new embedded page will look like.)

Looking at the source of adviframe.js shows the entire process and is fairly well documented with comments.

dsorre
12 Feb 2008, 10:52 AM
hendricd -

Thanks for your super fast response!

I'll definately am eager to see an example for a window implementation.

Looking at your response, does that mean I simply can't use any Ext calls in the external file's script block? For example I have a gridbuilder.js script that I call from the script tags on a given page and I would need to be able to call it from within the IFrame as well.

It would just be great to have the Ext libraries loaded from cache and not all over again, if that makes sense.

Something I did note when trying to load my ext files with your ModuleManager instead of simple including them in the header:

This is how I'm doing the load now:


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

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

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

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

});

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

Ext.onReady(function(){

Ext.require('../Javascript/miframe','../Javascript/GridBuilder');
});


and my gridbuilder looks something like this:


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,
autoWidth : true,
frame : true,
loadMask : {msg: ''},
title : (config.Title) ? config.Title:'New Grid',
enableColumnHide : false,
enableHdMenu : false,
bbar : paging,
stripeRows : true
});

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


I used to be able to do something like GridBuilder.gridCreate(configs in here); But now if I don't do the include and try using the load it actually gives me an error saying that GridBuilder doesn't exist...

any idea? Most likely I'm not quite understanding right what is happening or should be happening, but I'd really like to :)

Thanks again.

DigitalSkyline
12 Feb 2008, 11:14 AM
Actually, there might be a simpler fix -- the MIP could cover the iframe with a div while the parent has a drag event in progress, and removing it when the drag stops. This would prevent the "blackhole effect" of the iframe. The mouse events would flow to the div (with a higher z-index than the iframe), which would bubble it up to the parent's dom to the event manager, etc.

correctamundo!

So if you're using iframes, you could probably do something like :
(global?)
beforedrag : fn(){ Ext.get('div.x-managed-iframe').mask(); }
afterdrag : fn(){ Ext.get('div.x-managed-iframe').unmask(); }

hendricd
12 Feb 2008, 11:28 AM
@dsorre -- Your Gridbuilder.js is just fine. But you are dynamically loading it into the main-page window/Ext context, not your iframe. The main page has it's own ModuleManager instance simply to demonstrate the .require() syntax that can be used to load anything.

Looking closer at the adviframe.js script.

The Demo object contains its own instance of ux.ModuleManager. It caches (without evaling them) the necessary Ext resources and (in your case) a startup script (Gridbuilder.js). I've ammended the .requires call to show the point.



return {
init : function(){



//Demo Tree init removed for clarity


//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 = '../Javascript/'; //your structure will vary of course

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

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

At this point, all the Ext libs/css have been synchronously cached by : Demo.handlers.cacheModule.

Now, load your MIFP with the embedded page, and apply all your cached libs to it once its DOM (domready) is available:

/*
Ext'ize the frame, inject CSS rules from gathered style-sheets, and
eval the collected code modules into the frame's window context.
*/
var 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;

//now loop through each cached module and eval it into embedded window
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.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);

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

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

myMIFP.on('domready', transform );
myMIFP.setSrc('someSameDomainUrl.html');

Append this to your gridbuilder.js:


Ext.isReady = true; //tell EventManager the DOM is already in place.
Ext.onReady(function(){

GridBuilder.gridCreate(configs in here);
......

});
...and your script takes over..

svdb
12 Feb 2008, 11:44 AM
correctamundo!

So if you're using iframes, you could probably do something like :
(global?)
beforedrag : fn(){ Ext.get('div.x-managed-iframe').mask(); }
afterdrag : fn(){ Ext.get('div.x-managed-iframe').unmask(); }

OK, now I'm confused. I thought MIF would "manage" iframe, not just embed it (that I'm able to do myself). The pages in my iframes are potentially cross domain pages pulled from other apps.

@stever : slow or fast, speed doesn't change anything, not on my browsers anyway. There's clearly a difference when dragging the splitter over the panel's title bar (works, of course) and dragging it over the iframe's area (block dragging as previously described).

hendricd
12 Feb 2008, 12:16 PM
Ha! I guess 'managed' means guessing what other DOM Element has begun a drag operation and when. :)) Think I'm gonna drop 'managed' and change it to 'ClairvoyantIframe'. ;)

IFrame shims just introduce another z-index problem..

MIF/MIFP both have a built-in loadMask support already.

I'll try out few style rules on the current mask and see if I can hook something into a global event somewhere.

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