Global variable sencha touch 2.1

Question

Hi I need to define a global variable to use in anywhere of my application. I declare a global variable baseUrl in my app.js. Please see below app.js

    //<debug>
Ext.Loader.setPath({
    'Ext': 'touch/src',//Location of the sencha touch source files
    'bluebutton': 'app',



});
//</debug>



Ext.application({
    name: 'bluebutton',//Application Path, all classes in you app. For eg blueButton.view.Main.case sensitive

    views: ['Main',

    'BlueButton.CouponMain',
    'BlueButton.CouponList',
    'BlueButton.CouponList2',
    'BlueButton.CouponList3',

    'BlueButton.TransactionMain',


    ],



   stores : [
   'BlueButton.GlobalVariable',


   ], 

    models : ['BlueButton.GlobalVariable',
    'BlueButton.MemberDetail',


     ],



    controllers: ['Main', 
    'BlueButton.MemberList', 


    ],



    requires: [
        'Ext.MessageBox',

    ],

    icon: {
        '57': 'resources/icons/Icon.png',
        '72': 'resources/icons/Icon~ipad.png',
        '114': 'resources/icons/[email protected]',
        '144': 'resources/icons/[email protected]'
    },

    isIconPrecomposed: true,

    startupImage: {
        '320x460': 'resources/startup/320x460.jpg',
        '640x920': 'resources/startup/640x920.png',
        '768x1004': 'resources/startup/768x1004.png',
        '748x1024': 'resources/startup/748x1024.png',
        '1536x2008': 'resources/startup/1536x2008.png',
        '1496x2048': 'resources/startup/1496x2048.png'
    },


    //--Global value--
    baseUrl: 'http://192.168.251.108:8080',
    //--Global value--



    launch: function() {

        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();


        // Initialize the main view

             var LoginLS = Ext.getStore('LoginLS');
             LoginLS.load();

             var record =  LoginLS.getAt(0);



            if(record != undefined){
                var sessionId = record.get('sessionId');
               if (sessionId !=undefined){
                        var mainView = Ext.getCmp("mainview");
                        if(!mainView){
                        mainView = Ext.create('bluebutton.view.Main');
                        }

                        Ext.Viewport.setActiveItem(mainView);  
               }
               else
               {
                        var loginView = Ext.getCmp("loginview");
                        if(!loginView){
                        loginView = Ext.create('bluebutton.view.Login');
                        }

                        Ext.Viewport.setActiveItem(loginView); 
                }
            }
            else{
                      var loginView = Ext.getCmp("loginview");
                        if(!loginView){
                        loginView = Ext.create('bluebutton.view.Login');
                        }

                        Ext.Viewport.setActiveItem(loginView); 



//                        //--Disable this line --
//                          var mainView = Ext.getCmp("mainview");
//                        if(!mainView){
//                        mainView = Ext.create('bluebutton.view.Main');
//                        }

//                        Ext.Viewport.setActiveItem(mainView);  
//                         //--Disable this line --





               }




//        Ext.create('bluebutton.view.TopMenuList');

    },

     init: function () {
        this.callParent(arguments);

    },


    onUpdated: function() {
        Ext.Msg.confirm(
            "Application Update",
            "This application has just successfully been updated to the latest version. Reload now?",
            function(buttonId) {
                if (buttonId === 'yes') {
                    window.location.reload();
                }
            }
        );
    }
});

model.js

Ext.define('bluebutton.model.BlueButton.CouponList', {
    extend: 'Ext.data.Model',
    config: {
        idProperty: 'couponId',
        fields: [
            {  name: 'couponId'  },
            {  name: 'couponName'  },
            {  name: 'description'  },
            {  name: 'amount'  },
            {  name: 'couponType'  },

            {  name: 'merchant_bbID'  },
            {  name: 'sessionId'  },
            {  name: 'deviceId'  },



        ],

        proxy: {
            type: 'rest',
            url: bluebutton.app.baseUrl +'/WebCommon/rest/BBWebService/getCouponList',


            actionMethods: {
                create: 'POST',
                read: 'GET',
                update: 'PUT',
                destroy: 'DELETE'
            },


                      noCache: false, // get rid of the '_dc' url parameter

                    extraParams: {
                    sessionId: "1",
                      merchant_bbID: "merchant1",

                },


//            timeout:1000,
//            listeners: {
//                exception: function(proxy, response, operation) {
//                     alert("Connection Problem");
//                       Ext.Viewport.setMasked(false); // hide the load screen
//                       
//                  }
//               },

            reader: {
                type: 'json',
                 rootProperty: 'couponList'

            },

            writer: {
                type: 'json',

            },
        }



    }

});

Then I used basedUrl in my model.js. It can work when I use browser to view. But when I use sencha app build testing to compile my apps,

I used browser to open and it showed me an error message Uncaught TypeError: Cannot read property 'baseUrl' of undefined . Any idea?

Answer 1

When you make the production build, all the files in your sencha app will be minified and thus the global variables may lose the context.

There are several ways to declare global variables in your sencha app

-> 1st Approach

Declare a global variables in util/Config.js

util/Config.js

Ext.define('APP.util.Config', { 
    singleton : true,
    alias : 'widget.appConfigUtil',
        config : {
        baseUrl : 'xx.xx.xx.xxx',
    },
    constructor: function(config) {
        this.initConfig(config);
        this.callParent([config]);
    }
})  

Changes in app.js

requires : [ 'App.util.Config']

Now, you can use it in your application like as below.

var baseUrl = App.util.Config.getBaseUrl();

---

2nd Approach->

Declare global variables in your .js files before the class definition

var baseUrl;

Ext.define('classname,{Other things });