ExtJs6.5.2 Beginner--How to create your first project with Sencha cmd

Bo Master himself is also a just beginning to learn the small white, learning new knowledge must be recorded, directly copy their original written training manual, hope to help just contact ExtJS you! Calcium--[yl]

1th Chapter Create and run the first ext Js Classic project

1.1 Development environment Construction

Official website:https://www.sencha.com

Online Documentation:http://docs.sencha.com/extjs/6.5.1/index.html

Official forum:https://www.sencha.com/forum/

SDK Download:https://www.sencha.com/products/extjs/evaluate/

CMD Download:https://www.sencha.com/products/extjs/cmd-download/

Online Demo:http://examples.sencha.com/extjs/6.5.1/examples

Note: Sencha CMD: Tools for creating projects, generating test packages, compiling code, and more

Sdk:sencha CMD required when generating ext Js project

1.2 Download Sencha Cmd tool, Ext Js SDK

1.2.1 Open the cmd tool download link, according to your own operating system to download, 1:

Figure 1.1

1.2.2 Open the SDK download link, fill in the corresponding information click "DOWNLOAD", the official will send the download link to the mailbox, 2:

Figure 1.2

Click "Pivot grid,d3, Adapter ..." To download the extension pack, 3:

Figure 1.3

The SDK installation path will be used when building the project, the other default installation is complete, run Sencha.exe after installation, and then open the Command tool under the Sencha cmd folder to enter "Sencha" to detect whether the installation was successful

4 is the installation success:

Figure 1.4

Important: Configure environment variables: Add H:\Ext6.5.2\senchaCmd6.5.2 (i.e.: Sencha cmd installation path), path, system variable, environment variable

Sencha cmd related directives:

(1) Upgrade cmd

Sencha Upgrade

(2) Creating PC-side projects

SENCHA-SDK H:\Ext6.5.2\ext-6.5.2 generate app--classic app H:\Ext6.5.2\senchaCmd6.5.2\demo\www

directory where H:\EXT6.5.2\EXT-6.5.2:SDK

Generate app: Create a new project

--classic app: Create PC-side project (Modern: Mobile)

H:\EXT6.5.2\SENCHACMD6.5.2\DEMO\WWW: Project Path and name

Create the Success 5, as shown in Figure 6:

Figure 1.5

Put the resulting project into the editor and run index.html to see the full effect, 6:

Figure, 1.6

(3) Compile the project

Sencha App Build

The compiled project is shown in the production folder under Build, 7, and can be run directly by placing the app file under the service.

Figure 1.7

Sencha App Watch

Real-time compilation, CTRL + C Cancel Real-time compilation

Summary: By mastering these basics, we can create a ExtJS project.

Chapter 2nd Description of the project structure

2.1 Project Structure

2.1, the whole project document, understand the role of these documents can better understand and develop

2.1

2.1.1 App Directory

App is the theme directory of our project, the entire project code is basically in here, the whole architecture embodies the ExtJS MVC, the MVVM structure,

Model,store,view

Application.js: Entry File

APPLICATION.SCSS: Public scss file without changes

2.1.2 Build Directory

Package compression compiled with Sencha cmd instructions will be generated in this directory

2.1.3 Ext Catalogue

Framework source code and theme files

2.1.4 Resources Directory

For developers to place resource files, custom CSS, external js,images, etc.

2.1.5 App.js and App.json (important)

App.js is the entire program's inbound file, inheriting from the app's Application.js

App.json is used to do configuration, you can declare the name of the program, configure the theme package, add Chinese package, etc.

2.1.6 index.html access to the portal, other files are negligible

3rd Chapter Auxiliary Content

3.1 Resolving eclipse when reading ExtJS items when the card dies

Open Eclipse Workspace The project corresponds to the. Project file:

Delete the following content:

(1)
<buildCommand>

<name>org.eclipse.wst.jsdt.core.javascriptValidator</name>

<arguments>

</arguments>

</buildCommand>

(2)

<nature>org.eclipse.wst.jsdt.core.jsNature</nature>

"Statement: This article is the author original, reproduced please indicate the source!" Thank

ExtJs6.5.2 Beginner--How to create your first project with Sencha cmd