ExtJS: Short Practical Introduction (6.2.1)

Writing while learning, so it won't be the best reference you could find out there.
ExtJS is a javascript framework that includes everything you would probably need to have a working webapp out of the box (routing,state management, etc)

Namespace

The first line of each Class is an address of sorts. This "address" is called a namespace. The formula for the full namespace is:

<AppName>.<foldername>.<ClassAndFileName>

You can find your app namespace in "/app.js"
In your sample app, "MyApp" is the AppName, "view" is the folder name, "main" is the sub-folder name and "Main" is the Class and Filename. Based on that information, the framework looks for a file called Main.js in the following location:

// Classic
classic/src/view/main/Main.js
// Modern
modern/src/view/main/Main.js
// Core
// "MyApp.view.main.MainController" shared between toolkits would be located at:
app/view/main/MainController.js
                      

Let's start

Ext.Viewport.add({
  xtype: 'panel',
  html: 'Hello World!'
});
                    
  • Adding an object to the Viewport
  • ..with 2 properties
  • xtype : type of component we are creating (panel,button,grid,etc.)
  • html : the content of the component

Stores

Ext JS stores are the things that house all of your data records. Stores are powerful for data processing.They can easily sort, filter, and query the data stored in them.