Preamble: extjs is an OOP language, which can be learned according to the process of learning Java, and can be learned by analogy to the image interface JWT in Java.

tool

These are tools provided by sencha for Ext JS application development, mainly for production level.
Sencha Cmd
Sencha CMD is a tool that provides Ext JS code minification, scaffolding, production build generation.

Sencha IDE Plugins

Sencha IDE plugin which integrates Sencha framework into IntelliJ, WebStorm IDE. This helps to increase developer productivity by providing features such as code completion, code inspection, code navigation, code generation, code refactoring, template creation, and spell checking.

Sencha Inspector

Sencha Inspector is a debugging tool that helps debuggers debug any issues while developing.

Environment build

extjs6.0 version is too old,

Baidu network disk download address:
ext-6.0.0-gpl.zip_free high-speed download|Baidu network disk-unlimited sharing

Version number: ext-6.0.0

ext-6.0.0/buildFound under:

css file

ext-6.0.0/build/classic/Find multiple sets of themes under

environmental test

The index.html code is as follows

<!DOCTYPE html>
<html>
   <head>
      <link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
      <script src="./ext-6.0.0/build/ext-all.js"></script>
      <script type="text/javascript">
         Ext.onReady(function() {
         Ext.create('Ext.Panel', {
            renderTo: 'helloWorldPanel',
            height: 100,
            width: 200,
            title: 'Hello world',
            html: 'First Ext JS Hello World Program'
            });
         });
      </script>
   </head>
   <body>
      <div id="helloWorldPanel"></div>
   </body>
</html>

Ext.js naming convention

Capitalize the first letter of the class name

constants in all caps

Other first letters are lowercase, multiple words, all uppercase after the second letter

Ext.js Architecture

Updated 2022-05-19 11:18

Ext JS follows the MVC/MVVM architecture.

MVC - model (model) - view (view) - controller (controller) architecture (version 4)

MVVM - Model (model) - View (view) - Model View (Viewmodel) (version 5)

first hello world

step 1

Create the index.htm page in the editor of our choice. Include the required library files in the head section of the html page as described below:

index.html

<!DOCTYPE html>
<html>
   <head>
    <link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
    <script src="./ext-6.0.0/build/ext-all.js"></script>
      <script type="text/javascript">
         Ext.onReady(function() {
         Ext.create('Ext.Panel', {
            renderTo: 'helloWorldPanel',
            height: 200,
            width: 600,
            title: 'Hello world',
            html: 'First Ext JS Hello World Program'
            });
         });
      </script>
   </head>
   <body>
      <div id="helloWorldPanel" />
   </body>
</html>

Explanation

The Ext.onReady() method will be called when Ext JS is ready to render the Ext JS element.
The Ext.create() method is used to create objects in Ext JS, here we create an object of a simple panel class Ext.Panel.
Ext.Panel is a predefined class in Ext JS for creating panels.
Each Ext JS class has different properties to perform some basic functions.

The Ext.Panel class has the following various properties:

renderTo is the element that this panel must render. \'helloWorldPanel\' is the div id in the Index.html file.
The Height and Width properties are used to provide custom dimensions for the panel.
The Title attribute is to provide a title for the panel.
Html attribute is the html content to be displayed in the panel

step 2

Open the index.html file in a standard browser and you will get the following output on the browser.

Getting started with ext.js