Deploy the program developed by ext JS 4.x using sencha SDK tools

In the past, when I tried to deploy the tool, I always encountered an error and did not prompt where the error occurred. I tried it several times and put it down. I tried to get it over the past few days. It took me nearly a day, I finally got it done (encoding problem, helpless). Now I want to share it with you, hoping to help students who have the same problems as me.

This tutorial describes how to use sencha SDK tools to deploy extjs 4.xProgram. Usually in the process of development we will introduce ext-all.js or ext-debug.js, and then dynamically load the JS files needed. However, when there are many JS files, the loading time of the program will be increased, affecting the running speed. The actual situation is that when we develop a program for deployment, we only need the JS file we actually need. For example, ext may not be used in our program. chart. chart class, so we do not need to include it. In addition, if you can combine all JS files into a single JS file, remove the comments and spaces in the file, and simplify the variable naming, this greatly reduces the size of the loaded JS and the number of server connections. To achieve these goals, deployment the developed program ). Next, let's look at how to deploy the extjs 4. x program.

1. Program Structure

Before deployment, we need to talk about the file organization structure of the program developed with extjs.

Reference: http://docs.sencha.com/ext-js/4-1! /GUIDE/getting_started-section-2

Shows the entire program structure.

Figure 1 program structure

Figure 2 Structure of the actual project

In Figure 1,

Appname is the root directory of your entire application, corresponding to D: \... \ extjs \ In Figure 2 \

The app folder contains the classes defined in the application. For more information about naming conventions, see classsystem.

The extjs folder stores all files of the ext JS 4 SDK. Corresponds to the extjs folder in Figure 2.

The resources folder stores some CSS and image files. In Figure 2, there is no correspondence, but the image and CSS files are written in the outer folder, CSS and images folders respectively.

Index.html is the entrance to the entire application.

App. js contains the logic of the entire application. (Note: In Figure 2, there is no corresponding file, and App. js often appears in MVC mode ).

Other files and folders are files related to the program.

 

The content in

Figure 3 index.html file

Note:

The red box refers to the introduction of the extfile, which is the access of the program. This is the index.html in the development process. It will be attached later. You can compare it.

2.Deployment)

 

ReferenceArticle: Http://docs.sencha.com/ext-js/4-1! /GUIDE/getting_started-section-3

 

With the above preparations, we will deploy ext JS 4 below. The tool is sencha SDK tools.

 

Before installation, make sure that JDK is installed on your computer. If you do not configure JDK, you can use Google or Baidu's corresponding method, or refer to http://v.youku.com/v_show/id_xmjq4mjg3mtyw.htmlconfiguration.

 

After the installation is complete, you need to make some minor changes to it to ensure that Chinese characters are not garbled.

 

1) Open the installation directory, open the Compact/jsbuilder/src/folder in sequence, and open the project. js file in the folder in a text editor.

 

2) search for "getcompressor", change "Java-jar" in the next line to "Java-dfile. Encoding = UTF-8-jar", save and exit.

 

The next step is deployment.

 

1) Open the command line and switch to the application root directory (make sure the path contains no Chinese characters );

 

2) run the following command:

 

Sencha create JSB-A index.html-P app. jsb3

 

Generate the jsb3 file.

 

3) If you want to modify the jsb3 file, you can edit it. Generally, simply execute the following command:

 

Sencha build-P app. jsb3-D.

 

Note that the preceding command has an English dot. Do not discard it. It indicates that a deployment file is generated in the current directory.

 

 

After successful, a all-class.js and a app-all.js file are generated under the current directory. The former is used for debugging and is large in size. The latter is used for deployment and is small in size. If the two are as large as they are, there may be a small problem in the middle. You can try them several times. Next, modify the content in the

This is my first blog post. I hope to talk to you more. ^_^