How to setup a Sencha ExtJS project currently built for desktop also work for mobile?

Question

We have been developing using the default classic build descriptor so far to build dynamic web pages for desktop.

Now we need on the same application to work with mobile but not necessarily have the same home page on desktop or mobile load.

The user visits the page http://example.com using a desktop browser. Then he sees the view layout for the desktop
The user visits the page http://example.com using a mobile browser. Then he sees the view layout for the mobile (could be a total different view file)

We found this page inside documentation without much help: https://docs.sencha.com/extjs/6.0/core_concepts/tablet_support.html

Actually a page that is currently working fully ok on desktop when switching to the Chrome Simulator (setting for example the Apple iPad simulator) we get the following errors in the console:

We need the few steps that are necessary to setup it correctly.

Answer 1

When you create a brand new application in ExtJS 6, you acess sencha cmd and call: "sencha generate app NameApp ../folderApp"

Then, the following structure is created: Click here to see the structure

I don't know about the structure your code was created, but in order to work on desktop and mobile devices, it need to be in this structure generated by sencha cmd.

After to get this structure (generate a new application is a better practice for that) you need to put the "rigth model of extjjs 6.0" in your mind. ExtJS allow MVC or MVVM architetures. MVC architeture is basically controlled by a grand controller that can control all components of your application. In other hand, MVVM architeture have a controller for each view - it is instanciated when view is instanciated, and destroyed when view is destroyed. This architeture is recommended in ExtJS, especially in the lasts versions.

You have now to transfer the code done in your actual aplication to the new application and architeture. Put all your view structure in NameApp > classic > src > view. Open a new folder for each view. This folder should contain the view, and the controller for this view. For example, let's create a list view:

NameApp > classic > src > view > list > List.js

NameApp > classic > src > view > list > ListController.js

And so on...

Now you can create mobile views and controllers separated, on mobile > src > view folder, following the same model followed in classic, but you have to use components from mobile toolkit of course.

Until here, you have a separated mobile and classic app in the same code. But you can use the power of ExtJS 6 by extend generic classes from app folder, in order to optimize your code. For example, you can create a generic controller for an specific view, that will be extended in classic and modern folders:

NameApp > app > view > list > ListControllerGeneric.js

Ext.define('NameApp.app.view.list.ListControllerGeneric', {
    extend: 'Ext.app.ViewController',
    //here you put code using in modern and classic both
});

NameApp > classic > src > view > list > ListController.js

Ext.define('NameApp.app.view.list.ListController', {
    extend: 'NameApp.app.view.list.ListControllerGeneric',
    //here you put code using in classic only
});

NameApp > modern > src > view > list > ListController.js

Ext.define('NameApp.app.view.list.ListController', {
    extend: 'NameApp.app.view.list.ListControllerGeneric',
    //here you put code using in modern only
});

One important thing to avoid crashes is to create all the views from the classic folder into the modern folder even if you do not actually use them on mobile. In addition when using both desktop and mobile you need sencha app watch modern to test both classic and modern but you need sencha app build to build both (or sencha app build to build specific).

I hope this explanation can be useful for you. Thanks