difference in 'development' and 'production'-version (Phonegap + Android)

[warrean]

Hi,

I have a basic LoginView.js which is the initial page. No user CSS defined for any of its components.
Next I build a production version for it (sencha app build production with sencha 2.0.0 beta 3),
then deploy it using phonegap 2.0.0.
(no extra config other than the one specified in the Getting Started guide)

When I test it on both android devices and emulators (4.0.3 and 2.3) it loads up fine and the page renders properly (both landscape and portrait startup). When changed to landscape orientation the fieldset is too much down (no sign in button visible), and when changed back the View takes up only 55% of the screen (not zoomed, component-size is same) and the rest is the default sencha blue background.

However sometimes there's no problem (??), and I've been searching for 2 days and can't find any consistency. The only thing that's consistent is that this only happens with the production version, never with the non-minifed.

LoginView.js:

Ext.define("AndroidOrient.view.Main", {
    extend: 'Ext.Container',
    xtype: 'loginView',
    id: 'loginView',
    requires: [
        'Ext.form.FieldSet',
        'Ext.field.Text',
        'Ext.field.Password',
        'Ext.Label',
        'Ext.Img'
    ],


    config: {
        layout: 'fit',
        items: [
            {
                xtype: 'container',
                layout: 'vbox',
                items: [
                    {
                        xtype: 'container',
                        centered: true,
                        layout: 'vbox',
                        items: [
                            {
                                xtype : 'label',
                                id: 'versionLabel',
                                tpl: new Ext.XTemplate (
                                    '<tpl if="version">',
                                    'version: {version}',
                                    '</tpl>'
                                )
                            },
                            {
                                xtype: 'fieldset',
                                id: 'loginFieldSet',
                                scrollable: false,
                                items: [
                                    {
                                        xtype: 'textfield',
                                        id: 'usernameField',
                                        label: 'User',
                                        autoCapitalize: false
                                    },
                                    {
                                        xtype: 'passwordfield',
                                        id: 'passwordField',
                                        itemId: 'mypasswordfield',
                                        label: 'Pass'
                                    }
                                ]
                            },
                            {
                                xtype: 'button',
                                itemId: '',
                                text: 'Sign In',
                                action: 'signIn'
                            }
                        ]
                    },                    
                    {
                        xtype: 'container',
                        html: 'fit layout',
                        flex: 1
                    }
                ]
            }
        ],
        masked: {
            xtype: 'loadmask',
            message: 'Signing in..',
            hidden: true,
            indicator: true
        }
    }
});

[mitchellsimoens]

First thing I see is it looks like you are overnesting a few levels.

[warrean]

Thanks for the reply, here are the steps I've taken so far:
- removed all the nesting and added layout: 'vbox', 'centered: true, fullscreen: true'
- used a layout: { type: 'vbox', align: 'center', pack: 'center' }, fullscreen: true

I think the problem still lays between development and production version, because when orientation changes to portrait I can see:
- Development: layout looks wrong (55% of the screen taken by the container) and right after corrects to proper layout (100% of screen)
- Production: same but it doesn't correct to 100%

So the the code right now of Main.js:

Ext.define("AndroidOrient.view.Main", {    extend: 'Ext.Container',
    xtype: 'loginView',
    id: 'loginView',
    requires: [
        'Ext.form.FieldSet',
        'Ext.field.Text',
        'Ext.field.Password',
        'Ext.Label',
        'Ext.Img'
    ],


    config: {
        fullscreen: true,
        layout: {
            type: 'vbox',
            align: 'center',
            pack: 'center'
        },
        items: [
            {
                xtype : 'label',
                id: 'versionLabel',
                tpl: new Ext.XTemplate (
                    '<tpl if="version">',
                    'version: {version}',
                    '</tpl>'
                )
            },
            {
                xtype: 'fieldset',
                id: 'loginFieldSet',
                scrollable: false,
                items: [
                    {
                        xtype: 'textfield',
                        id: 'usernameField',
                        label: 'User',
                        autoCapitalize: false
                    },
                    {
                        xtype: 'passwordfield',
                        id: 'passwordField',
                        itemId: 'mypasswordfield',
                        label: 'Pass'
                    }
                ]
            },
            {
                xtype: 'button',
                itemId: '',
                text: 'Sign In',
                action: 'signIn'
            }
        ],
        masked: {
            xtype: 'loadmask',
            message: 'Signing in..',
            hidden: true,
            indicator: true
        }
    }
});

[warrean]

Having read:
http://www.sencha.com/forum/showthread.php?189488-Orientationchange-repaint-issue-ICS-(Android-4.0.3)-in-webview&

I've implemented a solution which resizes the devices viewport to a proper resolution now, however I'm hoping someone can point me to a better solution (an override somewhere perhaps?)

<script type="text/javascript">
        var resizeViewport = function(){
            if (Ext.os.is.Android && (Ext.Viewport.getWidth() !== screen.width || Ext.Viewport.getHeight() !== screen.height)) {
                Ext.Viewport.setSize(window.innerWidth,window.innerHeight);
            }
        };
        setInterval(resizeViewport, 1000);
    </script>

UPDATE:
I think this is a more elegant solution (tested on 2.3.3 and 4.0.3 devices):

App.js

...
launch: function () {       
        Ext.Viewport.on('orientationchange', function() {
            if (Ext.os.is.Android) {
                Ext.Viewport.setSize(window.innerWidth,window.innerHeight);
            }
        });
    }
...