Develop MIS using extjs (3): Save client status using database

As we all know, tools such as vs. NET will remember the status when we closed the last time: the position and size of each window, the toolbar status, and custom menu items. This is undoubtedly a function used. Extjs also provides the state storage mechanism. Its main controls include girdpanel and formpanel, all of which provide the state storage function. All we need is to provide the appropriate provider for it.

1. Save the client status

Let's take a look at the process of persisting the control status when the status of a control in extjs changes:

 

The control is responsible for the first two steps (red) in the process. When the control status changes, the status is serialized in JSON format, and the static method Ext. state. Manager. getprovider () is called to obtain the current status.ProgramConfigure the provider, and then call the Set Method of the provider to save its status. What we need to do is provide a provider. When the set method is called, we can save the status of the passed control to the server. The provider'sCodeAs follows:

 
1:Srims. providerctor = ext. Extend (ext. state. provider ,{
 

 
2: 
 

 
3:Get:Function(Name, defaultvalue ){
 

4:// Alert ('get: '+ name +': '+ srims. provider. _ State [name]);
 

 
5:// Return defaultvalue;
 

 
6:
 

 
7:If(Srims. provider. _ State [name])
 

 
8:ReturnExt. util. JSON. Decode (srims. provider. _ State [name]);
 

 
9:
 

 
10:ReturnDefaultvalue;
 

 
11:},
 

 
12:Set:Function(Name, value ){
 

13:// Alert ('set: '+ name + ''+ Ext. util. JSON. encode (value ));
 

 
14:VaRValuestring = ext. util. JSON. encode (value)
 

 
15:Srims. provider. _ State [name] = valuestring;
 

 
16:
 

 
17:Ext. Ajax. Request ({
 

 
18:URL:'/User. asmx/setextclientstate',
 

 
19:Method:'Post',
 

 
20:Params:{
 

 
21:Key: Name,
 

22:Value: valuestring
 

 
23:}
 

 
24:});
 

 
25:},
 

 
26:Clear:Function(Name ){
 

 
27:Srims. provider. _ State [name] = undefined;
 

 
28:}
 

 
29:});
 

 
30: 
 

 
31:Srims. provider =NewSrims. providerctor ();
 

 
32:Srims. provider. _ state =New Function(){
 

33:};
 

Here, srims. privoider. _ state (Row 32) is the local object used to save the state, which is equivalent to a cache. The set method first encodes the control status (14 rows), and then stores the control status in srims. privoider. _ state (15 rows), then initiate an Ajax request, call WebService, and pass the Control ID and its status. The server will persist the current status of the control based on these two parameters (17 rows ). This is the third and fourth steps in the flowchart (in blue ).

After the provider class is defined, we can construct it (31 rows) and then call:

Ext. state. Manager. setprovider (srims. provider );
 

Set our provider to system public, so that the control in extjs can use Ext. state. Manager. getprovider () to get this provider.

The setextclientstate method of the server users. asmx is used to save the status of the client control. The last two steps in the process are marked in green ). Use XML to serialize the status of all controls. The XML format is similar to the following:

1:<?XML Version= "1.0" Encoding= "UTF-8"?>
 

 
2:<Extclientstate>
 

 
3:
 

 
4:<Projectgridpanel_horizontallist>
 

 
5:{"Columns": [{"ID": 0, "hidden": true}, {"ID": 1, "width": 93 },......
 

 
6:</Projectgridpanel_horizontallist>
 

7:
 

 
8:<Projectgridpanel_verticallist>
 

 
9:{"Columns": [{"ID": 0, "hidden": true },......
 

 
10:</Projectgridpanel_verticallist>
 

 
11:
 

 
12:<Divpanelmenu>
 

 
13:{"Collapsed": false}
 

 
14:</Divpanelmenu>
 

15:
 

 
16:</Extclientstate>
 

The node name is the ID of the client control, and the node value is the status of the control. The preceding XML describes the status of the three controls, including the first two:Projectgridpanel_horizontallistAndProjectgridpanel_verticallistIs gridpanel, the last oneDivpanelmenuIs panel.

2. State loading and Restoration

During the current system load, before loading all controls, we can send the XML to the client to restore the client status. The Code is as follows:

 
1:Srims. provider. loadstate =Function(Callback ){
 

 
2:Ext. Ajax. Request ({
 

 
3:URL:'/User. asmx/getextclientstate',
 

 
4:Method:'Post',
 

 
5:Success: srims. provider. _ onloadstate,
 

 
6:Scope: callback
 

7:});
 

 
8:};
 

 
9:Srims. provider. _ onloadstate =Function(Response ){
 

 
10: 
 

 
11:VaRRootnode = ext. domquery. selectnode ('/Extclientstate', Response. responsexml );
 

 
12:VaRNodes = ext. domquery. Select ('*', Rootnode );
 

 
13:
 

 
14:For(VaRI = 0; I <nodes. length; I ++ ){
 

 
15:VaRNode = nodes [I];
 

16:Srims. provider. _ State [node. tagname] = ext. domquery. selectvalue ('/', Node );
 

 
17:// Alert (node. tagname + srims. provider. _ State [node. tagname]);
 

 
18:}
 

 
19:
 

 
20:This();
 

 
21:}
 

The Ajax request in the second line reads the client status from user. asmx/getextclientstate, and the response is the XML above. The callback function srims. provider. _ onloadstate is responsible for restoring the State resolution to the local cache of srims. provider. _ state.

After the client status is restored, you can use provider to extract the last status when the control is loaded. The process of loading and restoring status is summarized as follows:

 

The code that appears in this article, removed the comment, and combined with firebug, can clearly understand the entire state saving and restoration process.