Results 1 to 7 of 7

Thread: user settings in local storage and use in components config

  1. #1
    Sencha User
    Join Date
    May 2011
    Posts
    61
    Answers
    5

    Default user settings in local storage and use in components config

    Hi,
    I actually store the user settings as an object in a key/value pair in local storage.
    I load these settings at app start (in launch function of app.js).
    However, when I try to use them in components config, I get a "undefined" error.
    I've checked that user settings are correctly loaded at launch, but it seems that the are not loaded soon enough to be used in components config.
    I found a ugly solution: loading user settings in a script directly from the header of index.html.
    I believe there should be a better one, more elegant and secured.
    How could I make these settings loaded from local storage before views and components are loaded?

  2. #2
    Sencha Premium Member u25771's Avatar
    Join Date
    Sep 2012
    Location
    Switzerland :)
    Posts
    253
    Answers
    27

    Default

    Quote Originally Posted by patrik62 View Post
    Hi,
    I actually store the user settings as an object in a key/value pair in local storage.
    I load these settings at app start (in launch function of app.js).
    However, when I try to use them in components config, I get a "undefined" error.
    I've checked that user settings are correctly loaded at launch, but it seems that the are not loaded soon enough to be used in components config.
    I found a ugly solution: loading user settings in a script directly from the header of index.html.
    I believe there should be a better one, more elegant and secured.
    How could I make these settings loaded from local storage before views and components are loaded?
    Launch function would be the right place to do so. Could you please give some code examples where you do what?

    A more pretty solution would be to load the settings and show a "loading" screen while doing so. After that push the initial screen of your application.
    Mark thread as answered if your problem could be solved and leave a vote for helpful answers

    For more help check out my new blog: http://abitofcoding.blogspot.com

    T
    o get in contact with me just send me a message on Google+

  3. #3
    Sencha User
    Join Date
    May 2011
    Posts
    61
    Answers
    5

    Default

    in app.js:
    Code:
    var stgUsr;
    Ext.application({
        name: 'MyApp',
        ...
        launch: function() {
    
    
            // Load Settings
            stgUsr    = appSettings.fncGetSettings('stgUsr');
            
            appStart.fncAppStart();
                    
        }
    }
    the fncGetSettings() function:
    Code:
    fncGetSettings: function( pStg ) {
    
    
        var storeSettings = Ext.getStore('storeSettings'),
            index     = storeSettings.find('stg', pStg, null, null, null, true),
            record     = storeSettings.getAt(index);
            
        if ( record ) {
            var stg    = JSON.parse(record.get('value'));
            return stg;
        } else {
            return null;
        }
        
    },
    and the fncAppStart() function:
    Code:
    fncAppStart: function() {
    
    
        // Initialize the main viewport
        Ext.Viewport.add(Ext.create('MyApp.view.main.Viewport'));
        
        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();
        
        ctrlNav.fncNavTo( 'homescreen', 'AppStart' );
        
    }
    and this is where I have an "undefined" error:
    Code:
    {
        xtype:         'datepickerfield',
        itemId:     'fld1',
        label:        'field1',
        labelWidth: '40%',
        labelWrap:     true,
        dateFormat:    stgUsr.loc.datePattern.dpMYS.ptrn,     <= stgUsr is undefined!
        value:         new Date(),
        picker: {
            slotOrder: [
                'month',
                'year'
            ],
            yearFrom:    1950,
            yearTo:     2100
        }
    }

  4. #4
    Sencha Premium Member u25771's Avatar
    Join Date
    Sep 2012
    Location
    Switzerland :)
    Posts
    253
    Answers
    27

    Default

    Async is the key

    Code:
    var stgUsr;
    Ext.application({
        name: 'MyApp',
        ...
        launch: function() {
    
    
            // Load Settings
            stgUsr    = appSettings.fncGetSettings('stgUsr', appStart.fncAppStart);
                    
        }
    }
    Code:
    fncGetSettings: function( pStg, callback ) {
    
    
        var storeSettings = Ext.getStore('storeSettings'),
            index     = storeSettings.find('stg', pStg, null, null, null, true),
            record     = storeSettings.getAt(index);
            
        if ( record ) {
            var stg    = JSON.parse(record.get('value'));
            return stg;
        } else {
            return null;
        }
    
        callback();
        
    },
    This should work in my opinion.
    Mark thread as answered if your problem could be solved and leave a vote for helpful answers

    For more help check out my new blog: http://abitofcoding.blogspot.com

    T
    o get in contact with me just send me a message on Google+

  5. #5
    Sencha User
    Join Date
    May 2011
    Posts
    61
    Answers
    5

    Default

    will try this this afternoon and come back to you
    Thanks for your quick reply!

  6. #6
    Sencha User
    Join Date
    May 2011
    Posts
    61
    Answers
    5

    Default

    Hi u25771,

    I don't really know how to implement the callback in my case.
    When I gave you my code above, I simplified it to be more readable.
    The complete launch function is:
    Code:
       launch: function() {    
            // Load Settings
            //====================
            // If user settings are loaded,
            // then: launch normal app start
            // else: initialize app first start
            stgUsr    = appSettings.fncGetSettings('stgUsr');
            
            // Initialize global vars & objects
            ctrlNav = MyApp.app.getController('main.Navigation');    // Get Navigation Controller as a global object
            
            if ( stgUsr ) {
                // Normal start
                appStart.fncAppStart();
            } else {
                // Application first start => Initialization
                appStart.fncExecuteWhenDeviceReady( function() { appStart.fncAppInit(); }, 1000 );
            }
            
        },
    The fncAppInit function is building default user settings (depending on localization) when app starts for the first time (when user settings are not yet stored in local storage), after installation. It is waiting for device ready event to start initializing (to get phonegap globalization infos).

    Additionaly, it seems that the error is raised before launch function execution, perhaps when all classes are loaded into memory by microloader...
    So I'm not sure that the problem is coming from fncAppStart executing before stgUsr is loaded from local storage.

    I'm a bit lost...

  7. #7
    Sencha User
    Join Date
    May 2011
    Posts
    61
    Answers
    5

    Default

    Hi,

    I've tried your callback solution, with no success (app stops at fncGetSettings, without executing the callback).

    I've made a simple test:
    I simply commented the reference to my view in app.js, so the view is not loaded at startup:
    Code:
    view: [
        // 'MyApp.view.MyView'
    ]
    and I get no more error on usrStg undefined. The parameter is well set in config of MyView!

    However, I get the usual following warning in console:
    Code:
    Synchronously loading 'MyApp.view.MyView'; consider adding 'MyApp.view.MyView' explicitly as a require of the corresponding class
    So, my problem is definitely that if I try to use usrStg in view config, and this view is initialised before the launch() function is executed, then usrStg is undefined and an error is raised when view is initialised => cancel app starting...

    For now, I only found the following solution, that I mentionned in the following post:
    http://www.sencha.com/forum/showthread.php?295525-Load-and-Set-Global-Variable-value-from-DB-before-app-launch

    However, this solution is really ugly and certainly unsecured...

    Would anybody have a better solution?

Posting Permissions

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