ChildBrowser / open external url without leaving app?

[mike lebowski]

I am developing my first sencha touch app. One of my requirements is to have some links in the sencha app that point to external urls, and we want the external docs to open in a window that is still part of the current app (as opposed to delegating to Safari). Many apps that I have used as a user do this successfully, so I know it can be done. Typically, the link is clearly in the app, but when the user clicks on it, they are presented the content in a separate window that has a "Done" or "Close" action, they can continue to navigate within the document that is displayed, or hit the Done/Close and return to where they were in the app.
However, I am not sure if those apps were developed with Sencha. When I googled for "external url" etc, I found some threads about using an iframe, but I don't think this leads to the effect I am looking for, as those threads all discussed the problem with scrolling within the iframe.
Then I found some threads that mentioned a Phonegap plugin called ChildBrowser. Reading up on that plugin, it seems like that is probably what I have experienced as a user, and would like to build into my app.
So I have several related questions:
1) Is the phonegap ChildBrower plugin the BEST way to do what I am trying to do? Or is there a Sencha Touch specific solution that I am missing?
2) Does Sencha Touch 2.0 plan to provide something that has not yet been released?
3) If phonegap ChildBrowser is the way to go, this basically pushes me in the direction of using Phonegap and CT 2.0 which seems unfortunate as I was hoping to use the native packager from CT and avoid the additional Phonegap layer. My only targets are android and ios.

Opinions appreciated?

[rdougan]

You will need to use a plugin in PhoneGap, something like the ChildBrowser. There is no other way to do this otherwise.

Sencha does have the native packager in the SDK Tools 2 beta, but there is no external browser support at this time.

[mike lebowski]

thanks for the quick reply.

[guile291912]

I tryed to do that with an iframe in a card, and it worked pretty well.
The only thing that I am missing, is to successfully resize the iframe.
It resizes fine on chrome, but not on my ipad.

The div id mask is used to capture the touch event and scroll.
This is still some WIP as I stoped working on it when the resizing was not working on my Ipad.



Ext.getCmp('detail').setHtml('<div style="position:relative;">
<iframe id="iframe" src="'+note.get('link')+'" width="100%" height="1000px">Your device does not support iframes.</iframe>
<div id="mask" style="position:absolute; top:0; left:0;height:768px;width:1024px"></div></div>');
var x=document.getElementById('iframe'); var m=document.getElementById('mask');
var y= (x.contentWindow || x.contentDocument);
x.onload = function(){
var x=document.getElementById('iframe');
//alert(x.style.height );
var m=document.getElementById('mask');
var y= (x.contentWindow || x.contentDocument);
if (y.document) y=y.document;
var h = y.body.offsetHeight+"px";
var w = y.body.offsetWidth+"px";
x.style.height = h;
//x.width = w;
m.style.height = h;
//alert(x.style.height );
Ext.getCmp('detail').height = y.body.offsetHeight ; Ext.getCmp('detail').doLayout();
};

[kramprabhu]

Hi

Can you guide me how to use PhoneGap Plugin in Sencha Touch. I am trying to use ChildBrowser plugin.

I followed some .. but getting error like this "TypeError: Object #<Object> has no method 'exec'"

Also please point me where I can get stable version PhoneGap.js and Plugin JS.

Regards
-Ram

[ashishpok]

Check the video tutorials on here (http://vimeo.com/bricemason/videos). Pretty good stuff !!!