how to use global variable in Extjs 4

[rmdismail]

Hi !!!!!

How to use global variables in ExtJs 4. please give an example.

Thank you.

[westy]

Globals! Generally a bad idea.

If I were you I'd wrap up the variables I needed to share in a singleton.

Ext.define('MySharedData', {
    singleton: true,

    foo: 'bar',
    meh: 42
}); 

Can then access using MySharedData.foo, for instance.

HTH,
Westy

[rmdismail]

Thank you

[mitchellsimoens]

Globals! Generally a bad idea.

If I were you I'd wrap up the variables I needed to share in a singleton.

Ext.define('MySharedData', {
    singleton: true,

    foo: 'bar',
    meh: 42
}); 

Can then access using MySharedData.foo, for instance.

HTH,
Westy

Fantastic suggestion! Rep up!

[LaZag]

Hi,
I would use this way to manage global variables but i have a problem with store definition.

My global variables definition :

Ext.define('EM.Global', {
    singleton: true,
    urlGetData: 'server/getData.php',
    imgLogoSite: 'obj/images/site/logo.gif'
}); 

I add Requires in my Ext.application :

Ext.application({
    requires: ['EM.Global',
        'Ext.container.Viewport'],
    name: 'EM',
    appFolder: 'app',
    autoCreateViewport: true,
    (...) 

I can use EM.Global.imgLogoSite in a View and it's ok.
But when i add in Ext.application store which use EM.Global.urlGetData for the url config, i have an error : EM is not defined (in Firefox):

Ext.application({
    requires: ['EM.Global',
        'Ext.container.Viewport'],
    name: 'EM',
    appFolder: 'app',
    autoCreateViewport: true,
    stores: ['Users'],
    (...) 

And in Store :

Ext.define('EM.store.Users', {
    extend: 'Ext.data.Store',
    requires: ['EM.Global',
        'EM.model.User'],
    model: 'EM.model.User',
    proxy:{
        type:'ajax',
        url: EM.Global.urlGetData,
        reader: {
   (...) 

I don't undestand where is my mistake.

Thank you for your help.

LaZag
(ExtJS 4.1.1a)

[skirtle]

The line:

url: EM.Global.urlGetData,

is being evaluated before Ext.define is called.

Keep in mind that Ext.define is just a JavaScript function. The second argument passed to that function is an anonymous JavaScript object describing the class.

It is effectively equivalent to the following:

var config = {
    ...
    proxy:{
        url: EM.Global.urlGetData,
        ...
    }
};

Ext.define('EM.store.Users', config);

The requires block never gets a chance.

The simplest solution is just to make sure your globals get loaded first, maybe using a script tag. A more painful alternative is to move parts of the class definition into a callback function (third argument of Ext.define).

[LaZag]

Thank you.

[westy]

The simplest solution is just to make sure your globals get loaded first, maybe using a script tag. A more painful alternative is to move parts of the class definition into a callback function (third argument of Ext.define).

Or can surround your Ext.define in an Ext.require call, and define the class in the callback.

[sencha.user]

Or can surround your Ext.define in an Ext.require call, and define the class in the callback.

Can you please elaborate it with your above code?

[westy]

Something like:

Ext.require([
    'EM.Global'
],
function() {
Ext.define('EM.store.Users', {
    extend: 'Ext.data.Store',
    requires: ['EM.Global',
        'EM.model.User'],
    model: 'EM.model.User',
    proxy:{
        type:'ajax',
        url: EM.Global.urlGetData,
        reader: {
   (...) 
});

We use this trick where a class requires another class in its actual definition.
It should be avoided if possible, but can be used when necessary.

Another way would be to define your proxy in the constructor, since requires will be loaded before a method is callable.