Where to add Global variables in ExtJS MVC?

Question

I am wondering where to add global variables for an ExtJS Application. I already looked at some suggestions in stackoverflow that mention that you can add them inside app.js. But, can anyone be more specific? My app.js looks something like this:

Ext.application({

    launch: function() {..}

});

So, where exactly do the variables go? In the launch function? Outside Ext.application?

Solution 1

Declare your own object namespace and add them there:

Ext.ns('My.Application.Globals');

My.Application.Globals.SomeValue = 5;
My.Application.Globals.SomeText = 'Hello World!';

However globals are usually frowned upon unless absolutely needed, so try and get around using them if you can.

Solution 2

Better approach would be to create a separate class to hold such global constants. Then you should just put that constants class as requires in app.js.

Ext.define("App.Constants", {
         singleton  : true,   

         BASE_URL : "http://localhost:8080/",
         LABLE_HEADER : "geekrai.blogspot",
         TIMEOUT : 6000 
 });

This will ensure that class is loaded and now you can access any property/global value. I have mentioned the same in detail on my blog : link

Solution 3

I know you already accepted an answer which is fine. I just wanted to add an MVC way to include namespaced variables available to the app. There is one caveat to these 'globals' - you can not use them in your class definitions. Meaning you can not reference your app in Ext.define({}) methods. They have to be use in initComponent method or later.

So here is what I do:

Ext.application({
    name:'MyApp',
    appFolder:'js/app',
    controllers:[ 'Main' ],
    autoCreateViewport : true,
    launch:function () {
        console.log("App Launched!");
        MyApp.app = this;   //added this to get reference to app instance. IMPORTANT!    
    }, 
    //variables used throughout the app
    globals:{
        myURL:'http://example.com',
        magicNum:5
    }
});

To use these application wide variables you reference your app namespace and so do not pollute the global space. Like this:

MyApp.app.gloabals.magicNum

Solution 4

Aside from whatever features may be built into Ext, you can always use an immediate function to create a closure:

(function(){
    var globalVariable = 'foo';    

    Ext.application({

        launch: function() { alert(globalVariable); }

    });

})();

View more solutions

Comments

[Qtax]

Related: stackoverflow.com/questions/9261458/…

[Adam Rackis]

@alex23 - Yes. Any functions created in Ext.application close over whatever variables are declared in that outer anonymous function.

[Lloyd]

You need var. If you drop var then the whole point of the closure is moot.

[Adam Rackis]

@alex23 - what do you mean var is by default the 'private' keyword? That doesn't really mean anything in JavaScript.

[Adam Rackis]

@Lloyd - yes, if I drop var above, then globalVariable will be an implicit global variable. Which is bad.

[Lloyd]

The point is, if you drop var it's going to be scoped to window and pollute that object. By keeping var and using a closure it's scoped to any immediate and inner functions.

[Adam Rackis]

@alex23 - I think you're reading Crockford without really understanding what he's talking about. globalVariable above is closed over by any functions declared inside of that immediate function. That's how we use var to simulate private members in JavaScript

[Adam Rackis]

@Lloyd - you're right. The code above would only let you declare variables visible to any of the Ext stuff declared within the anonymous function.

[Lloyd]

It's not private to the window object because you can do window.globalVariable which is very public...

[Adam Rackis]

@alex23 - yes, making it accessible to Ext.application. Per the question: where to add global variables for an ExtJS Application. I thought OP wanted a way to add variables that would be accessible anywhere inside of Ext.application

[Adam Rackis]

@Alex - it won't create a closure, because there is no higher order to remember - look at the launch function inside of Ext.application. Any variables declared in the outer anonymous function will be "remembered" in there. Any variables declared in the outer function will be closed over by any Ext.application functions.

[Evgeni Nabokov]

Your blog post helped me. Thank you! It would be fine if you put the code right here -- in the answer.