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?

Related: http://stackoverflow.com/questions/9261458/where-should-i-define-global-functions-in-extjs-4-mvc — Qtax, Jun 12 '13 at 13:36

rai.skumar · Answer 1 · 2016-01-22T00:29:10.323

15

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

edited Jan 22 '16 at 00:29

answered Oct 05 '13 at 13:45

rai.skumar

10,309
6
39
55

Your blog post helped me. Thank you! It would be fine if you put the code right here -- in the answer. – Evgeni Nabokov Jan 21 '16 at 13:36

score 7 · Accepted Answer · answered Dec 13 '12 at 17:31

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.

score 4 · Answer 3 · answered Dec 13 '12 at 18:08

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

score 3 · Answer 4 · answered Dec 13 '12 at 17:31

3

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); }

    });

})();

answered Dec 13 '12 at 17:31

Adam Rackis

82,527
56
270
393

@alex23 - **Yes**. Any functions created in `Ext.application` *close over* whatever variables are declared in that outer anonymous function. – Adam Rackis Dec 13 '12 at 17:35
1

You need var. If you drop var then the whole point of the closure is moot. – Lloyd Dec 13 '12 at 17:40
@alex23 - what do you mean `var is by default the 'private' keyword`? That doesn't really mean anything in JavaScript. – Adam Rackis Dec 13 '12 at 17:43
@Lloyd - yes, if I drop var above, then `globalVariable` will be an implicit global variable. Which is bad. – Adam Rackis Dec 13 '12 at 17:44
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. – Lloyd Dec 13 '12 at 17:46
@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 Dec 13 '12 at 17:46
@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. – Adam Rackis Dec 13 '12 at 17:49
It's not private to the window object because you can do `window.globalVariable` which is very public... – Lloyd Dec 13 '12 at 17:50
@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 Dec 13 '12 at 17:56
@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. – Adam Rackis Dec 13 '12 at 17:58

Where to add Global variables in ExtJS MVC?

4 Answers4

Linked