PDA

View Full Version : How to load external web page in Tab



hopthuden
23 Jan 2011, 12:33 AM
Hi,
Is there anyway to load an external web page in to sencha tab? I want to add Google search page to my application but don't know to do that:(. If it can please leave me some code for imitate.

http://img405.imageshack.us/img405/4553/googleintab.png

Thank you so much !

openthesky7
23 Jan 2011, 2:02 AM
In Java Script it is possible to use iframe inside div, and change "src" of this iframe dynamically. Try to do it with simply html page in Java Sctipt and if it works, place in Sencha Touch application.

Also could be possible to use google api to display results, but I assume that you have place external page into your application.

hopthuden
23 Jan 2011, 3:46 AM
I tried these code but it did not work on iPhone even if work ok on Safari or Chrome (I used PhoneGap for wrapping). Could you help me to correct them ?


new Ext.TabPanel({
fullscreen: true,
type: 'dark',
sortable: true,
items: [{
title: 'Tab 1',
html: '1',
cls: 'card1'
}, {
title: 'Tab 2',
html: '2',
cls: 'card2'
}, {
title: 'The Latest',
html: '<iframe src =\"http://www.google.com\" width=\"100%\" height=\"100%\">/iframe>',
id: 'feedTab',
iconCls: 'team',
scroll : false
}]
});

openthesky7
23 Jan 2011, 6:18 AM
I wrote a very simple example:






Ext.setup({
icon: 'icon.png',
// tabletStartupScreen: 'tablet_startup.jpg',
phoneStartupScreen: 'phone_startup.jpg',
glossOnIcon: false,

onReady: function() {

new Ext.TabPanel({
fullscreen: true,
style: 'background-color: black; color:white',
scroll: 'vertical',

items: [
{
scroll: 'vertial',
title: 'test', html: 'END<br/>',
items: [
{
// html:'<iframe src =\"http://www.google.com\" width=\"100%\" height=\"100%\"></iframe>'
html:'<iframe src =\"/a.html" width=\"100%\" height=\"100%\"></iframe>'
}

]
},
]

});

}


})



I've checked that iframe works with local address, and not work with external. On Safari (MacOS X) it works, but on iphone not.

So.. workaround could be possible if you write local servlet where content will be loaded locally from other server like proxy.

hopthuden
23 Jan 2011, 6:32 AM
Thanks openthesky7,
So is there other solution for loading external website with sencha framework or general javascript?

openthesky7
23 Jan 2011, 6:46 AM
As far as I know (with previous example) there is no way to load iframe from extertnal source. It is not a problem of Sencha Framework, but limits of iphone's Mobile Safari.

hopthuden
23 Jan 2011, 6:57 AM
Aha, thanks openthsky7 for clearing my doubts. I think I should back to objective-C for this case :)

openthesky7
24 Jan 2011, 2:19 AM
Hmm... I wonder how "google map" component works... Maybe there is some workaround for external iframe?