[020] Sencha Ext JS 6.0 using tutorial 2

This section mainly describes how to use Sencha Ext JS6.0 for project development in a typical example
The entry stage is always more difficult, master the basic operating procedures, the use of methods, architectural thinking, development or full of smooth, happy, and can master a new technology, but also progress, mainly learning ability to improve, slowly master how to contact a new thing from the zero, technology. It technology update is still full of speed, must keep up with the pace of the times, but also can not be overwhelmed by the big waves. Okay, nonsense, the programmer code is still the most persuasive.

1, Basic command:

Production New project: SENCHA–SDK {SDK path name} Generate app {app name} {apply path (if current path is ".") ）}
Reload Project: Sencha app Build
Refresh Project: Sencha app Refresh
View item: Sencha app Watch

2, file directory structure

The official directory structure for the application is described in the following paragraph:

File Structure
EXT JS applications follow a unified directory structure that's the same for every app. In we recommended layout, all Store, Model, ViewModel, and Viewcontroller classes is placed in the app folder (with Models placed in the Model folder, Stores on store, and viewmodels/controllers in view). Best practice would be to logically group Viewcontrollers andviewmodels together in sub-folders within the App/view/folder Using a similar naming structure that you'll use for the views themselves (see the "app/view/main/" and "Classic/src/view /main/"folders below).

This means: The EXT JS application is common to the same directory structure, all the store, Model, ViewModel, and Viewcontroller classes are placed in the project's app folder, models class placed in the Model folder, Stores is placed under the store folder.

The hierarchical directory structure is as follows:

New Project View:

Directory structure:

3, new project run

The new project directory runs the Sencha App Watch command to view the basic Project Framework view: The following view slightly changes some page styles:

4, Component additions

The following is to add our own component elements, the beginning of the phase should not think of their own to write the interface, especially JS play better friends, because the Sencha official use of the sample code to open source for everyone, but also the most correct use. Take chart as an example:
Official code example:
Http://examples.sencha.com/extjs/6.0.1/examples/kitchensink/?charts=true#line-marked

The top right corner of the list of three code navigation, respectively, view, Contoller,store, respectively, representing three parts of the code, from the literal meaning can also be thought of the three parts of the code to represent what the meaning, put in the project where, already in the second part of the project's document structure, This part of the code is copied separately, placed in the corresponding folder of the project for the main program to call.

Program Modification:
View Code: Modify the class name, the requested data, MyApp.store.Chart1 is the code class name under the store, the names of the three classes are best changed to the ExtJS naming specification format, so the program is good maintenance.

Main Main.js Code Modification

So the chart's resources are loaded into main
Run Sencha app build, Sencha app Refresh, Sencha app watch to see how it works
This is going to find nothing to show, press F12, refresh the page to find the error

The analysis lookup will find that the Certesian is referenced in the chart code of the view, and there is no such resource in the project to start the default build, so we will add it ourselves

There is a App.json file at the root of the project, where the required resources are loaded and need to be introduced into the requires charts

Run Sencha app build again, Sencha app Refresh, Sencha app watch to see how it works, the diagram we want is finally there, so the Chart component has been added successfully, and other components are similar additions.

Add navigation and polyline pattern examples:

Through this project, I learned a lot of things, completed this part of the work took a total of 2 days, from the beginning of extjs6.0 and Sencha White, to the implementation of the specific deployment of the project, from the official English document Sencha, to the specific implementation of the code, is a learning process. Encounter problems can not panic, serious thinking, the problem will always be solved.

From 50775919

[020] Sencha Ext JS 6.0 using tutorial 2