3

I want to achieve the following stuff : I have a component in my app, and I want his rendering to be performed inside an IFrame.

this.button = Ext.create({
   xtype: 'button',
   text: 'Button',
   handler: function() {
      console.log('click', this, this.getEl());
   },
   renderTo: this.getIframeBody()
});

This code is a test in order to build a more complex app but this simple test fail. The handler is never associated, it seems that the event is never watched.

Any idea on why this doesn't work?

I also tried to directly attach the event to the el:

this.button.getEl().on('click', function() {console.log('click here!')})

But it doesn't work.

Any idea on how to make possible to manage a Component in a document context and is rendering (Element) in another document context (the iframe's one) and especially how not to break events between Component and Element?

I suspect that this is because ExtJs change how the event are manage globally to support Touch Events but, after digging into the code, I was not able to understand where the problem is...

Psycho
  • 381
  • 1
  • 17
  • Inside iframe, everything works a little different, and the `Ext` namespace is not available. I tried the same, failed, and was told that it's not possible out of the box. One would have to load a full new ExtJS app into the iframe, and write some kind of message/event passing between the two. – Alexander May 31 '16 at 07:33
  • 1
    It's because the iframe is a separate document and Javascript context; there just isn't that much communication between them. As a general rule, if you're using an iframe, you're probably doing it wrong. – Robert Watkins May 31 '16 at 13:27
  • @Alexander, thanks. Thats also the kind of answer that I receive... However, I'm able to render a Ext Component into the IFrame easily with the `renderTo` config and I'm able to listen events when I made listeners to the el manually... so it should be possible to do something more than a new app "just" for that ! – Psycho Jun 03 '16 at 08:32
  • @RobertWatkins, if you find me a way to render a web page in a different CSS context of your actual page and be able to change the size of the rendering Page to activate CSS mediaQuery rules, I will be glad not to use an iframe – Psycho Jun 03 '16 at 08:33
  • Yep, you're doing it wrong - you're trying to use an iframe instead of changing your CSS. You can render HTML into an iframe, which is why you can create your component - but if you want that HTML to have behaviour, you need to render the javascript as well. Or at least the script tag to fetch it for you. – Robert Watkins Jun 04 '16 at 10:58
  • How can I dynamically change mediaQueries rules? – Psycho Jun 06 '16 at 07:54

0 Answers0