Post
Ask Question

Store Proxies in Sencha Touch 2

Before reading this article please go through the following articles.
  1. Introduction to Sencha Touch 2
  2. Hello World App using Sencha Touch 2
  3. Sample form application using Sencha Touch 2
  4. Dealing with containers in Sencha Touch 2
  5. Working with DataBound Controls
  6. Introduction to MVC in Sencha Touch 2
  7. Create your first MVC application using Sencha Touch 2
  8. 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.
  1. Local-Storage Proxy
  2. 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.
  1. Ajax Proxy
  2. 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.
  1. Ext.application({  
  2. launch: function () {//Entry point  
  3. Ext.define('Users', {  
  4. extend: 'Ext.data.Model',  
  5. config: {  
  6. fields: ['Name']  
  7. }  
  8. });  
  9. var store = Ext.create('Ext.data.Store', {  
  10. model: "Users",  
  11. proxy: {  
  12. type: 'localstorage',  
  13. id: 'UserLocalProxy'  
  14. }  
  15. });  
  16. var touchTeam = Ext.create('Ext.List', {  
  17. fullscreen: true,  
  18. store: store,  
  19. itemTpl: '<div>{Name} is member of C-sharp corner.</div>'  
  20. });  
  21. Ext.Viewport.add(touchTeam);  
  22. }  
  23. }); 

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.
  1. Ext.application({  
  2. launch: function () {//Entry point  
  3. //define model  
  4. Ext.define('Users', {  
  5. extend: 'Ext.data.Model',  
  6. config: {  
  7. fields: ['Name']  
  8. }  
  9. });  
  10. //define store with memory proxy i.e. inline data  
  11. var store = Ext.create('Ext.data.Store', {  
  12. autoLoad: true,  
  13. model: 'Users',  
  14. data: [{Name:'Krishna Garad'},{Name:'Mahesh Chand'}],  
  15. proxy: {  
  16. type: 'memory'  
  17. }  
  18. });  
  19. var touchTeam = Ext.create('Ext.List', {  
  20. fullscreen: true,  
  21. store: store,  
  22. itemTpl: '<div>{Name} is member of C-sharp corner.</div>'  
  23. });  
  24. Ext.Viewport.add(touchTeam);  
  25. }  
  26. }); 

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.
  1. Ext.application({  
  2. launch: function () {//Entry point  
  3. //define model  
  4. Ext.define('Users', {  
  5. extend: 'Ext.data.Model',  
  6. config: {  
  7. fields: ['Name']  
  8. }  
  9. });  
  10. //define store with Ajax proxy  
  11. var store = Ext.create('Ext.data.Store', {  
  12. autoLoad: true,  
  13. model: 'Users',  
  14. proxy: {//server proxy  
  15. type: 'ajax',  
  16. header: {  
  17. "Content-Type": "application/json"  
  18. },  
  19. actionMethods: {//methods to perform individual task  
  20. read: 'GET',  
  21. create: 'POST'  
  22. },  
  23. api: {//to perform set of actions  
  24. read: '/users.json',  
  25. create: 'create url',  
  26. destroy: 'delete url',  
  27. update: 'update url'  
  28. },  
  29. reader: {  
  30. type: 'json',  
  31. rootProperty: 'users'  
  32. }  
  33. }  
  34. });  
  35. var touchTeam = Ext.create('Ext.List', {  
  36. fullscreen: true,  
  37. store: store,  
  38. itemTpl: '<div>{Name} is member of C-sharp corner.</div>'  
  39. });  
  40. Ext.Viewport.add(touchTeam);  
  41. }  
  42. }); 

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.
  1. Ext.application({  
  2. launch: function () {//Entry point  
  3. Ext.define('Articles', {  
  4. extend: 'Ext.data.Model',  
  5. config: {  
  6. fields: ['title', 'description','link']  
  7. }  
  8. });  
  9. var store = Ext.create('Ext.data.Store', {  
  10. model: 'Articles',  
  11. header: {  
  12. "Content-Type": "application/xml"  
  13. },  
  14. proxy: {  
  15. type: 'jsonp',  
  16. url: 'http://www.c-sharpcorner.com/rss/latestarticles.aspx'  
  17. },  
  18. reader: {  
  19. type: 'xml',  
  20. record: 'item'  
  21. }  
  22. });  
  23. store.load();  
  24. var touchTeam = Ext.create('Ext.List', {  
  25. fullscreen: true,  
  26. store: store,  
  27. itemTpl: '<div>{title}</br>{description}</div>'  
  28. });  
  29. Ext.Viewport.add(touchTeam);  
  30. }  
  31. }); 
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.


Similar Articles