ExtJS Mind Map

Build the Environment:

1. Build Tomcat, Eclipse
2. Copy the ExtJS to the webcontent of the project
(recommended to use a familiar version of ExtJS, I use ext JS 4.2), Backup an ext directory, the new project directly copied.

Enable ExtJS

1. In the Html/head contains the main several JS

<link rel= "stylesheet" href= "./ext/resources/css/ext-all.css" >
<script type= "Text/javascript" src= "./ext/ext-all-debug.js" ></script>
<script type= "Text/javascript" src= "/ext/locale/ext-lang-zh_cn.js" charset= "Utf-8" ></script>

2. Quote your JS

<script type= "Text/javascript" src= "./main.js" ></script>

Everything from Main.js's Ext.onready (function () {})

Begin

3. Example
Ext.onready (function () {
Ext.Msg.alert (' hint ', ' comma separated argument list '); This is a very common way
});

Debugging recommendations:

1. Prepare browser Chrome or Firefox F12 button to see the operation of JS

2. At the key point of the code, add
Console.log (' InitData ');
Alert ()
This can be found in debugging the situation of JS running.
It is recommended to use log, output to a window of browser F12

ExtJS several major elements:

A program (page), can be divided into three elements: interface UI, data, button events (function).
With professional belongs called VMC.
Whether a file is implemented or three files are implemented. It's good to have this logical concept in mind. In the code-writing audience, the conscious, differentiated processing. So the whole program framework is better to maintain good reading.

I personally organized a thought: only for reference
/*
* This page is divided into three sections
*
* The first part of the data class, such as the model definition in the store definition interface using variable definitions
*
* The second part is the part of the painting interface, the interface definition and painting process that part of the completion, the code has a button event if it involves more than 5 lines of business processing, separate form function processing
*
* The third part is business processing, all business-related processing functions are handled independently
*
* Coding Specification:
* Key panel, grid, form needs to be named, format ID named id_panelxxxxx
* Store name storexxxxx, id id_storexxxxx
* Business function named Fnaddxxxxx fneditxxxxx, branching function with handlexxxxx or handlexxxxxaction
*
*/

/*
* The classic Add and delete change interface contains the following main interface Paneltcpmonitor = toolbar + gird added button will display add interface Windows +
* Panel + Widget Modify button will display add interface Windows + panel + Widgets Delete button No interface refresh button No interface
*
* Interface creation Process: 1. Create the main interface Paneltcpmonitor, later with Hide + show control, Paneltcpmonitor
* Placed in Panelmain 2. Click Add, create a panel and a widget inside it, and put the panel in Windows popup 3. Click Edit to create
* Panel and small components inside, need to bring the selected data into the panel placed in Windows Pop 4. Delete, refresh Skip
*
*/

/*
* Classic Add-and-change page business control 0. Standardized data submission and standardization data return and background interaction will be many, interface standardization is necessary, this standardization interactive way: Send to the server: A.
* http URL + cmd = 1001 as a unique action encoding, for example: localhost:8080/monitor/server?cmd=1001
* B. Data content using JSON, the following A1 server issued data: A. Data format JSON, formatted with A2
*
* 1. Refresh Store.reload ()
* 2. Read the table data operation, send the request in store, and display
* 3. Add records, define new objects, Newwebmon, convert to JSON string, and send to background as requested content
* 4. Edit records, define new objects, Newwebmon, convert to JSON string, and send to background as requested content
* 5. Delete record, convert record------JSON directly, then send to background as requested content, background delete data based on ID
*

ExtJS Mind Map