Correct folder structure for extjs MVC

Question

I would like to know the most correct best practice in laying out a folder structure for a MVC application in Extjs (specifically 4.x).

There are many examples scattered around, but there seems to be no general consensus.

In general I have seen a lot of examples that are structured like this :

http://www.slideshare.net/senchainc/structuring-your-sencha-touch-application

This approach somewhat horrifies me, as having the same file name for a view, controller, model, store etc.. (instead of AccountMode, AccountController, AccountView) can only lead to confusion. I am currently in a project that uses this methodology and it really stinks. My productivity has gone down because it is not easy for me to navigate through the code if everything has the same name. I spend 5 minutes staring at an 'Account' file, only to realise that I was staring at the wrong 'Account' file.

Secondly, having done MVC for over 10 years, I have always held my View and Controller close together. If the View and Controller have a 1 to 1 relationship then they would always live together in the same folder. This is a more OO approach as there is less inter-package (ie folder ) dependency. Folders should have strong inter-dependencies between classes inside them, but weak inter-dependencies to classes in other folders.

Is there a best practice out there for extjs folder structures using MVC?

Alexander Alexander · Accepted Answer · 2016-10-19T09:43:13

First of all, I had the same problem you have. I had a view/Configuration.js and a store/Configuration.js and a model/Configuration.js and a controller/Configuration.js. The only solution was to give them better names:

view/ConfigView.js
store/ConfigStore.js
model/ConfigModel.js
controller/ConfigController.js

I know that the second part of the name is redundant, but it helps me to always know which file I am working on.

But is it best practice?

Since ExtJS is made by Sencha, "best practice" normally is "what Sencha does". But what are they doing?

In the ExtJS framework they don't use MVC, they put everything into a component (view): The templates, the logic, bugfixes etc. But then, it is not an application, it is a framework
In their KitchenSink examples, they don't use MVC, only View, Model and Store. But then, this is not an enterprise application, it is a set of small examples.
Has anyone ever seen the source of a Sencha-built enterprise ExtJS application? I haven't.

So, as a last resort, let's have a look at the sample application delivered with Sencha Cmd.

In Cmd 6.0.1, which is the version I am using, the sample app is an MVVM app and the naming "schema" is as follows:

Ext.define('{appName}.view.main.Main', {
    extend: 'Ext.tab.Panel',

Ext.define('{appName}.view.main.List', {
    extend: 'Ext.grid.Panel',

Ext.define('{appName}.view.main.MainController', {
    extend: 'Ext.app.ViewController',

Ext.define('{appName}.view.main.MainModel', {
    extend: 'Ext.app.ViewModel',

Ext.define('{appName}.store.Personnel', {
    extend: 'Ext.data.Store',

So, to summarize: they deliver no file name duplicates, and view controllers / view models are in the view folder, not the controllers folder.

Not sure whether that is best practice, but at least the scheme I use is not contradicting their sample app. (Note that the sample app gives us no clue about file names of models vs stores and controllers vs views.)

Correct folder structure for extjs MVC

1 Answers