Generate user interface

EXT is the front-end for interaction with users. Its functions can be summarized as: generate user interfaces, interact with users, and Program ( PHP ,. Net, etc.) background communication to complete interaction with users. The following describes the implementation principles of these functions.
1.1
Generate user interface

One of the reasons why ext is not widely accepted is that it has a good user appearance.

OneSystemThe most important function is to implement CRUD (new, read, update, delete) and query. In order to combine these functions, a crud panel of ext is specially encapsulated to encapsulate these common functions into a class, so as to create a user-friendly interface. Program of the crud classCodeSee the previousArticle.
The crud panel is inherited from the panel of Ext.
/**

* Define a namespace

*/
Ext. namespace ("mis. Ext ");
/*
* Crud panel base class
*/
// Inherit the panel of ext and create the crud panel
Mis. Ext. crudpanel = ext. Extend (ext. Panel ,{......});
// Not all codes are listed for limited space

The Inheritance in ext uses Ext. Extend (component name, {implementation code });
To use this crud panel, we need to inherit and implement it. Let's take an example.
// Inherit the crudpanel to create the sewage management panel
Addplantpanel = ext. Extend (MIS. Ext. crudpanel ,{

ID: "addplantpanel", // ID indicates the unique identifier of a panel.

Title: "sewage plant management", // The Name Of The Panel, see

Baseurl: "plant. aspx", // Data Source Address

// Reload the editing method as needed

Edit:Function()

{

Commentpanel. superclass. Edit. Call (this); // call the base class Method

VaR record = This. Grid. getselectionmodel (). getselected ();

If (record ){

VaR id = record. Get ("plantid ");

This. fp. Form. setvalues ({ID: Id });

}

},


// Save

Save: function ()

{

VaR id = This. fp. Form. findfield ("ID"). getvalue ();

This. fp. Form. Submit ({

Waitmsg: 'Saving... ',

URL: This. baseurl + "? Cmd = "+ (ID? "Update": "save "),

Method: 'post ',

Success: function (form_instance_create, Action ){

Ext. MessageBox. Alert ('friendly hint ', action.result.info );

},

Failure: function (form_instance_create1, Action1 ){

Ext. MessageBox. Alert ('friendly hint ', action1.result.info );

},

Scope: This

});

},
// Delete

Removedata: function (){

This. Remove ('plantid ');

},

// Create a new and modified form
Createform: function (){

VaR formpanel = new Ext. Form. formpanel ({

Frame: True,

Labelwidth: 60,

Labelalign: 'right ',

Items :[{

Xtype: 'fieldset ',

Title: 'Basic information ',

Autoheight: True,

Defaults: {xtype: "textfield", width: 300 },

Items :[

{Xtype: "hidden", name: "ID "},

{Fieldlabel: 'number', name: 'plantid '},

{Fieldlabel: 'name', name: 'plantname'}]

}]

});

Return formpanel;

},
// Create a window for placing a form. For more information, see add and modify a form.

Createwin: function ()

{

Return this. initwin (438,180, "sewage management ");

// Create a new and add panel
},

// Specify the mapping of JSON data

Storemapping: ["plantid", "plantname"],

// Initialization Interface

Initcomponent: function (){

VaR Sm = new Ext. Grid. checkboxselectionmodel ();

This. CM = new Ext. Grid. columnmodel ([New Ext. Grid. rownumberer (), // obtain the row number

SM,
// Define the grid header information

{Header: "sewage plant no.", sortable: True, width: 100, dataindex: "plantid "},

{Header: "sewage plant name", sortable: True, width: 200, dataindex: "plantname "}

]);


Addplantpanel. superclass. initcomponent. Call (this );

}
});

In this way, a crud Panel can be applied to the actual environment. For more information, see
1.2
Interaction with users and communication with the program background

