EXTJS4 Study (vii) Data Agent Proxy

Ext Data Agent We introduce five kinds of common

Ext.data.proxy.Ajax

Ajaxproxy (Ajax Data proxy class) is the most widely used way to get data in your application. It uses AJAX requests to fetch data from the server, and then typically put them in Store . Let's look at a typical configuration. Here we set up a ajaxproxy agent for a store. First we have a Model:

Ext.define (' User ', {    extend: ' Ext.data.Model ', fields    : [' id ', ' name ', ' email ')});

And then we'll see what the AJAX configuration and methods are.

Create an Ajax proxy var ajaxproxy = new Ext.data.proxy.Ajax ({url: ' Data.json ', Model: ' User ',/*reader: ' JSON ', */reader: {type: "JS On "},pageparam: ' PageNo ',//modifiable, default Pagelimitparam: ' PageSize ',//modifiable, default limitactionmethods: {        Create: ' POST ',        Read   : ' Post ',        update: ' Post ',        destroy: ' Post '}} '; Ajaxproxy.dorequest (new Ext.data.Operation ({action: ' Read ',///Set Request action for readlimit:15,start:0,sorters: [New Ext.util.Sorter ({property: ' Name ', direction: ' ASC '}]}), function (obj) {var responsetext = Obj.response.responsetext;alert (Ext.JSON.decode (responsetext) [' name ']);//Get RAW response data print ' {name: ' Somnus '} "alert (responsetext);//Get Total records var totalrecords = Obj.resultset.totalrecords;alert (' Read remote data using an AJAX proxy, record always: ' + totalrecords);//get record array var records = Obj.resultset.records;alert (records);});

Ext.data.proxy.JsonP

The JSONP agent is used when you want to load data from a domain name other than your own application server (cross-domain calls). For example, if your application is running on http://domainA.com, you cannot load data from http://domainB.com via Ajax because the browser does not allow cross-domain AJAX requests.

We can get rid of this limitation by JSONP agent. Whenever an AJAX request is made, the JSONP agent injects a label into the DOM <script> . For example, if we want to load the data from the Http://domainB.com/users URL, we will inject a script tag like this:

<script src= "Http://domainB.com/users?callback=someCallback" ></script>

after we inject this tag, the browser sends a request to the URL. Through callback in the URL, we notify the server of DOMAINB: Call this callback function and pass in the returned data when the result is returned. As long as the server will make the response result in the following format, The call succeeded:

Ext.regmodel ("User", {fields:[{name: ' name ', type: ' String '}],proxy:{type: ' Jsonp ',//proxy URL for cross-domain interaction: '/HTTP Www.uspcat.com/extjs/person.php '}}); var person = Ext.ModelManager.getModel (' User ');p erson.load (1,{scope:this, Success:function (model) {alert (model.get (' name '));}});

Ext.data.proxy.LocalStorage

Localstorageproxy uses the latest HTML5 local database API to save the model data to the local client. HTML5 The local database is a key-value pair store (such as a complex object such as JSON cannot be stored), so Localstorageproxy is automatically serialized and deserialized when the data is saved and read.

Local databases are useful for saving user personal information, eliminating the need to build data structures on the server side.

Ext.define (' User ', {fields    : [' id ', ' name '],    extend: ' Ext.data.Model ',    proxy: {        type: ' Localstorage '    }});

var store = new Ext.data.Store ({model: ' User '}); Store.add ({name: ' Somnus '});//Save Data Store.sync ();//Read Data store.load (); Store.each (function (record) {Console.info (record.get (' name '));});

EXTJS4 Study (vii) Data Agent Proxy