ExtJS Note Proxy

Proxies is used by Stores to handle the loading and saving of Model data. Usually developers won't need to create or interact with proxies directly.

Proxy is used by the store for loading and saving model data. Typically, developers do not need to create proxy or proxy interactions directly.

Types Types of proxy proxies

There is both main types of proxy-client and Server. The Client proxies save their data locally and include the following subclasses:

There are two main types of proxies-client and server side. The client Agent stores data locally, including the following subclasses:

• Localstorageproxy-saves its data to localstorage if the browser supports it
• Sessionstorageproxy-saves its data to sessionstorage if the browsers supports it
• Memoryproxy-holds data in memory only, any data are lost when the page is refreshed

The server proxies save their data by sending requests to some remote server. These proxies include:

The service-side agent saves data by sending a request-path remote server, including:

• Ajax-sends requests to a server on the same domain
• Jsonp-uses Json-p to send requests to a server on a different domain
• Rest-uses RESTful HTTP Methods (Get/put/post/delete) to communicate with server
• Direct-uses Ext.direct.Manager to send requests

Proxies operate on the principle-all operations performed is either Create, Read, Update or Delete. These four operations is mapped to the methods create, read, update and destroy respectively. Each Proxy subclass implements these functions.

The basic principle of the agent--all operations are limited to Create, Read, Update or delete. These four operations are mapped to create, read, Update and destroy, respectively. Each of the proxy subclasses implements these functions.

The CRUD methods each expect an operation object as the sole argument. The operation encapsulates information about the action of the Store wishes to perform, the model instances that is to be MO Dified, etc. See the operation documentation for more details. Each of the CRUD method also accepts a callback function to is called asynchronously on completion.

The Crud method requires a operation Object as a parameter. operation encapsulates information such as what the store expects to do, the model instance that needs to be modified, and so on. See the operation documentation for more details. Each Crud method also accepts an asynchronous callback function as a parameter when the operation completes.

Create ( operation, callback, scope)

Read ( operation, callback, scope)

Update ( operation, callback, scope)

Destroyoperation, callback, scope)

Proxies also support batching of Operations via a batch object, invoked by the batch method.

with batch objects, proxy also supports bulk operations.

Ajax Ajax Proxy

Ajaxproxy is one of the most widely-used ways of getting data into your application. It uses AJAX requests to load data from the server, usually to is placed into a Store. Let's take a look at a typical setup. Here we ' re going to set up a Store which has an ajaxproxy. To prepare, we'll also set up a Model:

Ajax proxies are the most widely used method in the app. It uses AJAX requests to load data from the server and is usually placed in the store. Let's take a look at the typical settings. Here we will create a store that uses an AJAX proxy. As a preparation, we build a model:

Ext.define (' User ', {    ' Ext.data.Model ', fields    : [' id ', ' name ', ' email ')}); // The Store contains the ajaxproxy as an inline configuration var store = ext.create (' Ext.data.Store ', {    ' User ',    proxy: {        ' ajax '),         ' Users.json '}    ); Store.load ();

Our example are going to load user data into a Store, so we start off by defining a Model with the fields that we expect th e Server to return. Next we set up the Store itself, along with a proxy configuration. This configuration is automatically turned into a Ext.data.proxy.Ajax instance with the URL we specified being passed I Nto ajaxproxy ' s constructor. It's as if we ' d do this:

Our example loads the user data into Stroe, and we start by defining a model that we expect to return from the server. Next, we set up the store with a proxy configuration. This configuration item automatically creates an Ext.data.proxy.Ajax instance, and the configured URL is passed in as a constructor parameter of the Ajaxproxy. It's like we're doing the following:

New Ext.data.proxy.Ajax ({    ' Users.json ',    ' User ',    ' json '});

A couple of extra configurations appeared here-model and reader. These is set by default when we create the proxy via the store-the Store already knows about the Model, and proxy ' s DEF Ault Reader is Jsonreader.

A couple of additional configurations, model and reader , appear here. These configurations are created via the store proxy is the default configuration of--store already know the model, the default reader for the agent is jsonreader.

Now if we call Store.load (), the Ajaxproxy springs into action, making a request to the URL we configured (' Users.json ' In the This case). As we ' re performing a read, it sends a GET request to the URL (see Actionmethods to customize this-by default any kind Of read would be sent as a GET request and any kind of write would be sent as a POST request).

Now, when we call Store.load (), Ajaxproxy will send a request for the URL we configured (here is ' Users.json '). When we are performing a read, it takes the GET request path to this URL (see The Actionmethods method to customize this--by default, any type of read is a GET request, and any type of write is a POST request ).

Limitations Restrictions

Ajaxproxy cannot is used to retrieve data from the other domains. If your application is running on http://domainA.com it cannot load data from http://domainB.com because browsers has a B Uilt-in security policy, prohibits domains talking to each of the other via AJAX.

Ajax proxies cannot be used to get data across domains. If your app is running in http://domainA.com, it can't load data from http://domainB.com, Because browsers have a built-in security policy to block interactions between domains when using Ajax.

If you need to read data from another domain and can ' t set up a proxy server (some software, runs on your own domain ' s Web server and transparently forwards requests to http://domainB.com, making it look like they actually came from/http domaina.com), you can use Ext.data.proxy.JsonP and a technique known as json-p (JSON with Padding), which can help you get Around the problem so long as the server on http://domainB.com are set up to support json-p responses. See Jsonpproxy ' s Introduction docs for more details.

