Extjs4 self-study manual-ext Data Structure Component (proxy client proxy)

In Ext, the proxy class is used to exchange data. There are two types: client proxy and server proxy.

Client proxy:

Localstorageproxy

Sessionstorageproxy

Memoryproxy

Server Proxy:

Ajaxproxy

Scripttagproxy

Directproxy

Restproxy

 

1. localstorageproxy

Note: The localstorageproxy uses the HTML5 localstorage API to store and load data. Data will not be lost if the browser is closed

Example:

     <  Script  Type  = "Text/JavaScript"  >  
Ext. onready ( Function  (){
  //  Define a data model  
  Ext. Define (  '  Myinformation  '  ,{
Extend:  ' Ext. Data. Model  '  ,
Fields :[{
Name:  '  ID  '  , Type:  '  Int  ' 
},{
Name:  '  Name  '  , Type:  '  String  '  
},{
Name:  '  Age '  , Type:  '  Int  '  
}],
  //  Defines the localstorageproxy proxy class and stores and loads data through the localstorage API of html5.  
  Proxy :{
Type: '  Localstorage  '  ,
ID:  '  Myinformation  '  
}
});
  //  Create and store a piece of data  
 Ext. modelmgr. Create ({
ID:  1  ,
Name:  '  Animal  '  ,
Age:  30  
},  ' Myinformation  '  ). Save ();
});
  </  Script  > 

Execution result:

 

Ii. sessionstorageproxy
Note: sessionstorageproxy uses the HTML5 sessinstorage API to store and load data. When the browser is closed, the data will disappear.

Example:

     <  Script  Type  = "Text/JavaScript"  > 
Ext. onready (  Function  (){
  //  Define a data model  
  Ext. Define (  '  Myinformation  '  ,{
Extend: '  Ext. Data. Model  '  ,
Fields :[{
Name:  '  ID  '  , Type:  '  Int  ' 
},{
Name:  '  Name  '  , Type:  '  String  '  
},{
Name:  '  Age '  , Type:  '  Int  '  
}],
  //  Defines the sessionstorageproxy proxy class and stores and loads data through the sessionstorage API of html5.  
  Proxy :{
Type: '  Sessionstorage  '  ,
ID:  '  Myinformation  '  
}
});
  //  Create and store a piece of data  
 Ext. modelmgr. Create ({
ID:  1  ,
Name:  '  Animal  '  ,
Age:  30  
},  ' Myinformation  '  ). Save ();

});
  </  Script  > 

Execution result:

Iii. memoryproxy

Note: memoryproxy is mainly used to load data in the Context. refreshing the page will lose or reset data, and closing the page will lose data:

Example:

 <  Script  Type  = "Text/JavaScript"  > 
Ext. onready (  Function  (){
  //  Data in JSON format  
  VaR  Data  =  {
Informations :[{
ID:  1 ,
Name:  '  Aaa  '  ,
Age:  34  
},{
ID:  2  ,
Name:  ' Bbb  '  ,
Age:  45  
}]
}
  //  Define a data model  
  Ext. Define (  '  Myinformation '  ,{
Extend:  '  Ext. Data. Model  '  ,
Fields :[{
Name:  '  ID  '  , Type:  ' Int  '  
},{
Name:  '  Name  '  , Type:  '  String  '  
},{
Name: '  Age  '  , Type:  '  Int  '  
}]
});
  //  Define a data container and load data  
 VaR  Store  =  Ext. Create (  '  Ext. Data. Store  '  ,{
Model:  '  Myinformation  ' ,
  //  Loaded class capacity  
  Data: data,
  //  Define memoryproxy and load data from local (context)  
  Proxy :{
Type:  '  Memory '  ,
Reader :{
Type:  '  JSON  '  ,
Root:  '  Informations  ' 
}
}
});
Store. Load ();

});
  </  Script  > 

Execution result: