Search code examples
javascriptextjs4

How to share objects/methods between controllers without circular references?


Pretty straightforward question. Currently, what I do when I need to access objects' methods throughout most of the application, I do this in app.js

Ext.define('Utils', {
    statics: {
        myMethod: function() {
            return 'myResult'; 
        }
    }
});

This works, but when I build the application, I get a warning about a circular reference (app.js of course needs all the other controller classes, but then said classes refer back to app.js).

I thought of using a package including a .js file that has all the objects/methods, but sometimes, within these methods I'll need access to the Ext namespace so that won't work.

Is there any better way to do this ?

Thanks!


Solution

  • You should not define the class Utils inside app.js. Each Ext.define statement should be in it's own file. Also the classname should be prefixed with your app name.

    Ext.define('MyApp.Utils', {
        statics: {
            myMethod: function() {
                return 'myResult'; 
            }
        }
    });
    

    should therefore be found in the file app/Utils.js. When compiling your sources into a compiled app.js, Sencha Cmd will take care of the proper ordering in the final file. The requires and uses directives give you enough flexibility to define any dependences between your classes.

    Read all the docs about MVC to get a clear understanding.