PDA

View Full Version : Loading external website into panel.



c u l8er
28 May 2011, 6:07 PM
Hello,
I need to load an external website like google.com into a panel. I have tried adding an iframe into the "html:" it works in the browser but it dose not work on the iphone. For some reason the website doesn't load in the frame (just a blank screen) and when I try to scroll it starts to scroll my hole application. Even the fixed toolbar docked at the bottom of the screen. I copy pasted below the code. I have read several other topics around here that dance around a potential solution but so far none of them have worked.



ToolbarDemo.views.Communitycard = Ext.extend(Ext.Panel, {
title: "Community",
iconCls: "team",
html: '<iframe src=\"http://www.google.com\" width=\"100%\" height=\"100%\">Your device dose not support iframes.</iframe>'
});

Ext.reg('communitycard', ToolbarDemo.views.Communitycard);

Please, if know how to load an external website like google.com into a panel then please help me out. Thank you very much :)

miroamarillo
1 Jun 2011, 11:25 PM
Hi, Did you managed to solve this issue? I'm interested too!! If someone in the support can help us with it that would be great THANKS!!!! ;)

thinkadoo
2 Jun 2011, 1:34 AM
I have the same question.

I have a larger SenchaTouch app and need to load a mini site made in Dashcode into one of the panels.

How do we do this guys?

thinkadoo
2 Jun 2011, 1:42 AM
The Quirks are:

1. Not 100% width and height
2. Scrolling not yet working for the mini site


Application.views.Schoolview = Ext.extend(Ext.Panel, {
title: "School",
iconCls: "organize",
html: '<iframe src=\"BrowserSiteBasic\" width=\"100%\" height=\"100%\">Your device dose not support iframes.</iframe>',
scroll: "vertical",
dockedItems: [{
xtype: "toolbar",
title: "School",
items: [
{
text: 'Reset',
handler: function(){
console.log("you clicked the Reset button");
Application.views.mySchoolView.tab.setBadge("");
}
},
{
xtype: 'spacer'
},
{
text: 'Event',
handler: function(){
console.log("you clicked the Event button");
var schooltab = Application.views.mySchoolView.tab;
badgenumber = parseInt(schooltab.badgeText);
nextnumber = isNaN(badgenumber) ? 1 : badgenumber+1;
schooltab.setBadge(nextnumber);
}
}
]
}],
});

Ext.reg('schoolview', Application.views.Schoolview);

thinkadoo
2 Jun 2011, 3:04 AM
I Guess we will have to wait for ManageIframe to make into the SenchaTouch API

http://www.sencha.com/learn/ManageIframe:Manual:Frame_Using

thinkadoo
2 Jun 2011, 7:14 AM
Still has the margin but no longer interferes docked items...

Scrolling the IFRAME content on desktop webkit browsers.
Still no scrolling on mobile devices.


Application.views.Homeview = Ext.extend(Ext.Panel, {
title: "Home",
iconCls: "home",
layout: 'card',
items: [{
html: '<iframe src=\"http://line25.com/wp-content/uploads/2010/html5/demo/index.html\" width=\"100%\" height=\"100%\">Your device does not support iframes.</iframe>'
}],
fullscreen: true,
dockedItems: [{
xtype: "toolbar",
title: "Home",
items: [
{
text: 'Reset',
handler: function(){
console.log("you clicked the Reset button");
Application.views.myHomeView.tab.setBadge("");
}
},
{
xtype: 'spacer'
},
{
text: 'Event',
handler: function(){
console.log("you clicked the Event button");
var hometab = Application.views.myHomeView.tab;
badgenumber = parseInt(hometab.badgeText);
nextnumber = isNaN(badgenumber) ? 1 : badgenumber+1;
hometab.setBadge(nextnumber);
}
}
]
}],
});

Ext.reg('homeview', Application.views.Homeview);

anthoang
8 Jul 2011, 11:47 AM
This would be HUGE improvement if scrolling can work inside the iframe. Without the scrolling, we developers would have to redesign our webapp basically from scratch to make it work in iPad(mobile devices). Please make it possible someday... soon!!!