Ext.ux.ManagedIframe 4.0 alpha2 for Ext 4.x

[franck87]

Hello Scorpie,
I have been working on the D&D for iframe for a while now which I needed for my app: WIDGaT
The only solution I found was to register a script in the dom of the document in the frame which relay the mouse events to the top window (might cause cross domain problems).
Here is a link to the script I'm using:
https://github.com/arc-teesside/WIDGaT/blob/master/temp/TimerTemplate/scripts/editorlib.js
This only works on Firefox and Chrome so far, IE uses a different way of firing events (looking into it).
It's the first time I'm using ExtJS and it's a pretty big app so the code is most definitely not optimised but I'm doing exactly what you are looking for so keep looking you'll probably find what you need
Franck.

[Scorpie]

Thanks Frank!

Hm, I have taken a different approach yet I am stuck.

You can see what I tried to do @ http://supranet.dyndns.org/VAM/viewport.html

Basically its a viewport with a center panel thats loaded with MIF4.0A2, in which a HTML page containing a fabricjs instance is loaded.

You can try for yourself, the drag&drop does 'work', however its buggy as hell. I tried different DropTargets on different levels, to no avail.

Any tips are welcome

[franck87]

Hi Scorpie,

I am not familiar with fabricjs but according to what I saw in your app, the drag stops as soon as you enter the iframe; I think this is because you don't forward the mouse events to the top document. I only tried it on Chrome but I think you need to register mouse listeners on the document within the iframe to relay at least the following events:
- document.mousemove
- document.mouseup
to the top document (top.document).

If you look at my code, the coordinates I send to the top document include the width and height of the borders of the container of the MIFrame component (hardcoded) to avoid a "jump" on the thumbnail when dragging.

Hope it helps,

F.

[Scorpie]

Thanks Franck, i`m diving into it.

[Scorpie]

So..............i`ve managed to get it working for a great deal. The only thing I cant wrap my head around now is the fact that there is no onNodeDrop event being fired whenever the node from the Dataview is dropped on the canvas. I dont know if this is fabricjs related, will check it out.

Another frustrating bug is the fact that my Firefox & Firebug combo crashes everytime I do a refresh on my current viewport. Something that I need to fix

Anyway, I`ve updated the code @ the URL I mentioned, so if anybody sees why my nodedrop event doesnt get fired, please do tell

[nicholas.hamming]

Hi Doug,

Thanks for all your hard work! I took a look at the 2.1.5 version of getFrameDocument(), and it looks like this:

   getFrameDocument : function() {
       var win = this.getWindow(), doc = null;
       try {
           doc = (Ext.isIE && win ? win.document : null)
                   || this.dom.contentDocument
                   || window.frames[this.dom.name].document || null;
       } catch (gdEx) {
           
           ELD.clearDocumentCache && ELD.clearDocumentCache(this.id);
           return false; // signifies probable access restriction
       }
       doc = (doc && Ext.isFunction(ELD.getDocument)) ? ELD.getDocument(doc,true) : doc;
       
       return doc;
   }

The alpha2 version is this:

   getFrameDocument : function(assertAccess) {
      var win = this.getWindow(), doc = null;
      try {
          doc =  win.contentDocument || this.dom.contentDocument || window.frames[this.dom.name].document ||  win.document;
      } catch (gdEx) {
          doc = false; // signifies probable access restriction
      }
      return Ext.isDocument(doc, assertAccess !== false) ? doc : false;
  }

It looks like the Ext.isIE shortcut in the 2.1.5 version is removed from the alpha2 version, and I believe this is causing issues with running in IE in Quirks mode.

What is happening for me is that the parent document, not the iframes document, is being returned from the

window.frames[this.dom.name].document

call. The

win.document

property has the correct reference to the iframe document, but in the alpha2 code, that code isn't reached.

Is this an intentional decision that you made?

Cheers,
Nicholas

[smcguire36]

Does this MIF work with the ExtJS 4.1 RC3?

[kutiarul]

Hi,

we are getting error as (a.replace is not a function), when try to use the MI A2 with Extjs 4.1 final release.

Please let us know when we could get the latest version of MI, which could work with Extjs 4.1 code line.

Thanks in advance.

Regards,
Soosai

[dady1981]

Hi guys, i've a big problem (maybe it's only because my newbie level ).
I've a simple function wich create a window with a miframe inside; inside that i open a binary stream to see a pdf document.
If i open the page in chrome everything goes ok, but if i use ie and ff, the iframe content is resized on his height; it happen also if a open a webpage instead a pdf stream...
Behind you can see both my code and problem, maybe someone can help me.
Thanks in advice

Davide

function mostraWin(){
                if(!Ext.getCmp('finestraPdf')){
                Ext.create('Ext.window.Window', ({
                    id: 'finestraPdf',
                    constrain: true,
                    height: 600, 
                    width: 1000, 
                    title: 'PDF viewer', 
                    draggable: false,
                    resizable: false,
                    items: {
                          xtype :'miframe',
                        title: 'PDF', 
                        defaultSrc :'pdf/ritornaPdf.action'
                    }
                })).show()
            }
        };

Cattura.jpg

[hendricd]

@dady1981 --

Start with:

layout : 'fit'

in your Window !