Creation of a global, persistent object into Extjs

Question

Good day all. I'm into a big project that uses EXTjs (i guess it's 4.0), the project is huge and have several years behind.

I'm not into Extjs so I'm trying to learn what to do and how to do it, and my new task is to create a persistent, global object, available into the whole application in which I need to store some information that are used in different parts of the project (let's say for example that the user can set a particular property of this object to "true" while doing some actions and this "true" it will be used into another viewcontroller to enable some functions, things like this).

so, I've created a new file called userJsonMainModel.js :

Ext.define('Tac3.userJsonMainModel', {
    extend: 'Ext.data.Model',

    constructor: function() {
        var userJsonMainModel = this;
        userJsonMainModel.callParent(arguments);
        userJsonMainModel.data.tmp = {};

    },
    testProperty:{foo:"bar"},
    testMethod: function (){
        console.log("testFunction called");

    }
});

and in Application.js :

requires: [
        ...
        'Tac.userJsonMainModel'
    ],

    stores: ['Countries', 'Kpis', 'Dimensions'],

    autoCreateViewport: false,

    init: function() {
        var controller = this
        Ext.tip.QuickTipManager.init();
        Ext.setGlyphFontFamily('FontAwesome');
        var userJsonMainModel = controller.createUserJsonMainModel();
        console.log("into init: ", this.userJsonMainModel.testProperty);

...

createUserJsonMainModel: function() {
        var controller = this;

        controller.userJsonMainModel = Ext.create('Tac3.userJsonMainModel', {
            controller: controller
        });
        console.log("check if the jsonmainmodel exist ",controller.userJsonMainModel.testProperty);

    },

this is actually working, now the second step is to access the same object from another view (or its viewcontroller), this is what I've done into a a viewController:

Ext.define('Tac3.view.udesign.UdesignController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.udesign',

    init: function(view) {
        ...
        console.log("into init: ", this.userJsonMainModel.testProperty);

    }

and this is actually throwing a:

Uncaught TypeError: Cannot read property 'testProperty' of undefined

I was pretty sure the objects defined into application.js would be globally accessible, but I guess I'm wrong, or doing something in a wrong way.

since I've found quite no examples on this topic (which is probably because it is not a standard way to do this), I'd like to ask what I'm doing wrong?

Answer 1

Just define a class and require it in your application:

Ext.define('MyApp.Globals', {
    singleton: true,
    foo: 100,
    bar: 'baz'
});