View Full Version : Sencha view port shifting up when web views size changes

7 Sep 2011, 4:47 AM
I am new to sencha applications. I have just started the Sencha MVC application using Phone Gap. I was just playing around and used "Native controls" plugin in phone gap plugins. This plugin just adds a Tabbar at the bottom of the window. For this it reduces the height of the UIWebView by 49 pixel. This is the WebView where sencha viewPort is rendered. Everything works fine but as soon as you tap in this WebView the whole view port shifts up.

I reproduce this problem many times. So basically when sencha renders its components in a particular size of UIWebView everything works fine but if you reduces the size of this webview sencha components don't understand they have to resize accordingly. Instead of this the whole document shifts up.

Is this a common problem or there is any property which stops this behavior which i am missing??

7 Sep 2011, 7:59 AM
How/why are you changing the UIWebView size? Usually, a mobile device has 2 sizes, one for portrait and one for landscape so things get resized on orientation. Now when I develop in Chrome and resize the webkit inspector, I get scroll bars but things usually realign.

You may want to try and listen for the size change and call doLayout. It will relay things out.

8 Sep 2011, 2:32 AM
Hi mitchellsimoens,
I am using Phone gap and went through the "A Sencha Touch MVC Application with PhoneGap (http://www.sencha.com/learn/a-sencha-touch-mvc-application-with-phonegap/)" tutorial.
Phone Gap creates a application window, UIViewController and inside this it creates a UIWebView which takes the whole screen area. This webView is used to render the sencha elements, initially it renders perfectly.
Now I found PhoneGap plugin "NativeControls (https://github.com/phonegap/phonegap-plugins/tree/master/iPhone/NativeControls)" and decided to integrate into the the MVC tutorial application for Contact List. What I did is when showing the contact list I also call this plugin to show a tab bar at the bottom of the screen. This native call resizes the UIWebView and add the tabBar in the WebView's superView. You can find the sample application here (https://bitbucket.org/tarun_sharma/phonegap-plugin-test/downloads).(XCode 4.0).
I am also listening the windowResize event and doing a doLayout on the viewport but when window is resized in the native code this event's call back is not called.

I have only tested this in my iPhone application and one can argue that why you need a native control if you are using sencha, this sample application may not justify the use of native controls but certainly in complex applications need may arise to do these kind of things where you actually need to introduce other native elements and reduce the size of webview.

I am a native iPhone application developer and currently analyzing the cross platform approaches. I may be missing a very basic point which can avoid this behavior, if so pardon me but i appreciate if i can get an answer.