Store Proxies in Sencha Touch 2

Before reading this article please go through the following articles.

Introduction

In the last article, we saw how to perform CRUD operations in Sencha Touch MVC where we performed the CRUD operations using a local-storage proxy. In this article, we will see various types of proxies supported by the Sencha Touch store. Since we have already seen two of them in our previous articles, in this article we will see all the proxies supported by Sencha Touch 2 store with an example. So let's get started.

Types of Proxies

As all of us know, there are two main types of proxies, in other words, Client proxy and Server proxy. Here Sencha Touch supports both of the proxies. These two main proxies again are categorized as below.

Client Proxies

Proxies that perform the operations on the client end are known as client proxies. A client proxy has two more sub-types. Sencha Touch supports both of them.

Local-Storage Proxy
In-Memory Proxy

Server Proxies

Proxies useful for performing operations on a server are known as server proxies. Sencha Touch has the following 2 types of server proxies.

Ajax Proxy
JSON-P Proxy

Next, we will go through each of the proxies stated above one by one with example usage.

A. Local-Storage Proxy

A local-storage proxy that we already saw in our last article to perform the CRUD operations using Sencha Touch MVC where we stated that a local-storage proxy uses HTML5 local-storage API. A local-storage proxy cannot save complex data like JSON objects because this is based on key-value pairs hence a local-storage save and retrieve operation automatically serializes and deserializes the data.

The advantage of using a local-storage proxy is that we do not need an internet connection to develop an offline application for mobiles. Have a look at the following snippet to understand local-storage proxies.

Ext.application({
launch: function () {//Entry point
Ext.define('Users', {
extend: 'Ext.data.Model',
config: {
fields: ['Name']
}
});
var store = Ext.create('Ext.data.Store', {
model: "Users",
proxy: {
type: 'localstorage',
id: 'UserLocalProxy'
}
});
var touchTeam = Ext.create('Ext.List', {
fullscreen: true,
store: store,
itemTpl: '<div>{Name} is member of C-sharp corner.</div>'
});
Ext.Viewport.add(touchTeam);
}
});

B. In-Memory proxy

An in-memory proxy is nothing but a variable that holds data. If we use in-memory proxies then the data loss occurs on every page refresh. This proxy is defined to use local data globally.

Ext.application({
launch: function () {//Entry point
//define model
Ext.define('Users', {
extend: 'Ext.data.Model',
config: {
fields: ['Name']
}
});
//define store with memory proxy i.e. inline data
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
model: 'Users',
data: [{Name:'Krishna Garad'},{Name:'Mahesh Chand'}],
proxy: {
type: 'memory'
}
});
var touchTeam = Ext.create('Ext.List', {
fullscreen: true,
store: store,
itemTpl: '<div>{Name} is member of C-sharp corner.</div>'
});
Ext.Viewport.add(touchTeam);
}
});

C. Ajax Proxy

Until now we have seen client-side proxies. Next, we will move to server-side proxies. For CRUD operations on the same server that our application resides, we can use Ajax proxies. Using Ajax proxies you make a server request to fetch, write, delete, or update the data on the same server. For example, your application resides at abc.com and you need to perform a data operation; then you must make a request to abc.com resources only using an Ajax proxy.

Here is the snippet to use Ajax server proxies.

Ext.application({
launch: function () {//Entry point
//define model
Ext.define('Users', {
extend: 'Ext.data.Model',
config: {
fields: ['Name']
}
});
//define store with Ajax proxy
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
model: 'Users',
proxy: {//server proxy
type: 'ajax',
header: {
"Content-Type": "application/json"
},
actionMethods: {//methods to perform individual task
read: 'GET',
create: 'POST'
},
api: {//to perform set of actions
read: '/users.json',
create: 'create url',
destroy: 'delete url',
update: 'update url'
},
reader: {
type: 'json',
rootProperty: 'users'
}
}
});
var touchTeam = Ext.create('Ext.List', {
fullscreen: true,
store: store,
itemTpl: '<div>{Name} is member of C-sharp corner.</div>'
});
Ext.Viewport.add(touchTeam);
}
});

D. J-SonP proxy

Above we have seen that Ajax proxies are limited to making a server request for CRUD operations when we need to fetch, write, update, or delete data on the same server. In some cases we need to fetch data from another server other than our application server then we can use J-SonP proxies. For example, your application is hosted at abc.com and needs to fetch data from xyz.com; then you can use j-SonP proxies to do that.

Let's say you need to fetch a RSS feed from csharp-corner.com and display it in your application; we can then use jsonp proxies. Have a look at the following snippet.

Ext.application({
launch: function () {//Entry point
Ext.define('Articles', {
extend: 'Ext.data.Model',
config: {
fields: ['title', 'description','link']
}
});
var store = Ext.create('Ext.data.Store', {
model: 'Articles',
header: {
"Content-Type": "application/xml"
},
proxy: {
type: 'jsonp',
url: 'http://www.c-sharpcorner.com/rss/latestarticles.aspx'
},
reader: {
type: 'xml',
record: 'item'
}
});
store.load();
var touchTeam = Ext.create('Ext.List', {
fullscreen: true,
store: store,
itemTpl: '<div>{title}</br>{description}</div>'
});
Ext.Viewport.add(touchTeam);
}
});

Other than this there are more types of proxies, like Session storage, Rest proxies and Direct proxies that are all supported by Sencha Touch.

Conclusion

As we saw above, the Sencha Touch framework has a wide range of proxy support. To do any kind of data operation Sencha Touch provides various kinds of proxies.