The ext component starts from initcomponent during execution.
Let's take a look at the execution process of addplantpanel, a specific crud panel.
Initcomponent: function (){

VaR Sm = new Ext. Grid. checkboxselectionmodel ();

This. CM = new Ext. Grid. columnmodel ([New Ext. Grid. rownumberer (), // obtain the row number

SM,
// Define the grid header information

{Header: "sewage plant no.", sortable: True, width: 100, dataindex: "plantid "},

{Header: "sewage plant name", sortable: True, width: 200, dataindex: "plantname "}

]);


Addplantpanel. superclass. initcomponent. Call (this );

}
First, define the related information of the grid table, and then call the initcomponent method of the base class. Note that the method used to call the base class in ext is superclass. method name. Call (this );
Next, let's look at the initcomponent in the base class method.
Initcomponent: function (){

// First, define the data source

This. Store = new Ext. Data. jsonstore ({

ID: "ID ",

URL: This. baseurl + '? Cmd = list', // default data source address, which must be provided during inheritance

Root: "rows ",

Totalproperty: "totalcount ",

Remotesort: True,

Fields: This. storemapping });

This. cm. defaultsortable = true; // enable sorting

This. Sm = new Ext. Grid. checkboxselectionmodel (); // select box

Mis. Ext. crudpanel. superclass. initcomponent. Call (this); // initialize the Panel

VaR viewconfig = ext. Apply ({forcefit: true}, this. gridviewconfig); // Add configuration information
// Grid table

This. Grid = new Ext. Grid. gridpanel ({

Store: This. Store,

CM: This. cm,

SM: This. Sm,

Trackmouseover: false,

Loadmask: True,

Viewconfig: viewconfig,

Tbar: […], // Top toolbar

Bbar: New Ext. pagingtoolbar ({

Pagesize: 10,

Store: This. Store,

Displayinfo: True,

Displaymsg: 'display the {0}-{1} record (s), total {2} record (s ',

Emptymsg: "No record"

}) // Place the page information on the toolbar at the bottom

});
// Perform the modification when double-clicking

This. Grid. On ("celldblclick", this. Edit, this );

This. Add (this. Grid); // It is important to add a grid table to the Panel.

This. store. load ({Params: {start: 0, limit: 10}); // load data after the grid table is generated, here is the key to communicating with the server
the key to the above Code communicating with the server lies in URL: This. baseurl + '? Cmd = list', and this. store. load ({Params: {start: 0, limit: 10});
URL: Specifies the address of the data source, and ext calls this during page initialization. store. load Method from this. baseurl + '? Cmd = list get data, parameter : Start = 0 & limit = 10, from plant. aspx? Cmd = List & START = 0 & limit = 10 get data
when the request arrives at the server side plant. aspx? Cmd = List & START = 0 & limit = 10 (designed for graduation. net, in fact, the background is very simple), the following code is executed
If (request. params ["cmd"]. tostring () = "list")

{< br>
int start = convert. toint32 (request. params ["start"]. tostring ();
int
Limit = convert. toint32 (request. params ["Limit"]. tostring ();
string JSON = PNT. getjsonall (START, limit, "");
response. write (JSON);

}< br> // PS This is C #. php has been sent before and you can find it yourself

The above code generates a piece of JSON data
{'Totalcount': '5 ',
'Rows ': [{"plantid": "8", "plantname": "SS" },{ "plantid": "7", "plantname": "7 pollution
Banben "},{" plantid ":" 23 "," plantname ":" 222 "},{" plantid ":" 22 ",
"Plantname": "22" },{ "plantid": "15", "plantname": "No. 15 Sewage Treatment Plant"}]}

EXT reads the preceding JSON and displays the data in the table. This is the first communication with the server.
The effect is as follows:

Show. jpg (19.7 KB)

Main Process

1111. jpg (42.77 KB)

After the page is displayed to the user, it then interacts with the user.

Initialization of the MIS. Ext. crudpane base classFunctionThe following code is available in initcomponent:

Tbar :[{

ID: 'addbutton ',

Text: 'add ',

Iconcls: 'addiconcss ',

Tooltip: 'add new records ',

Handler: This. Create,

Scope: This

}, '-', // '-' To add 'to the toolbar buttons |'

{

ID: 'editclick ',

Text: 'editor ',

Iconcls: 'editiconcss ',

Tooltip: 'modify records ',

Handler: This. Edit,

Scope: This

},'-',

{

Text: 'delete ',

Iconcls: 'deleteconcss ',

Tooltip: 'delete selected information ',


Handler: This. removedata,

Scope: This

},'-',

{

Text: 'refresh ',

Iconcls: 'refreshcon ',

Tooltip: 'refresh record ',


Handler: This. Refresh,

Scope: This

}, '->', // '->' Indicates that the toolbar button is placed on the right.
'Search: ', this. Name,

{


Text: 'query ',


Pressed: True,


Iconcls: 'selecticoncss ',


Handler: This. search,

Scope: This

},'
'

],

The buttons on the top toolbar of the Panel are defined above (see the buttons in effect). Each button has a handler, and its parameters are a member method in this class. When you click a button, the corresponding handler method of this button is triggered. For example, if you click Add, this. Create method is triggered, and the execution path is tracked below.

See the following ......
Attachment

Success. jpg
(22.6 KB)

Save. jpg
(23.49 KB)

Wushui2.jpg
(30.71 KB)

Connecting ...... Copied from word, with many useless characters

First, execute the create method. The create method is as follows:

// Create (Add/modify) window

Create: function ()

{

This. showwin (); // display (Add/modify) window

This. Reset (); // clear the data in the form

}

The create method has two functions, which are executed in sequence.

// Display (Add/modify) window

Showwin: function ()

{
// Createform () must be provided during inheritance. The function of this method is to create a form.

If (! This. Win ){

If (! This. fp ){

This. fp = This. createform ();

}

This. Win = This. createwin ();

This. win. on ("close", function () {This. win = NULL; this. fp = NULL; this. store. reload () ;}, this); // Add an event. When the window is closed, the table data is reloaded.

}

// When the window is closed, the data is reloaded.

This. Win. Show ();

},

Showwin calls the createwin () method to create a window and places the form in it. The second method in create is to reset the content of the form. In this way, a new image is displayed.

Let's take a look at the createwin () method.
// Create a window for placing a form. For more information, see add and modify a form.

Createwin: function ()

{

Return this. initwin (438,180, "sewage management ");

// Create a new and add panel
},

This method calls the initwin method to create a window. For a clearer understanding, let's look at the initwin method.
Initwin: function (width, height, title)

{

VaR win = new Ext. Window ({

Width: width,

Height: height,

Buttonalign: "center ",

Title: title,

Modal: True,

Shadow: True,

Closeaction: "hide ",

Items: [This. fp],

Buttons: [{text: "save ",

Handler: This. Save,

Scope: This },

{Text: "clear ",

Handler: This. Reset,

Scope: This },

{Text: "disabled ",

Handler: This. closewin,

Scope: This}

]

});

Return win;
},

Note:
{Text: "save ",
Handler: This. Save,
Scope: This },

When the user fills in the data and clicks save, the SAVE method is triggered, so ext calls the Save method.


// Save

Save: function ()

{

VaR id = This. fp. Form. findfield ("ID"). getvalue ();

This. fp. Form. Submit ({

Waitmsg: 'Saving... ',

URL: This. baseurl + "? Cmd = "+ (ID? "Update": "save "),

Method: 'post ',

Success: function (form_instance_create, Action ){

Ext. MessageBox. Alert ('friendly hint ', action.result.info );

},

Failure: function (form_instance_create1, Action1 ){

Ext. MessageBox. Alert ('friendly hint ', action1.result.info );

},

Scope: This

});

},

Effect

This method implements communication with the ASP. NET background. The post method is used to transmit the data in the form to the baseurl? Cmd = save. Because the above baseurl is plant. aspx, the data is finally transmitted to plant. aspx? Cmd = save
[size = + 0] ext transfers data. net background, followed. net background to process data from Ext. Let's take a look at plant. how to deal with aspx
MIS. bll. plant PNT = new MIS. bll. plant ();
If (request. params ["cmd"]. tostring () = "save")

{< br>
string id = request. params ["plantid"]. tostring ();
string name = request. params ["plantname"]. tostring ();
MIS. model. plant pntm = new MIS. model. plant ();
pntm. plantid = ID;
pntm. plantname = Name;
try
{
PNT. add (pntm);
response. write ("{success: True, Info: 'added successfully '}");

}< br>
catch (exception ADDE)
{
response. write ("{failure: True, Info: 'failed to add. Error cause:" + this. addlashes (ADDE. message. tostring () + "'}");

}

The preceding method saves the information to the database. If the information is successfully saved, "{success: True, Info: 'added successfully '}" is returned. This is a JSON string. EXT is used to obtain the returned data. If the data is successfully returned, the following code is called in save:
Success: function (form_instance_create, Action ){

Ext. MessageBox. Alert ('friendly hint ', action.result.info );

},

Effect

Read the original text carefully,
Try

{

PNT. Add (pntm );

Response. Write ("{success: True, Info: 'added successfully '}");

}

Catch (exception ADDE)

{

Response. write ("{failure: True, Info: 'failed to add. Error cause:" + this. addlashes (ADDE. message. tostring () + "'}");

}

This code has actually been provided. "{success: True, Info: 'added successfully'}" indicates execution successful.
{ 'Totalcount' : '9' , 'Rows' :[{ "Plantid" : "7" , "Plantname" : "Modify banben of NO. 7 sewage treatment plant" },{ "Plantid" : "23" , "Plantname" : "222" },{ "Plantid" : "22" , "Plantname" : "22" },{ "Plantid" : "2" , "Plantname" : "Sewage plant 2" },{ "Plantid" : "16" , "Plantname" : "Name3" },{ "Plantid" : "15" , "Plantname" : "Name3" },{ "Plantid" : "10" , "Plantname" : "10" },{ "Plantid" : "1" , "Plantname" : "Name1" },{ "Plantid" : "" , "Plantname" : "SS" }]}