Guide applies to: modern

What you will be building

The app we’ll be building will be a custom music video preview player that will draw data from a public data feed from the iTunes website, specifically the top videos of latest period rating.

The landing page (we will use a TabPanel component* in Ext JS) will have two options to choose from:

  • The first will be a collection of custom styled thumbnails (called a Dataview component in Ext JS) of the title of the song, along with the name and image of the artist.

  • The second will be a custom table of records of similar data (called a Grid component in Ext JS), while adding the release date of the song as well.

Each tab will allow for the rendering of a 30-second preview of a particular video in a hovering model window (called a Dialog component in Ext JS), whether clicking on a thumbnail from the Dataview or a record from the Grid.

Thumbnails: Dataview component

What You Will Be Coding - 图1

Video Player: Dialog component

What You Will Be Coding - 图2

Records: Grid component

What You Will Be Coding - 图3

Video Player: Dialog component

What You Will Be Coding - 图4

A *component__ is an organizing UI element while in Ext JS development. As we will see later, we will only return familiar HTML5 elements to the user’s browser once rendered.