Best practise location for global functions in an Architect project?

[marc.fearby]

Is there a Sencha-recommended "best practise" location for global functions in an Architect project? I'm currently defining a global singleton object which I populate by loading a store before the main viewport loads, so that I can refer to App.global.user_guid (etc) throughout the application.

I also refer to a simple showMessage() function (among others) in a common.js file which is included via app.json. Is this the best place or way to refer to global functions? I know it pollutes the global namespace but I haven't had a problem to date. It's almost certainly not best practise, but I'm not 100% sure what is in an app created with Sencha Architect anyway.

How does everybody else deal with getting and using common information throughout their apps, and where do you store your common/utility functions? I have a little time up my sleeve and I'd like to tidy up my application template before I get stuck into the next project, and if I can do things better, then I'm open to suggestions. Thanks.

This is how I start my apps in essence:

// app.js:
Ext.application({
    requires: [
        'Ext.Loader'
    ],
    models: [
        'AppGlobal'
    ],
    stores: [
        'AppGlobal'
    ],
    views: [
        'MainViewport'
    ],
    name: 'App',
    launch: function() {
        // Global object to access things throughout the application
        Ext.define('App.global', {
            singleton: true,
            user_guid: null,
            is_admin: false,
            something: 'else'
        });
        
        initialiseAppGlobal(function() {
            // Remove a simple HTML table in the index.html which has a spinning.gif in it
            var element = document.getElementById('loadertable');
            if (element) element.parentNode.removeChild(element);

            if (App.global.user_guid) {
                showMainViewport();
            } else {
                showMessage('Error', 'Your identity could not be determined', 'e');
            }
        });
    }
});


// common.js (included via the "js" array in app.json)
function initialiseAppGlobal(callback) {
    var store = Ext.create('App.store.AppGlobal', {
        autoLoad: true,
        listeners: {
            'load': function (store, records, success, operation, eOpts) {
                if (this.getTotalCount() === 0) {
                    showMessage('Critical Error', 'AppGlobal store did not return a record. The application is unable to load.', 'e');

                } else {
                    var record = this.first();
                    if (record) {
                        App.global.user_guid = record.get('user_guid');
                        App.global.is_admin = record.get('is_admin');
                        App.global.something = record.get('something');
                    }
                    
                    if (callback) callback();
                }
            }
        }
    });
}


function showMainViewport() {
    var vp = Ext.create('App.view.MainViewport', {
        renderTo: Ext.getBody()
    });
    vp.show();
}


function showMessage(title, message, icon) {
    var i = Ext.Msg.INFO; // assume INFO by default
    
    if (icon !== undefined) {
        if (icon === 'w') i = Ext.Msg.WARNING;
        if (icon === 'e') i = Ext.Msg.ERROR;
    }
    
    Ext.Msg.show({
        title: title, 
        msg: message, 
        buttons: Ext.Msg.OK, 
        icon: i
    });
}

One unfortunate downside to using my App.global singleton is that I can't refer to it in any ViewModel formulae; it causes Architect to throw up errors in the Log, but I can refer to them in the ViewModel data property before the corresponding component loads, though, and then use them via get('whatever').

[grosst]

Have you tried using a regular controller? We use them for rendering PDFs that are available app-wide. Great for events that you need globally..

It also looks like you could use localStorage storage to store those record properties or put them in your viewport view model and they should be available calling getViewModel().get('propertyName')

Hope that helps

[marc.fearby]

One of the reasons I use my App.global singleton is for brevity in referring to things throughout my app. I'm trying to avoid prolix statements just to get common things.

I'd much rather type something as short as this:

App.global.propertyName

Instead of this:

this.getViewModel().get('propertyName')

It's only 16 characters longer but it also is slightly less friendly to read. Using the Viewport's ViewModel could also cause potential conflicts in other view models, so these "global" properties should probably be prefixed with something unlikely to be used anywhere else in my app. I also can't refer to the ViewModel when using processConfig, either (I don't think).

I'm fussy, I know :-) Perhaps most people don't worry too much about these things...

[grosst]

One of the reasons I use my App.global singleton is for brevity in referring to things throughout my app. I'm trying to avoid prolix statements just to get common things.

I'd much rather type something as short as this:

App.global.propertyName

Instead of this:

this.getViewModel().get('propertyName')

It's only 16 characters longer but it also is slightly less friendly to read. Using the Viewport's ViewModel could also cause potential conflicts in other view models, so these "global" properties should probably be prefixed with something unlikely to be used anywhere else in my app. I also can't refer to the ViewModel when using processConfig, either (I don't think).

I'm fussy, I know :-) Perhaps most people don't worry too much about these things...

I suppose, i know we all have certain quirks of limitations due to our current infrastructure or personal preference.. whatever it is, you're not alone in that boat i know that much.

Anyway, it doens't come to this.getViewModel() because databinding comes into play, and it becomes {propertyName} , I mean you can also you could always prefix the properties so {global.propertyName} .

Alternatively you could also use a formula and create that binding from that App.global and make it single if that's what it is so the binding is only created once. Either way it's a good way to keep your legacy stuff in tact and be able to use the new the way going forward.

And you should be able to use the processConfig if i'm not misatken by just applying the bind:{configProperty: '{propertyName}'} much to the way that little red magnet in the config panel does for you.

It seems like another alternative which i don't think you've considered yet is a SessionStorage Proxy... http://docs.sencha.com/extjs/6.2.0-c...onStorage.html

[marc.fearby]

Thanks for the SessionStorage suggestion, though that is probably still going to be more lines of code (since I'd have to use it with a store, I'm still going to need Ext.getStore('whatever').getRecord('something') I presume) and more typing compared to my singleton. It's very hard to please some people, I know, but you made the effort at least :-)