Results 1 to 5 of 5

Thread: Best practise location for global functions in an Architect project?

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha Premium User
    Join Date
    Sep 2011
    Location
    Tamworth, NSW, Australia
    Posts
    1,353
    Answers
    13

    Question Best practise location for global functions in an Architect project?

    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:

    Code:
    // 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').

  2. #2
    Sencha Premium User
    Join Date
    Oct 2012
    Location
    United States
    Posts
    130
    Answers
    11

    Default

    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

  3. #3
    Sencha Premium User
    Join Date
    Sep 2011
    Location
    Tamworth, NSW, Australia
    Posts
    1,353
    Answers
    13

    Default

    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...

  4. #4
    Sencha Premium User
    Join Date
    Oct 2012
    Location
    United States
    Posts
    130
    Answers
    11

    Default

    Quote Originally Posted by marc.fearby View Post
    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

  5. #5
    Sencha Premium User
    Join Date
    Sep 2011
    Location
    Tamworth, NSW, Australia
    Posts
    1,353
    Answers
    13

    Default

    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 :-)

Similar Threads

  1. Global functions
    By TampaBay55 in forum Ext 5: Q&A
    Replies: 1
    Last Post: 1 Oct 2014, 10:53 PM
  2. Creating a global variable for Location of device
    By fabulousfab in forum Sencha Touch 2.x: Q&A
    Replies: 7
    Last Post: 6 May 2014, 10:06 PM
  3. Using global functions / variables?
    By Silverlan in forum Sencha Touch 2.x: Q&A
    Replies: 3
    Last Post: 13 Feb 2014, 2:54 AM
  4. What is best practise for event management in architect?
    By mboreback in forum Sencha Architect 2.x: Help & Discussions
    Replies: 10
    Last Post: 3 Aug 2012, 6:29 PM

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
  •