Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Defining a Proxy

Page of 168

Models provide a one to one mapping between our client and remote data sources. Once the model is defined, loading the models with data is handled through a proxy. Sencha Touch and Ext JS 4 include the following proxies:

  • Local Storage - The Local Storage object is an HTML5 feature for storing data locally in the browser. Unlike cookies the local storage object allows storage of up to 5 MB of data, and many mobile browsers now allow larger amounts of storage to be allocated.
  • Local Database (SQL) - Sencha introduced a WebSQL proxy in Sencha Touch 2.1 that enables you to easily create client-side relational databases.
  • Ajax - Ajax proxies are limited to request within the same domain.
  • JSON-P - JSON-P uses the script tag to access data that lives in another domain.
  • REST - The REST proxy supports the RESTful URL structure and HTTP methods.
  • SOAP - The SOAP proxy enables you to access SOAP-based web services.

Each proxy can optionally define a reader and writer property. The reader property specifies the format of the data that will be received from the server. The writer determines the format used to send data back to a remote service. Proxies assume that the default format will be JSON (Java Script Object Notation), however, an XML reader and writer is also available.

Defining an AJAX Proxy

The following example illustrates defining an AJAX proxy that reads a static JSON file from the local web server:

 

data/beers.json
Ext.define('FriendsWithBeer.model.Beer', {
 extend: 'Ext.data.Model',
 requires: ['Ext.data.proxy.Ajax'],
 config: {
  idProperty: 'id',
  fields: [
   { name: 'id' },
   { name: 'name'},
   { name: 'type'},
   { name: 'country'}
  ],
  proxy: {
   type: 'ajax',
   url: 'data/beers.json',
   reader: {
     type: 'json'
   }
  }
 }
}); 

Defining a LocalStorage Proxy

LocalStorage proxies are defined using the following syntax. Note that you must specify a unique identifier that is used by Sencha Touch to create unique key names in the HTML5 LocalStorage repository.

Ext.define('FriendsWithBeer.model.Contact', {
 extend: 'Ext.data.Model',
 requires: [
  'Ext.data.proxy.LocalStorage',
  'Ext.data.identifier.Uuid'
 ],
 config: {
  identifier: 'uuid',
  fields: [
   'firstName','lastName'
  ],
  proxy: {
   type: 'localstorage',
   id: 'FriendsWithBeerContacts'
  }
 }
}); 
Page of 168
comments powered by Disqus