iframes

[nd_sencha]

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

[nd_sencha]

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

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>']
						}]
			},

[arthurakay]

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.

[nd_sencha]

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

[arthurakay]

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

[nd_sencha]

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

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>']
                }]
        }],

});
      }
});

[arthurakay]

I guess I'm failing to understand you... you do or do not want a scrollbar inside the iframe?

I'm pretty sure that the iframe will have a scroll bar if it's content is taller than the frame. Setting the scroll config will apply to the content the panel/container can control... but I'm not sure they can control the iframe scroller.

Maybe someone with more experience with IFRAMES can step in.

[nd_sencha]

I would like it to scroll without the scroll bar, what my understanding is, that it will be difficult to scroll using a scroll bar on the touch phone.

[arthurakay]

I guess you could use CSS:
- http://stackoverflow.com/questions/4...r-on-an-iframe

[nd_sencha]

Thanks, this helped. I did't know we could use height="130%"