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

Working with Embedded Data Objects

Page of 168

In some cases you may be tasked with parsing embedded objects from the data feed into your model. For example, note that the following JSON structure contains an embedded object holding the first and last name values for the record:

[
 {
  name: {
    first: 'Steve',
    last: 'Drucker'
  },
  company: 'Fig Leaf Software',
  email: 'sdrucker@figleaf.com'
 }
]

There are three distinct methods that you can employ:

  • Use the Ext.data.Field mapping property to place a specified value from a JSON dataset into a field.
  • Define an Ext.data.Field convert method to generate a calculated value from an embedded object in the dataset.
  • Define an Association between models (not covered in this course)

Using Field Mappings

Use the mapping property of a field to extract values stored in embedded javascript objects by using dot-notation:

Ext.create('MyApp.model.Person', {
  extend: 'Ext.data.Model',
  fields: [
    {
     name: 'firstName',
     mapping: 'name.first'
    },
    {
     name: 'lastName',
     mapping: 'name.last'
    },
    {
     name: 'company'
    },
    {
     name: 'email'
    }
  ],
  proxy: {
    // proxy definition typically goes here
  }
});

Use the Convert Property to Transform Data

Use the convert property of a field to define a data transformation function as illustrated by the following example. The first argument passed to the convert() method is the value of the field in the dataset (if one exists). The second argument is the record instance after all of the other fields have been populated from the dataset. Also, note the use of the Ext.String.format() method which is used to concatenate string values.

Ext.create('MyApp.model.Person', {
  extend: 'Ext.data.Model',
  fields: [
    { name: 'firstName', mapping: 'name.first'},
    { name: 'lastName',  mapping: 'name.last'},
    {
     name: 'fullName',
     convert: function(v,rec) {
       return Ext.String.format("{0} {1}",
			                rec.get('firstName'),
			                rec.get('lastName'));
     }
    }
    {
     name: 'company'
    }
  ],
  proxy: {
    // proxy definition typically goes here
  }
})
Page of 168
comments powered by Disqus