Proxy of ExtJS4.x Data Model

1. overview Proxy data Proxy is the main way to read and write data. The data Proxy classes provided by ExtJS mainly include Ext. data. proxy. client proxy and Ext. data. proxy. server proxy, all of which are inherited from Ext. data. proxy. pro... synta

1. Basic overview
Proxy data Proxy is the main way to perform data read/write operations. The data Proxy classes provided by ExtJS mainly include Ext. data. proxy. client proxy and Ext. data. proxy. server proxy, all of which are inherited from Ext. data. proxy. proxy class. sub-classes of client Proxy and server Proxy are as follows:
Client proxy:
● Ext. data. proxy. Memory
● Ext. data. proxy. WebStorage
● Ext. data. proxy. LocalStorage
● Ext. data. proxy. SessionStorage
Server Proxy:
● Ext. data. proxy. Ajax
● Ext. data. proxy. Rest
● Ext. data. proxy. JsonP
2. Ext. data. proxy. Proxy
Ext. data. proxy. proxy is the parent class of all Proxy classes. It provides the basic data operation methods: CRUD, namely Create (Create), Read (Read), Update (Update), Delete (Delete ). Each CRUD method obtains the unique Ext. data. Operation object as the parameter, which encapsulates the detailed content of the Operation. In addition, each CRUD method can specify a callback function to process the data.
3. Ext. data. proxy. Memory
Ext. data. proxyMemory is a simple data proxy that uses memory variables to access data. Therefore, data is lost every time a page is refreshed.
1. (function (){
2. Ext. onReady (function (){
3. Ext. regModel ('user ',{
4. fields :[
5. {name: 'name', type: 'string '},
6. {name: 'age', type: 'int '}
7.]
8 .});
9.
10. var data = [
11. {'name': 'elvin. Cracker ', 'age': 24}
12.];
13.
14. var proxy = Ext. create ('ext. data. proxy. Memory ',{
15. data: data,
16. model: 'user'
17 .});
18.
19. proxy. read (new Ext. data. Operation (), function (result ){
20. var array = result. resultSet. records;
21. Ext. Array. each (array, function (record ){
22. alert (record. get ('name '));
23 .});
24 .});
25 .});
26 .})();
In fact, we can think that the data proxy is a bridge between the model and the data. The data proxy establishes the relationship between them and then performs related GRUD operations through the data proxy.
3. Ext. data. proxy. LocalStorage
Ext. data. proxy. localStorage is Ext. data. proxy. A subclass of WebStorage, which is often used to save user information that does not need to be stored on the server. This information will not disappear after the browser is closed and can be saved for a long time.
1. (function (){
2. Ext. onReady (function (){
3. Ext. regModel ('user ',{
4. fields :[
5. {name: 'name', type: 'string '},
6. {name: 'age', type: 'int '}
7.],
8. proxy :{
9. type: 'localstore ',
10. id: 'user-searchel'
11 .}
12 .});
13.
14. var store = new Ext. data. Store ({
15. model: user
16 .});
17.
18. store. add ({'name': 'elvin. Cracker ', 'age': 24 });
19.
20. // Save the data
21. store. sync ();
22.
23. // read data
24. store. load ();
25.
26. var message = []
27. store. each (function (record ){
28. message. push (record. get ('name '));
29 .});
30. alert (message. join ('\ n '));
31 .});
32 .})();
4. Ext. data. proxy. SessionStorage
Ext. data. proxy. sessionStorage is Ext. data. proxy. the subclass of WebStorage, which is different from Ext. data. proxy. the difference between LocalStorage and LocalStorage is that when the browser is closed, data will be lost, and it is not suitable for long-term data storage. In addition, it is used in the same way as the LocalStorage proxy.
1. (function (){
2. Ext. onReady (function (){
3. Ext. regModel ('user ',{
4. fields :[
5. {name: 'name', type: 'string '},
6. {name: 'age', type: 'int '}
7.],
8. proxy :{
9. type: 'sessionstorage ',
10. id: 'user-searchel'
11 .}
12 .});
13.
14. var store = new Ext. data. Store ({
15. model: user
16 .});
17.
18. store. add ({'name': 'elvin. Cracker ', 'age': 24 });
19.
20. // Save the data
21. store. sync ();
22.
23. // read data
24. store. load ();
25.
26. var message = []
27. store. each (function (record ){
28. message. push (record. get ('name '));
29 .});
30. alert (message. join ('\ n '));
31 .});
32 .})();
5. Ext. data. proxy. Ajax
Ext. data. proxy. ajax is the most widely used data proxy method. It uses Ajax to read and write data by requesting the specified URL. It cannot read cross-Origin data. If you need to read cross-Origin data, you can use Ext. data. proxy. the JsonP implementation is not described too much here.
1. (function (){
2. Ext. onReady (function (){
3. Ext. regModel ('user ',{
4. fields: [{name: 'name', type: 'string'}],
5. proxy :{
6. type: 'sessionstorage ',
7. id: 'user-searchel'
8 .}
9 .});
10.
11. var proxy = new Ext. data. proxy. Ajax ({
12. url: '/proxy/ajax /',
13. model: 'user ',
14. reader: 'json ',
15. limitParam: 'indexlimit'
16 .});
17.
18. // Ext. data. Operation () is a read Operation by default.
19. proxy. doRequest (new Ext. data. Operation ({
20. action: 'read ',
21. limit: 10,
22. start: 1,
23. sorters :[
24. new Ext. util. Sorter ({
25. property: 'name ',
26. direction: 'asc'
27 .})
28.]
29.}), function (operation ){
30. var text = operation. response. responseText;
31. alert (Ext. JSON. decode (text) ['name']);
32 .});
33 .});
34 .})();
The data returned by the request server is parsed using Ext. JSON. decode, And the request URL is/proxy/ajax/. Here we use Django as the server language.
Urls. py
1. urlpatterns = patterns ('',
2. url (R' ^ $ ', 'Views. home', name = 'home '),
3. url (R' ^ proxy/ajax/', 'Views. ajax '),
4 .)
Views. py
1. from django. shortcuts import render_to_response
2. from django. http import HttpResponse
3. import json
4.
5. def home (request ):
6. return render_to_response('ajax.html ')
7.
8. def ajax (request ):
9. return HttpResponse (json. dumps ({"name": "Elvin. Cracker"}), mimetype = "application/json ")
At the same time, let's take a look at the set of data parameters that firebug parses ExtJS passed to the background:
1. _ dc 1339857488033
2. indexLimit 10
3. sort [{"property": "name", "direction": "ASC"}]
4. start 1

 

Author: reminiscence kite