1. #1
    Sencha Premium Member
    Join Date
    Oct 2010
    Location
    Canada
    Posts
    2
    Vote Rating
    0
    telifon is on a distinguished road

      0  

    Default Answered: Upgrading from 2.0.1.1 to 2.1.0 and viewport children panels are no longer fullscreen

    Answered: Upgrading from 2.0.1.1 to 2.1.0 and viewport children panels are no longer fullscreen


    This is not an issue with maximizing the viewport to remove the browser bar. It is specifically related to how the viewport is rendering the panels that are added to it.

    What prompted the upgrade to 2.1.0 was during an iOS upgrade from 5.1.1 to 6 the application stopped working properly when calling the .load() method of a data store. The server-side PHP script throws an error that does not occur when calling the same method from iOS 5.1.1 or any other browser. I also started seeing a lot of calls to a url with "undefined" in the uri,. I'm still investigating this and have decided to try upgrading as part of the troubleshooting process. Unfortunately, the upgraded Sencha library causes the application to no longer stretch to fill the screen in any browser.

    When viewing the app in Chrome and using the Developer Tools the viewport itself appears to have 100% width and height, but the child panels are not. I haven't explicitly set any fullscreen: true parameters to any of the classes and with 2.0.1.1 the screen is always stretching to fill the viewport.

    The application uses the MVC architecture. There is some complexity here as the application uses localStorage while offline, however, that seems to be working just fine and when the device is online it synchronizes with the server and I don't expect it to have any bearing on the layout issues.

    I have tried setting fullscreen: true at almost every spot in the application that appeared to be relevant and also set height/width properties, to no avail.

    Here's some of the code, hopefully enough to illustrate the first panel that is pushed to the viewport once the user logs in (a simple list).

    /app.js:

    Code:
    Ext.application({
        name: 'FASTOnline',
    
    
        icon: 'img/apple-touch-icon.png',
        glossOnIcon: true,
        phoneStartupScreen: 'img/startup.png',
        tabletStartupScreen: 'img/startup.png',
    
    
        // viewport: {
        //     autoMaximize: !Ext.browser.is.Standalone && Ext.os.is.iOS && Ext.browser.version.isGreaterThan(3)
        // },
    
    
        controllers: [
            'Main',
            'Login'
        ],
        views: [
            'Main',
            'Login',
            'AccountContact',
            'AccountDetail',
            'AccountList',
            'BfpDetails',
            'BfpList',
            'BfpTestList',
            'BfpTestReport',
            'BusinessTypeDetails',
            'BusinessTypeList',
            'CCAssessments',
            'CCDetails',
            'CommonCrossConnectionDetails',
            'CommonCrossConnectionList',
            'FacilityAssessment',
            'FacilityClassificationDetails',
            'FacilityClassificationList',
            'FacilityDetails',
            'FixtureDetails',
            'FixtureList',
            'Options',
            'ReferenceList'
        ],
        stores: [
            'Users',
            'OnlineAccounts', 'OfflineAccounts',
            'OnlineBfps', 'OfflineBfps',
            'OnlineBfpTests', 'OfflineBfpTests',
            'OnlineAssessments', 'OfflineAssessments',
            'OnlineFacilityClassifications', 'OfflineFacilityClassifications',
            'OnlineBusinessTypes', 'OfflineBusinessTypes',
            'OnlineCommonCrossConnections', 'OfflineCommonCrossConnections',
            'OnlineFixtures', 'OfflineFixtures',
            'OnlineWordLists', 'OfflineWordLists'
        ],
        models: [
            'User',
            'Account', 'AccountSync',
            'Assessment', 'AssessmentSync',
            'Bfp', 'BfpSync',
            'BfpTest', 'BfpTestSync',
            'FacilityClassification', 'FacilityClassificationSync',
            'BusinessType', 'BusinessTypeSync',
            'CommonCrossConnection', 'CommonCrossConnectionSync',
            'Fixture', 'FixtureSync',
            'WordList', 'WordListSync'
        ],
    
    
        launch: function () {
            console.log('Launching the FAST Mobile application v' + version);
            /**
             * Load the user store to check for valid logged in user
             *  - Prompt for credentials if nothing in localstorage
             */
    
    
            var user = Ext.getStore('Users');
            user.load();
            if(user.getCount() > 0) {
                console.log('Using locally stored user credentials');
    
    
                // Load the data stores
                Ext.getStore('OfflineAccounts').load();
                Ext.getStore('OfflineAssessments').load();
                Ext.getStore('OfflineBfps').load();
                Ext.getStore('OfflineBfpTests').load();
                Ext.getStore('OfflineFacilityClassifications').load();
                Ext.getStore('OfflineBusinessTypes').load();
                Ext.getStore('OfflineCommonCrossConnections').load();
                Ext.getStore('OfflineFixtures').load();
                Ext.getStore('OfflineWordLists').load();
    
    
                Ext.Viewport.add({ xtype: 'mainpanel', id: 'mainpanel' });
            } else {
                console.log('User authentication required');
            
                // Show the login form
                Ext.Viewport.add({ xtype: 'loginpanel' });
            }
        }
    });
    /app/view/Main.js:

    Code:
    Ext.define('FASTOnline.view.Main', {    extend: 'Ext.navigation.View',
        xtype: 'mainpanel',
        requires: [
            'FASTOnline.view.AccountList',
            'FASTOnline.view.AccountDetail',
            'FASTOnline.view.AccountContact',
            'FASTOnline.view.BfpList',
            'FASTOnline.view.BfpDetails',
            'FASTOnline.view.BfpTestList',
            'FASTOnline.view.BfpTestReport',
            'FASTOnline.view.CCAssessments',
            'FASTOnline.view.CCDetails',
            'FASTOnline.view.FacilityAssessment',
            'FASTOnline.view.FacilityDetails',
            'FASTOnline.view.Options',
            'FASTOnline.view.BusinessTypeList',
            'FASTOnline.view.BusinessTypeDetails',
            'FASTOnline.view.CommonCrossConnectionList',
            'FASTOnline.view.CommonCrossConnectionDetails',
            'FASTOnline.view.FacilityClassificationList',
            'FASTOnline.view.FacilityClassificationDetails',
            'FASTOnline.view.FixtureList',
            'FASTOnline.view.FixtureDetails',
            'FASTOnline.model.Account',
            'FASTOnline.model.Assessment',
            'FASTOnline.model.Bfp',
            'FASTOnline.model.BfpTest',
            'FASTOnline.model.BusinessType',
            'FASTOnline.model.CommonCrossConnection',
            'FASTOnline.model.FacilityClassification',
            'FASTOnline.model.Fixture',
            'FASTOnline.model.WordList',
            'FASTOnline.store.OfflineAccounts',
            'FASTOnline.store.OfflineAssessments',
            'FASTOnline.store.OfflineBfps',
            'FASTOnline.store.OfflineBfpTests',
            'FASTOnline.store.OfflineBusinessTypes',
            'FASTOnline.store.OfflineCommonCrossConnections',
            'FASTOnline.store.OfflineFacilityClassifications',
            'FASTOnline.store.OfflineFixtures',
            'FASTOnline.store.OnlineWordLists'
        ],
    
    
        config: {
            useTitleForBackButtonText: true,
            //styleHtmlContent: true,
            
            // Set up the nav bar
            navigationBar: {
                items: [
                    {
                        xtype: 'container',
                        align: 'right',
                        id: 'navbar'
    
    
                        // Used to debug when buttons are added/removed by other views
    //                     listeners: {
    //                         add: function (container, item, index, opt) {
    //                             console.log('Adding navbar item: ');
    //                             console.log(item);
    //                         },
    //                         remove: function (container, item, index, opt) {
    //                             console.log('Removing navbar item: ');
    //                             console.log(item);
    //                         }
    //                     }
                    },{
                        xtype: 'button',
                        id: 'navopt',
                        iconCls: 'settings',
                        iconMask: true,
                        align: 'right'
                    }
                ]
            },
            
            items: [
                { xtype: 'accountlist' }
            ]
        }
    });
    /app/view/AccountList.js:

    Code:
    Ext.define('FASTOnline.view.AccountList', {    extend: 'Ext.List',
        xtype: 'accountlist',
        requires: [
            'FASTOnline.store.OfflineAccounts',
            'FASTOnline.store.OnlineAccounts'
        ],
    
    
        config: {
            id: 'accountlist',
            title: 'Accounts',
            grouped: false,
            itemTpl: [
                '<div style="float: left;"><strong>{ServiceAddress}</strong></div>',
                '<div style="border: 1px solid black; padding: 4px; float: right;"><strong>{PC}</strong></div>',
                '<div style="clear: both;"></div>',
                '{Facilityname}'
            ],
            store: 'OfflineAccounts',
            onItemDisclosure: false,
            triggerEvent: 'itemsingletap',
            preventSelectionOnDisclose: false,
            emptyText: 'Click the + to add an account',
            styleHtmlContent: true,
            margin: 0,
            padding: 0,
            
            items: [
                {        
                    xtype: 'toolbar',
                    docked: 'bottom',
                    layout: 'hbox',
            
                    items: [
                        {
                            xtype: 'button',
                            iconCls: 'locate3',
                            iconMask: true,
                            
                            handler: function () {
                                var picker = Ext.create('Ext.picker.Picker', {
                                    cancelButton: null,
                                    height: '50%',
    
    
                                    slots: [{
                                        align: 'center',
                                        name: 'search_field',
                                        title: '',
                                        data: [
                                            {text: 'Service Address', value: 'ServiceAddress'},
                                            {text: 'Facility Name', value: 'Facilityname'},
                                            {text: 'Business Type', value: 'BusType'},
                                            {text: 'Account', value: 'Account'}
                                        ]
                                    }],
    
    
                                    listeners: {
                                        pick: function (picker, selected, slot) {
                                            console.log('Updating search target field to: ' + selected.search_field);
                                            Ext.getStore('Users').getData().items[0].set('search', selected.search_field);
                                            Ext.getStore('Users').sync();
                                        }
                                    }
                                });
                                Ext.Viewport.add(picker);
                                picker.show();
                            }
                        },{
                            xtype: 'searchfield',
                            label: '',
                            name: 'searchaccount',
                            flex: 1,
                            
                            listeners: {
                                change: function (field, newValue, oldValue) {
                                    Ext.getStore('OfflineAccounts').clearFilter();
                                    Ext.getStore('OfflineAccounts').filter(Ext.getStore('Users').getData().items[0].get('search'), newValue, true, false);
                                }
                            }
                        }
                    ]
                }
            ],
            
            listeners: {
                painted: function () {
                    Ext.getCmp('navbar').removeAll();
    
    
                    Ext.getCmp('navbar').add({
                        xtype: 'button',
                        iconCls: 'add',
                        iconMask: true,
    
    
                        handler: function () {
                            Ext.Msg.prompt('Add', 'Account name', function(buttonId, text) {
                                if (buttonId == 'ok') {
                                    // Create the new record and add to data store
                                    var record = Ext.create('FASTOnline.model.Account', {
                                        Account: text,
                                        added: true
                                    });
                                    record.set('id', record.getUniqueId());
                                    record.set('sync_id', record.getUniqueId());
                                    Ext.getStore('OfflineAccounts').add(record);
                                    Ext.getStore('OfflineAccounts').sync();
    
    
                                    // Show the new record details
                                    Ext.getCmp('accountlist').select(record);
                                }
                            });
                        }
                    });
                    console.log('Add account button added');
                }
            }
        }
    });

    Is there anything that would have significantly changed to the layout functions between these versions that would have caused this issue? This is my first Sencha Touch app and I was quite happy to finally have completed it, only to have this issue crop up after testing with the iOS 6 devices.

    Any help is greatly appreciated, thank you in advance.

    Regards,
    Lucas Bussey

  2. Hi,
    Have seen issues posted around upgrades and application components rendering shrunk into the top left hand corner.
    If this is your case and you have any custom themeing you will need to recompile your sass files to css.

  3. #2
    Touch Premium Member suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    447
    Answers
    21
    Vote Rating
    62
    suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough

      0  

    Default


    Hi,
    Have seen issues posted around upgrades and application components rendering shrunk into the top left hand corner.
    If this is your case and you have any custom themeing you will need to recompile your sass files to css.

  4. #3
    Sencha Premium Member
    Join Date
    Oct 2010
    Location
    Canada
    Posts
    2
    Vote Rating
    0
    telifon is on a distinguished road

      0  

    Default


    Recompiling the CSS did the trick! Thank you for that suggestion.

    Regards,
    Lucas

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi