ExtJS — Organizing files under app/

Question

We have application classes X, Y, and Z where Y extends X, and Z extends Y.

X is in file X.js. Y is in file Y.js. Z is in file Application.js (i.e. the standard ExtJS).

We also have a large company with developers of varying skills, some who we don't want to directly expose X.js and Y.js.

For illustration, assume these are the files:

X.js:

Ext.define('MyApp.X', {
    extend: 'Ext.app.Application',
    name: 'X',
    launch: function () {
        // Cool stuff
    }
    // More cool stuff
});

Y.js:

Ext.define('MyApp.Y', {
    extend: 'MyApp.X',
    name: 'Y',
    launch: function () {
        // Call the parent X to set up
        this.callParent(arguments);
        // Cool stuff
    }
    // More cool stuff
});

Application.js:

Ext.define('MyApp.Z', {
    extend: 'MyApp.Y',
    name: 'Z',
    launch: function () {
        // Call the parent Y to set up
        this.callParent(arguments);
    }
});

The app/ directory looks like this:

app/
    model/
    store/
    view/
        X.js
        Y.js
        Application.js

The company would like X.js and Y.js out of direct sight, so that basically other developers will see just Application.js:

app/
    model/
    store/
    view/
    Application.js

So a few questions:

1) Can I put X.js and Y.js somewhere else? They just need to be out of direct view, so there's less chance of developers modifying them. I thought of "app", but I'm not sure whether that has "special meaning" to ExtJS, and it looks kind of silly with app/app/:

app/
    app/
        X.js
        Y.js
    model/
    store/
    view/
    Application.js

2) Is there a recommended name for folders containing classes derived from Ext.app.Application?

3) Can I put them in a "hidden" folder, e.g. one starting with "."?

app/
    .js/
        X.js
        Y.js
    model/
    store/
    view/
    Application.js

4) Do I need to add any config information to the build process?

Answer 1

First. The best solution for you would be probably to move these things into separate package http://docs.sencha.com/cmd/6.5.3/guides/cmd_packages/cmd_packages.html as it was pointed out. It could be little bit time demanding to do so. But because I don't really understand your situation let me talk about the way you would like to have it.

1) Can I put X.js and Y.js somewhere else? They just need to be out of direct view, so there's less chance of developers modifying them.

You can put them anywhere you want. But I don't understand the point about other people "modifying" them. Just put a comment on top of these files that they can't edit them. And because you are using version control (right?) the modification to them will never go pass the code reviews.

2) Is there a recommended name for folders containing classes derived from Ext.app.Application?

I am not aware of that. You can name it anyway you want. But see bellow my note about class naming and their folders.

3) Can I put them in a "hidden" folder, e.g. one starting with "."?

Yes you can. But keep in mind that .folders are not really hidden. It works only on Linux and Mac by default. Not on Windows. And if I am not mistaken most IDEs will show these folders anyway. It's implemented just in file explorers that these files are "hidden".

4) Do I need to add any config information to the build process?

It depends. If you have everything under the app folder, it should work out of the box for you. Otherwise you might need to do edits to app.json file.

---

So let's assume you would like to have them in a different place. Not even in the app folder. Let's assume the folder named "hidden" which is directly in the project root.

MyApp/
   .hidden/
   app/
   ext/
   ...

In this folder we can have any class or files as necessary.

The MyApp/app/Application.js file would than look like this:

Ext.define('MyApp.Application', {
    extend: 'MyApp.Master',

});

To make this work take a look at the MyApp/app.json file which is the main "settings" file for any Sencha Cmd project. There we need to add note about class path for Cmd to be able to find these files:

"classpath": [
    "app",
    ".hidden"
],

Now the project should build without any problems. If you want to do any other modifications take a look also into app.js which is the main entry point into your project.

I tested this with Ext 6 Classic and Cmd 6.5.1

Naming conventions:

When specifying classes, the dots in the classname should also define the file location. So when you have this class: MyApp.view.main.Main one would expect to find it in the folder MyApp/app/view/main/Main.js but it's not necessary, you can have them all in one folder and Cmd will handle it for you. But I would expect than when you will start moving files into some "hidden" folders it won't be that clear anymore.