Results 1 to 10 of 12

Thread: iframes

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Feb 2012
    Location
    New York
    Posts
    23
    Vote Rating
    0
      0  

    Question 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
      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 User arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,516
    Answers
    99
    Vote Rating
    77
      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.

  4. #4
    Sencha User
    Join Date
    Feb 2012
    Location
    New York
    Posts
    23
    Vote Rating
    0
      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 User arthurakay's Avatar
    Join Date
    Sep 2008
    Location
    Antioch, IL
    Posts
    1,516
    Answers
    99
    Vote Rating
    77
      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

  6. #6
    Sencha User
    Join Date
    Feb 2012
    Location
    New York
    Posts
    23
    Vote Rating
    0
      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>']
                    }]
            }],
    
    });
          }
    });

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •