Second, the first ExtJS program: Helloextjs

Pre-development preparation

After downloading and extracting the ExtJS package, you can get the file directory structure:

In the actual development process does not need all the files and directories, the required contains the following directories can be:

If you are using Eclipse for development, simply copy the above file to the Webroot directory or its subdirectories.

Begin

2. New firstextjs.html
4. Before using ExtJS, you need to introduce the appropriate styles and JS files on the page, and the smallest set that is generally included is this: Ext-all.js,adapter/ext/ext-base.js,locale/ext-lang-zh_ Cn.js and the entire resources directory.

   1. Ext-all.js,adapter/ext/ext-base.js contains all the features of ext, all JS scripts are here.

   2. Locale/ext-lang-zh_cn.js is a Chinese translator.

   3. The resources directory is a CSS style sheet and a picture.

   • note the order in which JS files are imported
5. Writing HTML

   <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >
   

7. Final effect

At this point, the first ExtJS program is done. The process must be careful, do not appear low-level errors. I was in the introduction of JS files when the path is wrong, the majority of Days O (︶^︶) O. But I do not understand why the final display effect is so ugly. 囧

Modify:

Previously, there was no import of images in the resources directory, causing problems with the display. New directory structure:

After re-importing images, you can display it normally: