Guide applies to: modern

Introduction

In this lab, you’ll create the Dataview for the thumbnails.

1.Create the dataview

Create the file app/desktop/src/view/TunesView.js with this code:

  1.     Ext.define('ModernTunes.view.TunesView', {
  2.         extend: 'Ext.dataview.DataView',
  3.         xtype: 'tunesview',
  4.         scrollable: true,
  5.         layout: {
  6.             type: 'box',
  7.             pack: 'space-around',
  8.             wrap: true
  9.         },
  10.         itemTpl: [
  11.             '<figure>',
  12.             '<div class="thumbnail" style="background-image:url(\'{image}\')"></div>',
  13.             '<figcaption><div class=\'title\'>{title}</div><div class=\'artist\'>{artist}</div></figcaption>',
  14.             '</figure>'
  15.         ]
  16.     });

The itemTpl allows the injection of html and css around the data available per record.

2.Use the dataview

Edit app/desktop/src/view/main/MainView.js and:

  • Add ModernTunes.view.TunesView to the requires array to indicate this file is ‘required’ for the application’s eventual build
  • Make sure requires array includes MainViewController and MainViewModel
  1. requires: [
  2.     'ModernTunes.view.main.MainViewController',
  3.     'ModernTunes.view.main.MainViewModel',
  4.     'ModernTunes.view.TunesView'
  5.   ],
  • Replace the html placeholder we had for the dataview in the items array for Thumbnails with the xtype assigned to the TuneView class, called tunesview. Later on we will do the same with the grid.
  1. xtype: 'tunesview',

  • In same Thumbnails object, bind the item’s store property to {tunes} store in MainViewModel.js

    1.   bind: {
    2.            store: '{tunes}'
    3.         }

Save your changes and you should see the scrollable list of top iTunes music videos. This list is not styled and we will work on that in the next section.

3.Here’s the code for MainView

If you’d like to check your work, app/desktop/src/view/main/MainView.js should end up looking something like this.

  1.         Ext.define("ModernTunes.view.main.MainView", {
  2.             extend: "Ext.tab.Panel",
  3.             xtype: 'mainview',
  4.             requires: [
  5.                 'ModernTunes.view.main.MainViewController',
  6.                 'ModernTunes.view.main.MainViewModel',
  7.                 'ModernTunes.view.TunesView'
  8.             ],
  9.             controller: "mainviewcontroller",
  10.             viewModel: {
  11.                 type: "mainviewmodel"
  12.             },
  14.             tabBarPosition: 'bottom',
  16.             items: [{
  17.                 title: "Thumbnails",
  18.                 xtype: 'tunesview',
  19.                 bind: {
  20.                     store: '{tunes}'
  21.                 }
  22.             }, {
  23.                 title: "Grid",
  24.                 html : "<h1>tunes grid </h1>"
  25.             }]
  26.         });

4.Sort the data

It would be nice to see the data sorted by title within artist. To do that, edit app/desktop/src/view/main/MainViewModel.js and modify the +tunes+ store like this:

  1.     stores: {
  2.         tunes: {
  3.             model: 'ModernTunes.model.Tune',
  4.             autoLoad: true,
  5.             sorters: ['artist', 'title']
  6.         }
  7.     }

Save, and you should see the thumbnails sorted accordingly.