Results 1 to 3 of 3

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

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha Premium Member
    Join Date
    Oct 2010
    Vote Rating

    Default Answered: Upgrading from 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 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).


        name: 'FASTOnline',
        icon: 'img/apple-touch-icon.png',
        glossOnIcon: true,
        phoneStartupScreen: 'img/startup.png',
        tabletStartupScreen: 'img/startup.png',
        // viewport: {
        //     autoMaximize: ! && && Ext.browser.version.isGreaterThan(3)
        // },
        controllers: [
        views: [
        stores: [
            'OnlineAccounts', 'OfflineAccounts',
            'OnlineBfps', 'OfflineBfps',
            'OnlineBfpTests', 'OfflineBfpTests',
            'OnlineAssessments', 'OfflineAssessments',
            'OnlineFacilityClassifications', 'OfflineFacilityClassifications',
            'OnlineBusinessTypes', 'OfflineBusinessTypes',
            'OnlineCommonCrossConnections', 'OfflineCommonCrossConnections',
            'OnlineFixtures', 'OfflineFixtures',
            'OnlineWordLists', 'OfflineWordLists'
        models: [
            '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');
            if(user.getCount() > 0) {
                console.log('Using locally stored user credentials');
                // Load the data stores
                Ext.Viewport.add({ xtype: 'mainpanel', id: 'mainpanel' });
            } else {
                console.log('User authentication required');
                // Show the login form
                Ext.Viewport.add({ xtype: 'loginpanel' });

    Ext.define('FASTOnline.view.Main', {    extend: 'Ext.navigation.View',
        xtype: 'mainpanel',
        requires: [
        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' }

    Ext.define('FASTOnline.view.AccountList', {    extend: 'Ext.List',
        xtype: 'accountlist',
        requires: [
        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>',
            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);
                            xtype: 'searchfield',
                            label: '',
                            name: 'searchaccount',
                            flex: 1,
                            listeners: {
                                change: function (field, newValue, oldValue) {
                                    Ext.getStore('OfflineAccounts').filter(Ext.getStore('Users').getData().items[0].get('search'), newValue, true, false);
            listeners: {
                painted: function () {
                        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());
                                    // Show the new record details
                    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.

    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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts