Eclipse + spket + extjs4.1 Development Environment setup and code Smart Tips

To build a development environment, you must first prepare several items: Eclipse, tomcat, extjs4.1, and spket. You can download them from the relevant websites and go to the official website to prevent both toxic and latest versions. Here we will mention the download of spket. The spket download website is:

Http://www.spket.com/

Click downloads in the upper right corner To Go To The download page. This product is free for personal use and is charged for commercial use. This is used as the Eclipse plug-in. Press plugin to go To the download page and download it. Decompress the package, copy features and plugins under the eclipse folder to the eclipse root directory and overwrite these two files with the same name. Restart eclipse, and then window => preferences, the spket option on the left shows that the installation is successful.

        Continue the window just now:

Click spket in the left-side navigation pane.

=> JavaScript profiles

=> Click New in the button on the right

=> Input in nameExtjs(This name is random)

=> OK

=> Select extjs

=> Add Library

=> Select extjs from the library drop-down list

=> OK

=> Select the new extjs

=> Add File

=> Select the SDK under the build directory of the extjs package decompressed in another part of the system. jsb3 (this file has many errors. In the next article, I will describe the modification method. This will be used first)

=> Then there will be a lot of selection boxes for you to choose which tips, I checked all

=> Then press the extjs of the root node (note that it is the extjs at the root)

=> Click the button default on the right (this step is very important and will not be automatically prompted if you do not press it)

=> OK to exit

        Now let spket be the default editor for javascript:

Window

=> Preferences

=> General

=> Editors

=> File Associations

=> Select *. js from file types on the right.

=> The following associated editors selects the spket JavaScript editor.

=> Press the button on the Right To default

=> OK to exit

Then, when you see the icon of the JS file, it means you have succeeded.

 

How can I create an extjs project? First, I will demonstrate how to create a helloword project.

Create a new project (dynamic web page, which is a dynamic web project in eclipse). Do not introduce the extjs package first,

Right-click the project icon

=> Properties

=> Resource

=> Text file encoding

=> Other

UTF-8

=> Select builders on the left.

=> Remove the check box before JavaScript Validation and validation.

=> OK to exit

You cannot import the extjs package, so eclipse will become stuck. Go to the project root directory, find the. Project, open it in notepad, and delete the two parts:

 

Article 1:

 

<Buildcommand>

        <Name> org. Eclipse. WST. jsdt. Core. javascriptvalidator </Name>

        <Arguments>

        </Arguments>

</Buildcommand>

Second:

 

<Nature> org. Eclipse. WST. jsdt. Core. jsnature </nature>

 

Save and exit. Refresh the project. Copy the ext package into the project. Now I have copied the entire package. For more information about how to make the smallest release package, refer to the various materials on the Internet. I am also a beginner, not too clear.

Run index.html in the root directory (it may take some time to deploy it). You can go to the home page to check that you have succeeded. The Code prompts me to introduce it in the next article.

 If you follow the above article and are interested in creating the first extjs program, you will find that there are very few code prompts, even Ext. onready and Ext. Create are not prompted. In fact, it's not spket's fault. It's ext's own mistake. There are a lot of errors in SDK. jsb3 under the ext root directory, and this is the file we intelligently prompt to introduce. Of course there is an error in the smart prompt.

        Open this file in the JS editor. I use Dreamweaver to open it. You can check the directories that are involved in the directory at the beginning and end, and then compare them with the actual directories. Then you will know that the directory is wrong. The error is basically all directories. There are several types of errors:

Pkgs/xxx Should Be ../pkgs/xxx

../Platform/CORE/xxx Should Be ../src/CORE/xxx

../Platform/src/xxx Should Be ../src/xxx

Src/xxx Should Be ../src/xxx

Other directories are missing ../

 

After observation, you must know the solution. It's only the second and third errors. The others are missing ../. But it is very troublesome to modify it. What should I do? We can put the file under the top-level directory (extjs root directory). The first, fourth, and fifth problems are solved. Replace the second and third. However, to replace a word, you need to input as many words as possible to avoid replacing all other words. In summary, it can be replaced as follows:

Set"Path": "../platform/CORE/Replace"Path": "src/CORE/

Set"Path": "../platform/src/ Replace"Path": "src/

Replace the word with your own copy file. I will not be responsible for it if it becomes a Chinese character.

Find the following code:

  {

  "Src": "../platform/src /",

  "DEST": "src"

  },

  {

  "Src": "../platform/CORE /",

  "DEST": "src/core"

  },

Replace

  {

  "Src": "src /",

  "DEST": "src"

  },

  {

  "Src": "src/CORE /",

  "DEST": "src/core"

  },

After the file is replaced, place it under the ext root directory, which is the upper-level directory, open eclipse, and replace the ext prompt file with the SDK. jsb3 file. All the hooks can be checked. Open a new JS file and enter the following code (to test whether the Code has an automatic prompt, we recommend that you do it by hand ):

(Function (){

        Ext. onready (function (){

                  Ext. Define ("person ",{

                           Extend: "Ext. Data. model ",

                           Fields :[

                                    {Name: "name", type: "Auto "},

                                    {Name: "Age", type: "int "},

                                    {Name: "email", type: "Auto "}

                           ]

                  });

                  VaR P = ext. Create ("person ",{

                           Name: "shuishan Qingfeng ",

                           Age: 22,

                           Email: 1112@1112.com"

                  });

                  Ext. messageBox. alert ("model created with define", "Name:" + P. get ("name") + "<br/> Age:" + P. get ("Age") + "<br/> Email:" + P. get ("email "));

        });

})();

You will find that both Ext. onready and Ext. Create are prompted. However, you can enter Ext. Data. Model with quotation marks, which also prompts that the attribute names field and extend are also prompted. If you are not sure whether the attribute name you entered is correct, you can press and hold the ctrl key after the quotation marks to move the cursor to the last level of name (for example, ext. data. the model in the model) to see if it is discolored and underlined. If there is a, it indicates that there is this class. You can also press Ctrl to jump to the JS file of this class. Then introduce extjs-4.1.0/resources/CSS/ext-all.css in another HTML file
And extjs-4.1.0/Bootstrap. js (relative directory according to their directory path change) level this JS file, you can see the effect on the page: