Question

I am working on a Sencha Touch application and I am learning it great because I love JavaScript.

This is my app.js

var App = new Ext.Application({
    name: 'My First App',

    //BaseURL: 'http://mydomain.com/testing/first/services/',

    launch: function() {
        this.views.viewport = new this.views.Viewport();

        // this.BaseURL = "http://mydomain.com/testing/first/services/";
    }
});

This is one of my Store.

var newsStore = new Ext.data.Store({
    model: 'News',
    sorters: [{
        property: 'PostedOn',
        direction: 'DESC'
    }],
    proxy: {
        type: 'ajax',
        url: 'http://mydomain.com/testing/first/services/News.php',
        reader: {
            type: 'xml',
            root: 'News',
            record: 'New'   
        }
    },
    getGroupString: function(record) {
        if (record && record.data.PostedOn) {
            return record.get('PostedOn').toDateString();
        }
        else {
            return '';
        }
    },
    autoLoad: true
});

Now the question is, if I can create a global variable across whole application? It’s named BaseURL and I can use it among all Data Stores and when need to change it, I just change this to reflect across whole application.

I need to know two things.

1. How to declare a global application level variable.
2. How to access that variable in views and stores.

Answer 1

I would recommend adding your custom global variables to the application namespace, like this:

Ext.application({
  name: 'MyApp',
  launch: function() { },
  apiToken: 'foo'
});

This way you will be able to access these custom variables after your application has launched:

MyApp.app.apiToken

It works with functions, too:

Ext.application({
  name: 'MyApp',
  launch: function() { },
  apiToken: 'foo',
  getApiToken: function() { return this.apiToken; }
});