Under ExtJS 4 is there a way to load external components?

Question

I am trying to set up my ExtJS 4 project so I have three top level applications, for example,

/foo/app.js
/bar/app.js
/baz/app.js

Each 'top level' application is a separate ExtJS application, each with their own loaders. There are some cases were I will have general components that I want to share between all three applications, so I have /components top level directory.

If I have a component name say ComponentA,

/components/componenta.js

How would I go about getting ComponentA into all three applications, so it could referenced or extended by the individual application?

Answer 1

You can add this same loader into each of the applications app.js file.

Ext.Loader.setPath('Common', '../components/');

Then give your common components the same namespace when you define them and place them in the components top level folder.

componenta.js

Ext.define('Common.componenta', {
    extend: 'Ext.panel.Panel',
    title: 'Component A'
});

Then the Common namespace will be available for you to extend in each application

Ext.define('Foo.panel', {
    extend: 'Common.componenta',
    title: 'Foo Panel'
});