Guide applies to: modern

Introduction

In this lab, you’ll make tuneview look better. That requires making the items float, and assigning a fixed height and width — that’s done through Sass and CSS.

1.Create a Sass file

Create a new file app/desktop/src/view/TunesView.scss with the following content.

  2. .tunes-view {
  3.     background-color: #eeeeee;
  4.     -webkit-transition: -webkit-filter 250ms;
  5.     transition: -webkit-filter 250ms;
  6.     -o-transition: filter 250ms;
  7.     -moz-transition: filter 250ms;
  8.     transition: filter 250ms;
  9.     transition: filter 250ms, -webkit-filter 250ms;
  10. }
  12. .blur .tunes-view {
  13.     -webkit-filter: blur(5px) grayscale(80%);
  14.             filter: blur(5px) grayscale(80%);
  15. }
  17. .video:hover {
  18.     -webkit-transform: scale(1.10);
  19.     -moz-transform: scale(1.10);
  20.     -o-transform: scale(1.10);
  21.     transform: scale(1.10);
  22.     box-shadow: 2px 2px 10px rgba(0,0,0,.2);
  24.     .thumbnail {
  25.         -webkit-filter: none;
  26.                 filter: none;
  27.     }
  28. }
  30. .video {
  31.     -webkit-transition: transform 500ms ease;
  32.     -moz-transition: transform 200ms ease;
  33.     -o-transition: transform 200ms ease;
  34.     -webkit-transition: -webkit-transform 200ms ease;
  35.     transition: -webkit-transform 200ms ease;
  36.     -o-transition: -o-transform 200ms ease;
  37.     -moz-transition: transform 200ms ease, -moz-transform 200ms ease;
  38.     transition: transform 200ms ease;
  39.     transition: transform 200ms ease, -webkit-transform 200ms ease, -moz-transform 200ms ease, -o-transform 200ms ease;
  40.     width: 16vw;
  41.     height: 16vw;
  42.     text-align: center;
  43.     background: #fff;
  44.     color: #777;
  46.     margin: 1.2vw;
  47.     cursor: pointer;
  49.     .thumbnail {
  50.         width: 100%;
  51.         height: 100%;
  52.         background-size: cover;
  53.         -webkit-transition: -webkit-filter 300ms;
  54.         transition: -webkit-filter 300ms;
  55.         -o-transition: filter 300ms;
  56.         -moz-transition: filter 300ms;
  57.         transition: filter 300ms;
  58.         transition: filter 300ms, -webkit-filter 300ms;
  59.         -webkit-filter: grayscale(80%);
  60.                 filter: grayscale(80%);
  61.     }
  63.     figure {
  64.         display: -webkit-box;
  65.         display: -webkit-flex;
  66.         display: -moz-box;
  67.         display: flex;
  68.         -webkit-box-orient: vertical;
  69.         -webkit-box-direction: normal;
  70.         -webkit-flex-direction: column;
  71.            -moz-box-orient: vertical;
  72.            -moz-box-direction: normal;
  73.                 flex-direction: column;
  74.         -webkit-box-align: center;
  75.         -webkit-align-items: center;
  76.            -moz-box-align: center;
  77.                 align-items: center;
  78.         height: 100%;
  79.         margin: 0;
  80.     }
  81.     figcaption {
  82.         position: absolute;
  83.         left: 0;
  84.         bottom: 0;
  85.         width: 100%;
  86.         padding: .25vw 1vw;
  87.         font-size: 1.1vw;
  88.         overflow: hidden;
  89.         background-color: rgba(0,0,0, .5);
  90.         color: white;
  91.         .title, .artist {
  92.             overflow: hidden;
  93.             text-overflow: ellipsis;
  94.             white-space: nowrap;
  95.         }
  96.         .title {
  97.             font-weight: bold;
  98.         }
  99.     }
  100. }

Look at the Sass and note the video and video:hover styles.

They have the following noteworthy characteristics:

video:

  • height, width and margin styles for sizing and spacing of thumbnails
  • float settings to allow the block thumbnails to display as inline, therefore being able to display rows of thumbnails instead of a single column
  • transition specifies that the animation over the thumbnail will take around 1/2 a second to execute
  • figure and figcaption are SASS-enabled nested styles for the image, title and artist video:hover:
  • transform is used to trigger an animation sizing .

2.Use the CSS classes

Edit TunesView.js and add cls and itemClas

  1. cls: 'tunes-view',
  2. itemCls: 'video',

Here’s the code:

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

The cls:’tunes-view’ setting represents a class assigned to style the entire view, in this case the background color. The itemCls:’video’ means that the tpl for each item is wrapped in the CSS style video. And when you mouse over an item, the style overvideo is added. You can see that if you look at the DOM.

3.Look at the DOM

Save your changes, and in Chrome right-click on one of the music video images. Choose the “Inspect” context menu option.

Lab: Tunes - Style the View - 图1

Using that menu option opens Chrome’s Developer Tools on the Elements tab. There, you will see that each item contains the

tag and other elements in the tpl. The dataview surrounds each item with a

that contains the itemCls.