Hybrid View

  1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    65
    Answers
    7
    Vote Rating
    1
    warrean is on a distinguished road

      0  

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

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


    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:
    Code:
    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
            }
        }
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Answers
    3517
    Vote Rating
    856
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    First thing I see is it looks like you are overnesting a few levels.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    65
    Answers
    7
    Vote Rating
    1
    warrean is on a distinguished road

      0  

    Default


    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:
    Code:
    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
            }
        }
    });

  4. #4
    Sencha User
    Join Date
    Sep 2012
    Posts
    65
    Answers
    7
    Vote Rating
    1
    warrean is on a distinguished road

      0  

    Default


    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?)

    Code:
    <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
    Code:
    ...
    launch: function () {       
            Ext.Viewport.on('orientationchange', function() {
                if (Ext.os.is.Android) {
                    Ext.Viewport.setSize(window.innerWidth,window.innerHeight);
                }
            });
        }
    ...

Thread Participants: 1

Tags for this Thread