In the previous section, we created our first Ext JS application using Sencha Cmd. You have seen that it created files and folders to get started. Here, you will learn about important files and folders for an Ext JS Application.
Sencha Cmd created following files and folders while generating sample Ext JS application. Every Ext JS applications follow the same folder structure.
Let's understand the significance of each files and folders.
The app folder is important folder that includes all the custom files and folders of your application as shown below.
As you can see in the above figure, app folder contains model, store and view folder. You can create all your model classes in model folder, store classes in store folder. The view folder can contains separate folders for each views you create for your application. For example, the above view folder contains 'main' folder which includes MainController.js and MainModel.js which is ViewController and ViewModel respectively. The actual views will be created either in classic or modern folders. You will learn about it later in this section.
The app folder also contains Application.js file which contains global settings for your application such as app name, shared stores, models etc. Every Ext JS application starts with an instance of the Application Class. This class is intended to be launch-able by app.js as well as instantiable for testing.
sencha app build.
Ext JS includes two types of toolkit: classic and modern. The classic folder contains all your views that will be rendered for desktop browser or tablet.
The following figure shows the classic folder that includes views for the desktop and tablets.
As you can see in the above figure, folders inside classic folders follow the same structure as view folder under app folder. So, app -> view -> main contains ViewController and ViewModel which will be shared between classic and modern toolkit and classic -> view -> main contains views to be rendered in desktop and tablets.
The ext is a sdk folder which contains all the necessary files and folders for Ext JS 6 framework.
As mentioned above, Ext JS includes classic and modern toolkits. So, modern folder contains views for the mobile devices. It will includes the same folder structure as classic if you build universe application for all the devices.
The overrides folder includes all your code that has overridden default behaviour of Ext JS. For example, if you want to override Ajax functionality then you need to create a class inside overrides folder so that Sencha Cmd will build it automatically.
The packages folder includes your local or third party packages which you can share with Sencha community. This allows you to share your features with other application as well as Sencha community.
The resources folder can contains resource files such as custom images, css etc. for your application.
Ext JS uses sass folder for its themes files.
The app.js is a gateway to your Ext JS application. It creates and launches an instance of Application.js in app.js file. It also can be used to designate a container class using mainView config so that we can use any class as Viewport.
Ext Js uses Microloader to load application resources described in the app.json file. This replaces the need to add them to index.html. Sencha Cmd uses app.json to build an application. With app.json, all of the application meta-data exists in a single location.
This file is used by Sencha cmd to build an application when you execute
sencha app build command. It also allows you to avoid changes to ./sencha folder when you want to add some extra functionality to your build process.
The classic.json file includes paths for all your views and other resources that will be used to render your application in desktop and tablet devices. The modern.json file includes paths for resource files for mobile devices.
The index.html is a root HTML file of Ext JS application. The following is the content of index.html file.
As you can see above, it includes microloader so that Sencha Cmd can build your application. Do not remove or change this.