EXT Form Designer (guibuilder) simple tutorial

Note: This tutorial is developed in the standard ajax/ext directory environment I recommend. if the environment is different, modify the relevant path on your own.

Download the framework and code of this project

1. Open the project

2. Create demo.html in the root directory:

 

< Html >
< Head >
< Meta HTTP-equiv = "Content-Type" Content = "Text/html; charset = GBK" >
< Title > Extjs GUI designer demo </ Title >
<! -- The extjs base 2.02 -->
< Link REL = "Stylesheet" Type = "Text/CSS" Href = "Framework/ext-2.0.2/resources/CSS/ext-all.css" Temp_href = "Framework/ext-2.0.2/resources/CSS/ext-all.css" />
< Script Type = "Text/JavaScript" SRC = "Framework/ext-2.0.2/adapter/EXT/ext-base.js" Temp_src = "Framework/ext-2.0.2/adapter/EXT/ext-base.js" > </ Script >
< Script Type = "Text/JavaScript" SRC = "Frame/ext-2.0.2/ext-all.js" Temp_src = "Frame/ext-2.0.2/ext-all.js" > </ Script >

<! -- The JSON panel -->
< Script Type = "Text/JavaScript" SRC = "Widget/EXT. UX. jsonpanel. js" Temp_src = "Widget/EXT. UX. jsonpanel. js" > </ Script >
</ Head >

< Body >
< Script >
New Ext. viewport ( {
Items: New Ext. UX. jsonpanel ( {Autoload:'Modules/user. JSON'} ),
Layout: ' Fit '
} ). Show ();
</ Script >
</ Body >
</ Html >

 

Note that user. JSON is generated in guibuilder.Code.

3. Open guibuilder

 

4. Design Interface

1) double-click formpanel or drag formpanel into the main panel.

2) drag textfield to formpanle, change fieldlabel to "username", and add "ID" attribute to "username"

3) insert a button to add a handle event.

4) Click here to edit. The script editing box is displayed. Enter the following information in the field:

Function (){


Alert (Ext. Get ("username"). getvalue ());


}

Enter and click Apply.

5) click Copy JSON or edit JSON to copy the code and save itUser. JSON

6) Open demo.html