Guide applies to: modern

Introduction

In this lab, you’ll populate a data store from the the iTunes data feed.

Steps

1.Define the record

Create the folder and file app/desktop/src/model/Tune.js with this code:

  1. Ext.define('ModernTunes.model.Tune', {
  2.     extend: 'Ext.data.Model',
  3.     requires: ['Ext.data.proxy.JsonP'],
  4.     fields: [{
  5.         name: 'id',
  6.         mapping: 'id.attributes["im:id"]'
  7.     }, {
  8.         name: 'title',
  9.         mapping: '["im:name"].label'
  10.     }, {
  11.         name: 'image',
  12.         mapping: '["im:image"][2].label'
  13.     }, {
  14.         name: 'artist',
  15.         mapping: '["im:artist"].label'
  16.     }, {
  17.         name: 'itunesstore',
  18.         mapping: 'link[0].attributes.href'
  19.     }, {
  20.         name: 'preview',
  21.         mapping: 'link[1].attributes.href'
  22.     }, {
  23.         name: 'release_date',
  24.         mapping: '["im:releaseDate"].attributes.label'
  25.     }],
  26.     proxy: {
  27.         type: 'jsonp',
  28.         url: 'https://itunes.apple.com/us/rss/topmusicvideos/limit=50/json',
  29.         reader: {
  30.             type: 'json',
  31.             rootProperty: 'feed.entry'
  32.         }
  33.     }
  34. });

2.Create the tunes store in the view model

Edit app/desktop/src/view/main/MainViewModel.js, remove data object from the generated app Add a tunes store that uses Tune model with autoLoad: true

  1. Ext.define('ModernTunes.view.main.MainViewModel', {
  2.     extend: 'Ext.app.ViewModel',
  3.     alias: 'viewmodel.mainviewmodel',
  4.     requires: [
  5.         'ModernTunes.model.Tune'
  6.         ],
  7.     stores: {
  8.         tunes: {
  9.             model: 'ModernTunes.model.Tune',
  10.             autoLoad: true
  11.         }
  12.     }
  13. });

3.Test the store

Save your changes. Check the browser to view your updated changes. Using browser developer tools, find itunes in the network traffic in the ‘Network’ tab and you should see the call to https://itunes.apple.com/us/rss/topmusicvideos. Lab: Tunes — Fetch the Data - 图1

(In versions before 6.5, the store is created +lazily+ — only after the view model is referenced. In that case, you wouldn’t see traffic yet.)

You can see how many records were fetched by running this on the console line:

  1.     Ext.first('mainview').getViewModel().getStore('tunes').getCount(); // 50

With the data now available to the app we can begin creating user interface compoonents that can take advantage it.