EXT JS 6 Development Example (ii): Using CMD to create an application

Since Ext JS 6 merges the original Ext JS and Sencha touch into a single frame, before using CMD to create an application, you need to consider whether you want to create a generic application or just an application for desktop or mobile devices.

The reason for this is that general-purpose applications and relatively single applications can be a little cumbersome to develop. These small troubles are mainly caused by the automatic loading mechanism of Ext JS, which sometimes bothers people.

Ext JS automatic loading mechanism is based on the class name to partition the directory load script, such as SimpelCMS.view.Main, if there is no custom simpelcms path point, the default script location is the App/view/main.js directory. In ext JS 6, the general application in order to distinguish between the desktop and the two applications needed to move the different files, add the classic and modern directory, this time the problem comes, the same class name, may be in the app directory, may be in the classic or modern directory. If the class file cannot be found directly according to the automatic loading mechanism (by default in the app directory), in order to solve this problem, the class and the corresponding path are written in the Classic.json and Modern.json files in the way of the specified path. This time, another problem arises, when you create a new class, you have to build once, the path of the class is written into Classic.json or Modern.json, or you can not find the class, that is, you'd better execute Sencha app Watch monitors the directory, allowing CMD to generate Classic.json or Modern.json at any time, which should be a big problem for development. The main thing is that the build operation needs to get the path to the home page file, and then build the path of the script based on the relative path of the script to the home page, which is a scenario where the script is not found for applications that use MVC as a background development. Also need to adjust the bootstrap.js to fix, overall is a lot of small problems, but the whole process is familiar, the problem is not too big. And for the only platform for the project, there is no such a problem, will reduce a lot of trouble.

Since SIMPELCMS does not consider mobile platforms, there is no need to create generic applications, so the development environment and process are almost the same as the previous Ext JS 4. Below to create this application.

Because the command is used too little and memory is not good, you will not remember how to create the application, this time, you can first enter the following command to get help:

Sencha Help Gen App11

You will see the output as shown:
650) this.width=650; "src=" http://img.blog.csdn.net/20160524144159340 "alt=" here write a picture describing "title=" "/>

As you can see, this helps to do a good job, in the figure of 3, 4 lines gives a command format for creating an application for a specific platform. The parameter "classic" of line 3rd clearly shows that this creates a classic application for the desktop platform, while line 4th creates a modern application for mobile devices.

Below, execute the following command to create an application named Simplecms:

Sencha-sdk d:\Workspace\ext6 Gen App-classic simplecms./simplecms11

The above command added the SDK parameters to specify the EXT JS 6 frame directory, otherwise it will download the framework from the Internet, which takes a lot of time.

For a while, you can see the following directories and files in the Simplecms directory:
650) this.width=650; "src=" http://img.blog.csdn.net/20160524150141976 "alt=" here write a picture describing "title=" "/>

Compared to the previous application created with Ext JS 4, you will find that the directory structure is almost the same, so if you are already familiar with the development of Ext JS 4, using Ext JS 6 for development, will not feel too difficult.

Now create the SIMPLECMS project before Visual Studio opens, modify the original scripts directory to Scripts_old in Solution Explorer, and create a new scripts directory. The files and directories in the application created using CMD are then copied to the Scripts directory.

The next step is to modify the homepage. Open the index.html file in the scripts directory and copy all the code to the index.cshtml file in the Views\home directory.

Note: The path to the load Bootstrap.js script needs to be modified.

Open the BundleConfig.cs file in the App_start directory and block out the temporary code because the files and directories are gone.

Copy the index.html file of the scripts directory, then click on the item simplecms and select Paste in the right-click menu to do so so that CMD can find the index.html file when using the Sencha app build command to avoid errors.

Open a. app.json file, locate Indexhtmlpath, and change the homepage to ".. /index.html "so that the path can be set correctly when the application is built.

In the Command Prompt window, enter the scripts directory, and then run the Sencha app build command to regenerate the application.

OK, now in the Build menu choose Rebuild Solution, and then on the Debug menu choose "Start (Not Debug)", you can see the following interface in the browser:

650) this.width=650; "src=" http://img.blog.csdn.net/20160524154738148 "alt=" here write a picture describing "title=" "/>

That's it for today. If you have any questions, you can go to QQ Exchange Group 391747779 for consultation.

EXT JS 6 Development Example (ii): Using CMD to create an application