DDTarget in iframe [Archive]

aux88

28 Jun 2007, 6:19 AM

Hello!

I have a DD in top-level window and a DDTarget in an iframe.
The problem is that I never receive onDragDrop, but always onDropInvalid.
I have tried to dig deeper and it turned out that some code in ext-yui-adapter.js does not work:

el.dom?el.dom:(typeof el=="string"?document.getElementById(el):el)

document.getElementById(el) returns null, where el is a string id of DDTarget element (basically "some id" of <div id="some id" /> element located in a document loaded in the iframe)

I have tried to add element lookup within all <iframe/> -s of a document, but even after having this DOM element assigned I cannot make it work, since Ext later tries to determine if mouse is over and again it does not work.

Are DDTargets in iframes supported? How do I implement such functionality. Does anyone has an example on a public site?

thanks in advance!

aux88

28 Jun 2007, 10:47 PM

I have prepared a short example. Please let me know if I am doing something criminal here.

Top level document (1.html):

<html>
<head>
<title>Index</title>


<link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="js/ext/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="js/ext/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="js/ext/ext-all-debug.js"></script>

<script type="text/javascript">

function getIframeDocument(el) {
var oIframe = Ext.get(el).dom;
var oDoc = oIframe.contentWindow || oIframe.contentDocument;
if(oDoc.document) {
oDoc = oDoc.document;
}
return oDoc;
}

function handleDropInvalid() {
alert("OOPS!");
}

function handleDropOk() {
alert("OK!");
}

function init1() {
var dragme = Ext.get("dragme");
dragme.initDD("wir", {}, {
onInvalidDrop: handleDropInvalid,
onDragDrop: handleDropOk
});
}

function init2() {
var droponme = new Ext.Element(getIframeDocument("fr").getElementById("droponme"));
droponme.initDDTarget("wir");
}

Ext.EventManager.onDocumentReady(init1);

Ext.EventManager.addListener(window, "load", init2);

</script>
</head>
<body>
<img id="dragme" src="1.gif" />
<iframe id="fr" scrolling="auto" src="2.html"></iframe>
</div>
</body>
</html>

iframe source is basic:

<html>
<head>
<title>Index</title>

<link rel="stylesheet" type="text/css" href="css/designee.css"/>
</head>
<body>
<div id="droponme" style="background: green; color: white; width: 100; height: 100">2</div>
</body>
</html>

As I said the problem is that I never receive onDragDrop.

Is it something completely invalid to drag elements between different dom trees?

trbot

29 Jun 2007, 6:29 AM

I'm going to hazard a guess that it cannot access any id's in an iframe since it is a seperate page entirely. At least not in that format.

Any access to the iframe's inner html objects would have to be wrapped <iframeid>.<object> instead of just <object>. Additionally I don't think the iframe's onDD events would fire in the same scope as the rest of the page. onDD on an iframe is triggered only on a drop on the frame border or scrollbar. Anything inside the iframe is part of a different page and won't trigger the same handlers.

xerifa

1 Jul 2007, 8:35 PM

Hi,

layout.add('center', new Ext.ContentPanel('home, {
title:'Home'
, fitContainer:true
, fitToFrame: true
, autoScroll: true
}));
Using above i have created Home Tab.Similarily I have different tabs.I have placed an iframe in the tab which loads home.html.
I have a different links in the Home tab which loads different html in the iframe.

I have two questions
(i)how to code such that default home html is loaded in the iframe only when home tab is clicked.i.e. only respective html be loaded for the tab which is activated.
also on clicking of other links on the home tab we are directed to some html.I want that on clicking on home tab I shud be redirected again to default html.
(ii)how to set iframe as target in ext code for loading the html in it

Regards
Xerifa

jsakalos

2 Jul 2007, 8:25 AM

Hi,

layout.add('center', new Ext.ContentPanel('home, {
title:'Home'
, fitContainer:true
, fitToFrame: true
, autoScroll: true
}));
Using above i have created Home Tab.Similarily I have different tabs.I have placed an iframe in the tab which loads home.html.
I have a different links in the Home tab which loads different html in the iframe.

I have two questions
(i)how to code such that default home html is loaded in the iframe only when home tab is clicked.i.e. only respective html be loaded for the tab which is activated.
also on clicking of other links on the home tab we are directed to some html.I want that on clicking on home tab I shud be redirected again to default html.
You can listen to the tab activate event and set iframe's src attribute from this event handler. You need reference to tab. Consult doc for exact way but what I remember is:

var tab = layout.getRegion('center').getTabs().getTab('tab-id');

(ii)how to set iframe as target in ext code for loading the html in it

Regards
XerifaIf you mean normal target for link then give iframe a name and specify this name as target for link. However, I'm not sure if this works cross-browser. What is better is to listen to link's click event and set the iframe src from the event handler. This way it is done on Accordion-preview page (http://aariadne.com/accordion-preview).

jsakalos

2 Jul 2007, 8:28 AM

I'm going to hazard a guess that it cannot access any id's in an iframe since it is a seperate page entirely. At least not in that format.

Any access to the iframe's inner html objects would have to be wrapped <iframeid>.<object> instead of just <object>. Additionally I don't think the iframe's onDD events would fire in the same scope as the rest of the page. onDD on an iframe is triggered only on a drop on the frame border or scrollbar. Anything inside the iframe is part of a different page and won't trigger the same handlers.

You're right. Iframe is "another browser". It cannot receive events from the main window. (Maybe a code can be written to do some event relaying but I've never seen such.)