Before reading this article please go through the following articles.
- Introduction to Sencha Touch 2
- Hello World App using Sencha Touch 2
- Sample form application using Sencha Touch 2
- Dealing with containers in Sencha Touch 2
- Working with DataBound Controls
- Introduction to MVC in Sencha Touch 2
- Create your first MVC application using Sencha Touch 2
- Perform CRUD operation using Sencha Touch MVC
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 an 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 saw that Ajax proxies are limnited 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.