1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    2
    Vote Rating
    0
    The_KIller36 is on a distinguished road

      0  

    Question Ext.Panel showing content webpages using iFrames

    Ext.Panel showing content webpages using iFrames


    Hi,

    I'm building an app that shows the contents of webpages in a tabpanel. When I'm searching the internet, I found that I should use iFrames. I tried it but the problem is that the iFrame can not be scrolled. I found out that the panel is scrolling, when you put scrollable to true, but this has no effect on the iFrame. Any suggestions to solve this would be nice!

    (btw I also tried to use iscroll, but also this plugin cannot scroll an iframe.)

    Here is a panel that is added to a tabpanel.

    Code:
    Ext.create('Ext.Panel', {
              extend: 'Ext.Panel', 
              title: '**website name**', 
              id: 'website id', 
              html: '<iframe scrolling="yes" src="http://www.google.com"></iframe>', 
              config: { 
                        height: screen.height, 
                        width: screen.width, 
                        scrollable: false
               }
    });

  2. #2
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    Unfortunately there is no way to do that using the frame work.

    You could somewhat get around it for iOS5 only devices using this: http://johanbrook.com/browsers/nativ...rolling-ios-5/
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  3. #3
    Sencha User
    Join Date
    Sep 2011
    Posts
    2
    Vote Rating
    0
    The_KIller36 is on a distinguished road

      0  

    Default


    ah thats a problem, but thanks anyway for the quick response!

  4. #4
    Sencha User
    Join Date
    Apr 2011
    Posts
    212
    Vote Rating
    3
    bweiler is on a distinguished road

      0  

    Default


    I'm able to dynamically set and scroll iframes using PR3. I was very surprised I could do this given the other iframe posts, but it seems to work fine.

    Here's my code:
    Code:
    Ext.define('MyApp.view.Contact', {
        extend: 'Ext.Container',
        
        config: {
            layout: 'card',
            title: 'Comment',
            iconCls: 'reply'
        }
    });
    Here's how I set the html after creating an instance of the Contact class:

    view.setHtml(iframe);

    The page takes a bit to load and there is no automatic loading mask, so I will have to set the loading mask manually.

    NOTE: The above works fine using Safari desktop. I have not yet tested this on an iPad.

  5. #5
    Sencha User
    Join Date
    Apr 2011
    Posts
    212
    Vote Rating
    3
    bweiler is on a distinguished road

      0  

    Default


    I did not read the original post carefully enough. I have panel scrolling working with an iframe as the panel content and that seems to be sufficient for my needs. I just need to be able to see the whole iframe page.

Thread Participants: 2

Tags for this Thread