Guide applies to: modern

Understand the generated app

Quite a few files and folders get created in the project folder, but the good news is that a lot of it is boiler plate and you rarely if ever have to change them.

1.index.html

By default any Ext JS application is generated as an SPA, a single page application. As such that single page is continually re-rendered by the JavaScript of your Ext JS components in the browser. As index.html is the default document in a directory to be rendered in the browser, that is where all our components will be transpiled to be the html elements the browser can understand.

2.generatedFiles/bootstrap.js

While this file is not to be edited, it is important to recognize its role in creating your app. Bootstrap.js has the responsibility of being the single JavaScript file referenced from index.html that loads all the other JavaScript files necessary for the functionality of the app. Limiting the app’s default JavaScript file to just one improves its initial performance.

3.app.js

It is extending Application.js. Ultimately when your app is released to production all JavaScript that pertains to your app will be combined into this app.js file.

4.Application.js

Application.js is the heart of your application. You can find Application.js at the same level as your “view”, “store”, and “model” folders. It provides a handy method called launch, which fires when your application has loaded all of its required classes.

5.app.json

This is a JSON file detailing various global configurations of your application:

  • The theme

  • The toolkit

  • The classpath

  • External libraries

  • External CSS files

  • etc.

5.the view package

The sub directories of app are where the majority of your work will be done, with the namespace of your classes mapping to the src directory of desktop (It is assumed in the app template we chose that it will be for a desktop application). There is a default view package called main providing the following integrated files:

  • The MainView: Where the immediate UI elements are presented to the user.
  • The MainWiewModel: the data management for the view, here where the timestamp is updated.
  • The MainViewController: where business logic is detailed in event handlers and lifecycle methods, here responding to the click event of the button.

All of these will be overwritten for the app we will create.

Other files and folders will be added as they are required, but these were the base minimum build you can likely expect in any app