How to execute code before store configuration takes effect?

Question

In our app we rely on the sessionStorage for persistence. However on mobile Safari the sessionStorage is not available when browsing in private mode.

However, for those customers using Safari in private mode it's ok to switch to an in-memory approach. Our app continues to be usable to some extend (you will lose data when you refresh the browser but since it's a single page application you never have to refresh anyway).

The fix was quite easy to do in development mode. However, after running a production build I faced a huge problem.

So, code is worth a thousand words. Here is what we currently use:

index.html

//...
<script type="text/javascript">
    var isSessionStorageAvailable = true;
    var storage =  window.sessionStorage;
    if (typeof window.sessionStorage == 'undefined' || window.sessionStorage === null) {
        isSessionStorageAvailable = false;
    } else try {
        storage.setItem('__ccTest', '__ccTest');
    } catch (err) {
        isSessionStorageAvailable = false;
    }

</script>

<script id="microloader" type="text/javascript" src="../sencha/microloader/development.js"></script>
//...

myStore.js

Ext.define('App.store.Quote', {
extend: 'Ext.data.Store',
requires: ['App.model.QuoteItem','Ext.data.proxy.SessionStorage'],

config :{
    model: 'App.model.QuoteItem',
    autoLoad: true,
    autoSync: true,
    identifer: 'uuid',
    proxy:{
        type: isSessionStorageAvailable ? 'sessionstorage' : 'memory',
        id:'ccCart'
    }
},
//...

So, before sencha get's loaded we first check for the sessionStorage and set a global variable. So at the time when the store file loads the right configuration is picked up.

However, I really dislike this solutions as I had to alter the index.html file. In development mode you can just write this check anywhere in the app.js file because all the other files are loaded afterwards. But in production that's not the case. So I wonder how would you do that properly without altering the index.html file?

UPDATE

I also tried to use the applier like this:

applyProxy: function(proxy, oldProxy){

    proxy.type = 'sessionstorage';
    var storage =  window.sessionStorage;
    if (typeof window.sessionStorage == 'undefined' || window.sessionStorage === null) {
        proxy.type = 'memory';
    } else try {
        storage.setItem('__ccTest', '__ccTest');
    } catch (err) {
        proxy.type = 'memory';
    }

    this.callParent([proxy, oldProxy]);
}

However, the first time some code calls sync() on this store it raises an error inside the sencha framework:

It's inside the sync method of the store class on this line (it's from the minified source, sorry):

d.getProxy().batch({operations: b,listeners: d.getBatchListeners()})

It raises an error because getProxy() returns undefined. So it seems as if the applier didn't work :(.

you need to return the this.callParent call. Notice how I did that in my code — Mitchell Simoens
Thanks man! It works. I was so close when I tried it yesterday. But I had it like: return this.callParent(proxy); But sure, this failed because in the parent both arguments are needed. Man I feel so stupid right now. Thanks for your help! — Christoph

Mitchell Simoens Mitchell Simoens · Accepted Answer · 2013-01-23T14:25:52

Use the applier...

Ext.define('App.store.Quote', {
    extend   : 'Ext.data.Store',
    requires : ['App.model.QuoteItem', 'Ext.data.proxy.SessionStorage'],

    config : {
        model     : 'App.model.QuoteItem',
        autoLoad  : true,
        autoSync  : true,
        identifer : 'uuid',
        proxy     : {
            id : 'ccCart'
        }
    },

    applyProxy : function (config, oldProxy) {
        config.type = isSessionStorageAvailable ? 'sessionstorage' : 'memory';

        return this.callParent([config, oldProxy]);
    }
});

How to execute code before store configuration takes effect?

3 Answers