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
02/05/2018

Working with Data

Page of 168

The Sencha Touch data package is comprised of the following three major classes:

  • Models define the fields that comprise each record.
  • Proxies define the connection between the browser and the server.
  • Stores define client-side caches of multiple model instances and handle services such as filtering, sorting, and grouping.

Defining Models

Models primarily consist of a series of field names. You can optionally define data types for each field that will cause Sencha Touch to convert processed data to a specified type. Typically you would define data types only in cases where you are reading in dates or numeric values from a data feed.

The following example illustrates a basic model definition.

Ext.define('FriendsWithBeer.model.Beer', {
 extend: 'Ext.data.Model',
 config: {
  idProperty: 'id',
  fields: [
   'id','name','type','country'
  ]
 }
});

Type Casting Data

Since Javascript is a loosely typed language, Sencha Touch enables you to cast the values read from a server into one of the following types:

  • int
  • string
  • boolean
  • float
  • date
  • auto (default)

A type of 'auto' specifies that there will not be any type conversion. Specifying a type on a field is required if your app will be performing any client-side sorting on that field. Also, you should always specify a type on date fields so that you may Sencha Touch's powerful Ext.Date methods to transform and format native javascript date objects.

The following example illustrates defining a model with type casting:

Ext.define('MyApp.model.Person', {
 extend: 'Ext.data.Model',
 config: {
  fields: [
   { name: 'id', type: 'int'},
   'fName', // string, so no conversion required 
   'lName',
   { name: 'dob', type: 'date', dateFormat: 'm/d/Y'},
  ]
 }
});
For more information about Field properties, review the following URL: http://docs.sencha.com/touch/2-1/#!/api/Ext.data.Field

Defining a New Model Instance

You can create a new instance of a model using the following syntax:

var myModel = Ext.create('MyApp.model.Person', {
  id: 1,
  fName: 'Steve',
  lName: 'Drucker',
  dob: '05/12/1978'
});

Getting and Setting Field Values

Use the Ext.data.Model.set() method to modify the contents of a field:

myModel.set('dob','05/13/1978');

Use the Ext.data.Model.get() method to retrieve the contents of a field:

var myFirstName = myModel.get('fName');
Page of 168
comments powered by Disqus