If you need to read data from another domain and establish a proxy service (a software that runs in your own domain, forwarding the request to http://domainB.com makes it appear to be a pair of HTTP/ domaina.com access), you can use Ext.data.proxy.JsonP , a technique called json-p , which helps you to solve this problem by http://domainB.com establishes A response that supports json-p. For more details, refer to Jsonpproxy.

Readers and writers readers and writers

Ajaxproxy can configured to use any type of Reader to decode the server ' s response. If no Reader is supplied, Ajaxproxy would default to using Ajsonreader. Reader configuration can is passed in as a simple object, which the Proxy automatically turns into a reader instance:

Ajax proxies can be configured to use any type of reader to decode the server's response. If Reader,ajax is not provided, the Jsonreader will be used by default. The configuration of reader can be passed in through a simple object, and proxy will automatically convert it to the Reader class instance:

var New Ext.data.proxy.Ajax ({    ' User ',    reader: {        ' xml '        , ' users '      //Returns an XmlReader instance based on the config we supplied

URL Generation URL Generation

Ajaxproxy automatically inserts any sorting, filtering, paging and grouping options to the URL it generates for each req Uest. These is controlled with the following configuration options:

The AJAX proxy automatically inserts any sorting, filtering, paging, grouping options into each URL request it generates. These are provided by the following configuration options:

• Pageparam-controls how the page number was sent to the server (see also Startparam and Limitparam) control page numbers
• Sortparam-controls How sort information are sent to the server sort
• Groupparam-controls How grouping information are sent to the server group information
• Filterparam-controls How filter information are sent to the server filter

Each request sent by Ajaxproxy are described by an operation. To see how we can customize the generated URLs, let's say we ' re loading the Proxy with the following operation:

Each request that Ajax sends is described by a operation pair. Let's look at how to define the generated URL:

var New Ext.data.Operation ({    ' read ',    page  2});

Now we'll issue the request for this operation by calling read:

Now, send this request by calling read:

var New Ext.data.proxy.Ajax ({    '/users '//get/users?page=2

Easy Enough-the Proxies Just copied the page property from the operation. We can customize how this page data was sent to the server:

Very simply, proxy copies the page property only from operation . We can define how page numbers are sent to the server:

var New Ext.data.proxy.Ajax ({    '/users ',    ' pagenumber '//get/users? pagenumber=2

Alternatively, our operation could has been configured to send start and limit parameters instead of page:

Alternatively, theoperation can be configured to send the start and limit parameters instead of the specific page number:

var New Ext.data.Operation ({    ' read '    ,    ' + '); var New Ext.data.proxy.Ajax ({    '/users '//get/users?start=50&limit;=25 

Again We can customize this URL:

We can customize this URL again:

var New Ext.data.proxy.Ajax ({    '/users ',    ' StartIndex ',    ' limitindex '    get/users?startindex=50&limitindex;=25

Ajaxproxy would also send sort and filter information to the server. Let's take a look at how this looks with a more expressive operation object:

The AJAX proxy also automatically sends sorting and filtering information to the server. Let's see:

 var  operation = new   Ext.data.Operation ({action:  ' read '  new   Ext.util.Sorter ({property:  ' name '  new   Ext.util.Sorter ({property:  ' age '  new   Ext.util.Filter ({property:  ' Eyecolor '  ' Brown '  
 

This is the type of object which is generated internally when loading a Store with sorters and filters defined. By default the Ajaxproxy would JSON encode the sorters and filters, resulting in something like this (note that the URL is Escaped before sending the request, but was left unescaped here for clarity):

This is an object that is automatically created when you load a store that includes sorting and filtering definitions. By default, the AJAX proxy encodes the sorting and filtering in JSON format, and the results are as follows (note that URLs are escaped when sent, but not escaped for reading).

var New Ext.data.proxy.Ajax ({    '/users '//get/users?sort=[{"property": "Name", " Direction ":" ASC "},{" property ": ' Age ', ' direction ':" DESC "}]&filter;=[{" property ":" Eyecolor "," value ":" Brown "}] 

We can again customize how this was created by supplying a few configuration options. Let's say our servers are set up to receive sorting information are a format like "Sortby=name#asc,age#desc". We can configure Ajaxproxy to provide the format like this:

We can customize it again through configuration items. Our server receives a sort expression such as "Sortby=name#asc,age#desc". We can configure Ajaxproxy to provide this format:

 varProxy =NewExt.data.proxy.Ajax ({URL:'/users ', Sortparam:' SortBy ', Filterparam:' Filterby ',     //Our custom implementation of Sorter Encoding-turns we sorters into "Name#asc,age#desc"Encodesorters:function(sorters) {varLength =Sorters.length, Sortstrs=[], Sorter, I;  for(i = 0; i < length; i++) {Sorter=Sorters[i]; Sortstrs[i]= Sorter.property + ' # ' +Sorter.direction}returnSortstrs.join (","); } }); Proxy.read (operation); //get/users?sortby=name#asc,age#desc&filterby;=[{"Property": "Eyecolor", "value": "Brown"}]

We can also provide a custom encodefilters function to encode our filters.

We can also provide a custom encodefilters function to encode our filters.

ExtJS Note Proxy