Ext 4.1 - Accessing a class instance using Ext.define()

Question

Ext 4.1 - Accessing a class instance using Ext.define()

In my code, I have a class with a method defined like this:

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


    }
}

Initially, the manageStuff function was only needed in one place and everything worked fine. But now, I've added another class where I need to call the manageStuff function from within it.

I attempted to obtain a reference in the new class:

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

As well as:

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

However, both of these attempts returned null.

To confirm that the Manager Class is being defined before attempting to retrieve it, I inserted print statements:

These statements showed:

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

I am seeking assistance because I believe my approach to this issue may be incorrect from the start.

javascript extjs

Answer 1

Answer №1

If you want to share behavioral traits among classes that are not related, consider using 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); // The foo method has been mixed in
    }
});

This practice is applicable to Ext JS 4.x and beyond; it's worth noting that in Ext JS 5, this feature became even more robust. For more information, refer to the Ext.Mixin documentation.

Answer 2

If you want to share behavioral traits among classes that are not related, consider using 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); // The foo method has been mixed in
    }
});

This practice is applicable to Ext JS 4.x and beyond; it's worth noting that in Ext JS 5, this feature became even more robust. For more information, refer to the Ext.Mixin documentation.

Answer 3

Answer №2

To make the method accessible globally for both classes, you can create a global namespace using Ext's Ext.namespace. In this instance, let's define MY as the namespace to contain all global variables and methods, with MY.helper specifically for helper methods like manageStuff.

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

Next, declare your helper method:

MY.helper.manageStuff = function() {
    // perform necessary actions...
};

This method (along with any other data stored in MY) can now be accessed anywhere within your application.

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

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

Please note that in JavaScript, you can directly store variables in the global namespace, but it may cause clutter. Alternatively, use a single variable like MY to organize global variables. For instance, you can create "packages" under MY like MY.helper.

Also, the use of Ext.namespace here is similar to manually initializing MY as a global variable and adding properties to it:

//initialize MY as a global variable
MY = {};
// add properties to MY
MY.helper = {};
// add properties to MY.helper
MY.helper.manageStuff = function() {
    // perform necessary actions...
};

Answer 4

To make the method accessible globally for both classes, you can create a global namespace using Ext's Ext.namespace. In this instance, let's define MY as the namespace to contain all global variables and methods, with MY.helper specifically for helper methods like manageStuff.

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

Next, declare your helper method:

MY.helper.manageStuff = function() {
    // perform necessary actions...
};

This method (along with any other data stored in MY) can now be accessed anywhere within your application.

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

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

Please note that in JavaScript, you can directly store variables in the global namespace, but it may cause clutter. Alternatively, use a single variable like MY to organize global variables. For instance, you can create "packages" under MY like MY.helper.

Also, the use of Ext.namespace here is similar to manually initializing MY as a global variable and adding properties to it:

//initialize MY as a global variable
MY = {};
// add properties to MY
MY.helper = {};
// add properties to MY.helper
MY.helper.manageStuff = function() {
    // perform necessary actions...
};

Ext 4.1 - Accessing a class instance using Ext.define()

Answer №1

Answer №2

Similar questions

How can I retrieve data from a script tag in an ASP.NET MVC application?

Delay the loading of JavaScript libraries and multiple functions that are only executed once the document is

What is the reason that the 'mouseenter' event only applies to the initial element in each round of iteration within a spacebar loop?

There is no 'depto_modules.length' property in this row. How should I go about fixing this issue?

Preventing Content Jumping When Concealing Elements: Tips and Tricks

Guide on retrieving just the time from an ISO date format using JavaScript

Preventing multiple clicks by toggling the HTML tag on and off

When invoking a function that has been returned, the error message "invalid function" is displayed

Creating a map in Typescript initialized with a JSON object

Check the feature that retrieves data from a `json` file

Updating row color according to values obtained from the map function in ReactJs

Turn off client-side hydration in Nuxt.js or Prevent leaking raw data in Nuxt.js

Modify the color of chips when the checkbox is toggled in Materialize CSS

Exploring ways to showcase informational alerts when a link is hovered over by the mouse

What could be the reason behind the button's lack of color change with this particular code?

While running tests on a React project, the `npm test` command is successful, but unfortunately,

Events in EmberJS that occur after the content has been modified

How to filter dependency-injected asynchronous data based on conditions?

Is there a way to update the Angular component tag after it has been rendered?

The absence of responseJSON in the jquery ajax response is causing an issue