Is there Global variables in EXT JS

Question

In java and C++ we could store a variable globally and access its value from any where in the project. Say, i am inside a class called Residence and i am saving the residenceNumber which is a INT to a global variable called houseNumberGlobalVariable.

Now, i could access houseNumberGlobalVariable from any class in the project. In a similar fashion, is there a Global variable in EXTJS that i could use.

I need to set a value from one class and access it from another. What is the equivalent in EXT JS. I don't think there's a global variable concept in EXTJS, but what is the equivalent in it ?

Dinse

Answer 1

Just declare a variable in app.js it will act as global variable.

var globalVar;

You can add anything into that like

globalVar.myStore = yourStore;

Qualm

It will be easy to keep all global2 variables in one class. So can i even store a view,store using @sha's approach ? – Dinse

yes, but i didn't tried! i usually add all to same var. like globalVar.myView, globalVar.myCtl. i dont know whats the benfit using class here. – Qualm

How do i access store which i stored in globalvar.mystore ? Is it var accessstore = globalvar.mystore; ?? – Dinse

I have set globalvar in app.js. now i am trying to set values to it from the controller as globalvar.id=1. then i get globalvar.id is not defined. When i just set globalvar=1 and try to access it else where as var id=globalvar then it works. Can you explain how you are setting values like globalvar.store=mystore ? – Dinse

i missed it, after declaring , i made that as an array. globalVar= {}; – Qualm

If you would like to add some properties to it later, don't forget to assign it an empty object: var globalVar = {} and to avoid collisions, maybe do something like: var globalVar = globalVar || {}; – Pocky

Answer 2

Create a special class and put all your global variables there.

Ext.define('MyApp.global.Vars', {
    singleton: true,
    ....   
    houseNumberGlobalVariable: undefined

});

This way if you need access for it anywhere in the code just use MyApp.global.Vars.houseNumberGlobalVariable

Enfleurage

Where should i create this file ? in View ? – Dinse

I would advise to create a separate file for the class, or put it inside main app.js. – Enfleurage

This is the best way to declare global variables with ExtJS. Too bad wasn't set as Answer. – Luggage

When I create a new js for this, I can't see it or access it.. do I need to declare it somewhere? – Gambrinus

Need to tie up where used requires: [ 'TestApp.global.Links', ], – Morten

Answer 3

Based on your Application you can declare your global variable.

Scenario 1 : Declare inside the config

If you are going to use getter/setter methods (i.e change the variable frequently then go for config based)

Declaring the Appconstants

Ext.define('Practice.utilities.AppConstants', {
    alias: 'widget.AppConstants',
    config: {
        mainVarTest: 'mainVarTest',
    },
    testvar: 'Testing value',
    foo: 'bar',
    meh: 42,
    constructor: function(options) {
        this.initConfig(options);
    }
});

Calling the variable

var AppConstants = Ext.widget("AppConstants"); 
console.log(AppConstants.getMainVarTest());

---

Scenario 2 : Declare inside Singleton class

If your application needs global variable but it wont be alter any more inside the app. This class help to load the constant variable only once. (i.e you are not going changing the variable). This type is suits for your application

Declaring

Ext.define('Practice.utilities.AppConstants', {
    alias: 'widget.AppConstants',
    singleton: true,
    testvar: 'Testing value',
    foo: 'bar',
    meh: 42,
});

Calling

var AppConstant=Practice.utilities.AppConstants;
console.log(AppConstant.foo);

---

Scenario 3 : Declare as Statics

Statics is static variable (exactly same as java). Advantage of using static variable is the life time of variable is indefinite longer period until explicitly cleared.

Ext.define("Practice.utilities.AppConstants", {
     statics: {
         mainVarTest: 'mainVarTest'
     },
 });

Vertebrate

Answer 4

I noticed the one thing missing here was a solution from the Sencha Architect program on how to create a global variable.

Go to your "Application" node on the project Inspector. Next click in the Configs search/Filter box, this is not only for searching but for creating config entries too. When you first look at this box it will have a Smokey pre-filled text of Filter Configs... .

Enter your global variable name and you will notice nothing is found in the list below, (if the value is found in the config list then you already have this variable or your using a keyword). To the right of the text box and the lock icon is an "Add" button. Click the "Add" button to add your global variable into the application.

So lets say we have created the Foo variable at this point. You will now see an entry in your config list. To the left of this entry is an ellipses button, this is currently designating that the new variable we created is a String. Click the button and change it to something different like a 'Number' field. Enter a value for this new variable and your now done, you have a global variable.

So how do you access this newly created variable? here is a sample bit of code stuffing the global into a local variable to be used.

var bar= MyApp.app.Foo;

The 'MyApp' reference is the Application name config setting for the application you are creating. You can find this same value in the config settings of the Application node by filtering on name.

Cytaster

Answer 5

var globalVar = {}; add in your app.js file, its working fine

Toddle