Hybrid View

  1. #1
    Sencha User
    Join Date
    Feb 2012
    Location
    New York
    Posts
    23
    Vote Rating
    0
    nd_sencha is on a distinguished road

      0  

    Question Answered: iframes

    Answered: iframes


    Is it possible to have an iframe on the page using sencha touch?


  2. #2
    Sencha User
    Join Date
    Feb 2012
    Location
    New York
    Posts
    23
    Vote Rating
    0
    nd_sencha is on a distinguished road

      0  

    Default


    This doesn't make the frame scrollable, am I missing something?



    Code:
    items : {				xtype: 'panel',
    				scroll: 'both',
    				items: [{
    				id: 'iframe',
    				scroll: "vertical",
    				layout: 'vbox',
    				width: '100%',
    				height: '100%',
    				html: ['<div style="width:100%; position:fixed; background-color:Transparent;"></div>',
    						  '<iframe width="100%" height="100%" src="http://www.link.com"></iframe>']
    						}]
    			},

  3. #3
    Sencha - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,365
    Answers
    60
    Vote Rating
    33
    arthurakay is a jewel in the rough arthurakay is a jewel in the rough arthurakay is a jewel in the rough

      0  

    Default


    There's no reason you can't have an IFRAME... Sencha Touch is simply rendering elements to the DOM, just like any other HTML file.

    As for why the IFRAME in your example isn't scrollable... the URL for your IFRAME doesn't have any content, so maybe you just need to link to a page that has content taller/wider than the IFRAME itself.
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group

  4. #4
    Sencha User
    Join Date
    Feb 2012
    Location
    New York
    Posts
    23
    Vote Rating
    0
    nd_sencha is on a distinguished road

      0  

    Default


    The link i used here was just a dummy link. The link which I would like to use in the iframe has content in it.

    This code gives output, but it even has a scroll bar inside, please look at the image.

    iframe.jpg

  5. #5
    Sencha - Services Team arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,365
    Answers
    60
    Vote Rating
    33
    arthurakay is a jewel in the rough arthurakay is a jewel in the rough arthurakay is a jewel in the rough

      0  

    Default


    PHP Code:
    new Ext.Application({
        
    name 'App',

        
    launch : function () {
            new 
    Ext.Panel({
                
    fullscreen true,
                
    layout     'fit',
                
    items      : [
                    {
                        
    xtype  'panel',
                        
    scroll 'vertical',
                        
    layout 'fit',
                        
    html   '<iframe width="100%" height="100%" src="http://www.test.com"></iframe>'
                    
    }
                ]
            });
        }

    }); 
    This seems to work fine for me, using ST 1.1.1
    Arthur Kay
    Developer Relations Manager, Sencha Inc.

    Twitter | Sencha Chicago User Group

  6. #6
    Sencha User
    Join Date
    Feb 2012
    Location
    New York
    Posts
    23
    Vote Rating
    0
    nd_sencha is on a distinguished road

      0  

    Default


    Yes, I'm using ST 1.1, I still can't get rid of the scroll bar, it is showing the output but with the scroll bar, is it supposed to be there? I have no idea why scroll: 'vertical', not working inside the items



    Code:
    Ext.setup({
            fullscreen: true,
            glossOnIcon: false,
            scroll: "vertical",
            title: "title",
            onReady: function() {
    
    
             new Ext.Panel({
                fullscreen : true,
                scroll : "vertical",
    
    items: [{
                xtype: 'panel',
                scroll: 'vertical',
                items: [{
                id: 'iframe',
                           layout : 'fit', 
                width: '100%',
                height: '100%',
                html: ['<div style="width:100%; position:fixed; background-color:Transparent;"></div>',
                  '<iframe width="100%" height="100%" src="http://www.dummylink.com/abc.php"></iframe>']
                    }]
            }],
    
    });
          }
    });

Thread Participants: 2

Tags for this Thread