Ext 4.1-如何获得对使用Ext.define（）创建的类的引用

Question

I have a class being created with a method like this:

Ext.define('MY.class.Manager', {
    ....
    ....
    ....
    manageStuff: function(){


    }
}

Originally, I only needed the manageStuff function in one place, so everything was fine. Now though, I have added another class and I need to be able to call the manageStuff function from within the new class.

I have tried to get a reference in the new class:

var ManagerClass = Ext.getClass('MY.class.Manager');

And also:

var ManagerClass = Ext.getClass('class.Manager');

Both return null

Just to be sure that the Manager Class is being defined before I try to get it, I put in print statements:

They read as:

...making manager class
...getting manager class

Looking for any help because I am sure my approach to this problem is not even correct to begin with.

Answer 1

To share behavioral traits between otherwise unrelated classes, use mixins:

Ext.define('MyApp.mixin.Foo', {
    foo: function(bar, baz) {
        alert(bar + ' ' + baz);
    }
});

Ext.define('MyApp.class.Foo', {
    mixins: [
        'MyApp.mixin.Foo'
    ],

    methodThatCallsFoo: function(bar, baz) {
        this.foo(bar, baz); // foo method has been mixed in the
    }
});

This applies to Ext JS 4.x+; bear in mind that in Ext JS 5 this mechanism became even more powerful, see Ext.Mixin doc .

Answer 2

You can make the method globally accessible, so both classes can use it. First, if you don't have a global namespace already, you can create one with Ext using Ext.namespace . In this example, I will make MY be the namespace all your global variables and methods will be contained in, and MY.helper where your helper methods (like manageStuff ) will be contained in.

Ext.namespace(
    'MY',
    'MY.helper',
    // more namespaces inside 'MY' as needed ...
);

And then you can declare you helper method:

MY.helper.manageStuff = function() {
    // do stuff...
};

And now you can use this method (and anything else stored inside MY ) anywhere in your application.

Ext.define('MY.class.Manager', {
    //...
    //...

    someFunctionThatCallsManageStuff: function(){
        MY.helper.managerStuff();
    }
});

Note: in javascript, you can store any variables inside the global namespace, and just call them directly, but I find that can clutter up the global namespace. Instead, I like to have a single variable that contains all my global variables. In this example, your single variable is MY . Then you can add "packages" to it to organize your globals, such as MY.helper .

Note 2: Using Ext.namespace in the example above is equivalent to the following:

//init MY as global variable
MY = {};
// add properties to MY
MY.helper = {};
// add properties to MY.helper
MY.helper.manageStuff = function() {
    // do stuff...
};