Introduction to ExtJS (01)

Today is the first day of learning extJS, so make a transcript in this article.
The online definition of extjs is like this.
ExtJS
ExtJS
Not much to say, extjs is a UI component, which probably means that you don’t need to write html, css and other codes to directly apply ExtJS components. . . . . .
And since version 6.0, extJS has been synchronized on the computer and mobile terminals, so there is no need to worry about some problems.

The first step is to create a web project project (for the first time, I only get helloworld)

The second step is to import the necessary components of ExtJS (file copy and paste)

1.1 Delete the files in the web and the index file after creation.
Insert picture description here
1.2 Then import some files needed in extjs. For example
, it is
usually called from the files in the build (it is the pc version), where
classic is the theme and local in classic is the font.
The theme file in classic is a style file, such as:
classic/theme-gray/resources/theme-gray-all.css
build, ext-all.js is the core library, the compressed js file, ext-all-debug.js It is a complete JS file that can be debugged.

So I want to import the following files:
1.ext-all.js
2. A theme folder in
classic 3. The font file locale-zh_CN.js in the theme folder

1.3 Create a new hello.html file in the web directory
Insert picture description here

hello.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>

<!--引入extjs样式文件-->
<link rel="stylesheet" type="text/css" href="ext/classic/theme-gray/resources/theme-gray-all.css">

<!--引入extjs核心库-->
<script src="ext/ext-all.js"></script>
<script>
    Ext.onReady(function (){
     
     

        Ext.MessageBox.alert("提示：","hello world！！！");
    })


</script>
</body>
</html>

result:
Insert picture description here

panel.html
Insert picture description here

The project file is shared , follow me and contact me to make progress, learn and improve together! ! ! !