1. #1
    Sencha User
    Join Date
    Jun 2011
    Location
    Coimbatore, India
    Posts
    25
    Vote Rating
    0
    rmdismail is on a distinguished road

      0  

    Default how to use global variable in Extjs 4

    how to use global variable in Extjs 4


    Hi !!!!!

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

    Thank you.

  2. #2
    Ext JS Premium Member westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    928
    Vote Rating
    48
    westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough

      2  

    Default


    Globals! Generally a bad idea.

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

    PHP Code:
    Ext.define('MySharedData', {
        
    singletontrue,

        
    foo'bar',
        
    meh42
    }); 
    Can then access using MySharedData.foo, for instance.

    HTH,
    Westy
    Product Architect
    Altus Ltd.

  3. #3
    Sencha User
    Join Date
    Jun 2011
    Location
    Coimbatore, India
    Posts
    25
    Vote Rating
    0
    rmdismail is on a distinguished road

      0  

    Default


    Thank you

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by westy View Post
    Globals! Generally a bad idea.

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

    PHP Code:
    Ext.define('MySharedData', {
        
    singletontrue,

        
    foo'bar',
        
    meh42
    }); 
    Can then access using MySharedData.foo, for instance.

    HTH,
    Westy
    Fantastic suggestion! Rep up!
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Jul 2009
    Posts
    12
    Vote Rating
    0
    LaZag is an unknown quantity at this point

      -1  

    Default


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

    My global variables definition :
    PHP Code:
    Ext.define('EM.Global', {
        
    singletontrue,
        
    urlGetData'server/getData.php',
        
    imgLogoSite'obj/images/site/logo.gif'
    }); 
    I add Requires in my Ext.application :
    PHP Code:
    Ext.application({
        
    requires: ['EM.Global',
            
    'Ext.container.Viewport'],
        
    name'EM',
        
    appFolder'app',
        
    autoCreateViewporttrue,
        (...) 
    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):
    PHP Code:
    Ext.application({
        
    requires: ['EM.Global',
            
    'Ext.container.Viewport'],
        
    name'EM',
        
    appFolder'app',
        
    autoCreateViewporttrue,
        
    stores: ['Users'],
        (...) 
    And in Store :
    PHP Code:
    Ext.define('EM.store.Users', {
        
    extend'Ext.data.Store',
        
    requires: ['EM.Global',
            
    'EM.model.User'],
        
    model'EM.model.User',
        
    proxy:{
            
    type:'ajax',
            
    urlEM.Global.urlGetData,
            
    reader: {
       (...) 
    I don't undestand where is my mistake.

    Thank you for your help.

    LaZag
    (ExtJS 4.1.1a)

  6. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,605
    Vote Rating
    326
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      2  

    Default


    The line:

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

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

  7. #7
    Sencha User
    Join Date
    Jul 2009
    Posts
    12
    Vote Rating
    0
    LaZag is an unknown quantity at this point

      0  

    Default


    Thank you.

  8. #8
    Ext JS Premium Member westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    928
    Vote Rating
    48
    westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough

      0  

    Default


    Quote Originally Posted by skirtle View Post
    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.
    Product Architect
    Altus Ltd.

  9. #9
    Sencha User
    Join Date
    Jul 2012
    Posts
    107
    Vote Rating
    -1
    sencha.user is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by westy View Post
    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?

  10. #10
    Ext JS Premium Member westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    928
    Vote Rating
    48
    westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough

      1  

    Default


    Something like:
    Code:
    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.
    Product Architect
    Altus Ltd.