Ext JS Application Structure:

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.

app

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.

build

The build folder contains markup page, JavaScript code and themes when you build your application using Sencha Cmd command sencha app build.

classic

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.

ext

The ext is a sdk folder which contains all the necessary files and folders for Ext JS 6 framework.

modern

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.

overrides

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.

packages

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.

resources

The resources folder can contains resource files such as custom images, css etc. for your application.

sass

Ext JS uses sass folder for its themes files.

app.js

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.

app.json

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.

bootstrap.css, bootstrap.js, and bootstrap.json

Ext JS supports dependency management using requires feature. These bootstrap files contains the information about the minimum CSS and JavaScript code needed to run your application using dependency management.

build.xml

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.

classic.json and modern.json

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.

index.html

The index.html is a root HTML file of Ext JS application. The following is the content of index.html file.

<!DOCTYPE HTML>
<html manifest="">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>MyExtJSApp</title>

    
    <script type="text/javascript">
        var Ext = Ext || {}; // Ext namespace won't be defined yet...

        // This function is called by the Microloader after it has performed basic
        // device detection. The results are provided in the "tags" object. You can
        // use these tags here or even add custom tags. These can be used by platform
        // filters in your manifest or by platformConfig expressions in your app.
        //
        Ext.beforeLoad = function (tags) {
            var s = location.search,  // the query string (ex "?foo=1&bar")
                profile;

            // For testing look for "?classic" or "?modern" in the URL to override
            // device detection default.
            //
            if (s.match(/\bclassic\b/)) {
                profile = 'classic';
            }
            else if (s.match(/\bmodern\b/)) {
                profile = 'modern';
            }
            else {
                profile = tags.desktop ? 'classic' : 'modern';
                //profile = tags.phone ? 'modern' : 'classic';
            }

            Ext.manifest = profile; // this name must match a build profile name

            // This function is called once the manifest is available but before
            // any data is pulled from it.
            //
            //return function (manifest) {
                // peek at / modify the manifest object
            //};
        };
    </script>
    
    
    <!-- The line below must be kept intact for Sencha Cmd to build your application -->
    <script id="microloader" data-app="fec7a5cc-a11f-4421-b84d-127e09d0bdf7" type="text/javascript" src="bootstrap.js"></script>

</head>
<body></body>
</html>

As you can see above, it includes microloader so that Sencha Cmd can build your application. Do not remove or change this.