Guide applies to: modern

1.Have the MainView extend TabPanel

Currently, MainView.js has a simple container as our top level component. By extending the Tab Panel class, the top level container can take advantage of its card layout features, seeing one tab at a time.

Replace the extend: 'Ext.Container' line with: extend: 'Ext.tab.Panel'

2. Modify the items array

Replace the current items array in MainView.js with the following html configs, placeholders for eventual tab objects:

  1.     items: [{
  2.         title: "Thumbnails",
  3.         html: '<h1>tunes view</h1>'
  4.     }, {
  5.         title: "Grid",
  6.         html: '<h1>tunes grid</h1>'
  7.     }]

3.Dock the tabs at the bottom

Add the line tabBarPosition: ‘bottom’, above the items array to add the tabs to the bottom of the display.

When you are done, refresh the browser, the results should look like the following:

Thumbnails Tab

Lab: Stub Out the App - 图1

Grid Tab

Lab: Stub Out the App - 图2

4. This should be the code when you are done:

  1.     Ext.define('ModernTunes.view.main.MainView', {
  2.         extend: 'Ext.tab.Panel',
  3.         xtype: 'mainview',
  4.         controller: 'mainviewcontroller',
  5.         viewModel: {
  6.             type: 'mainviewmodel'
  7.         },
  8.         tabBarPosition: 'bottom',
  9.         items: [{
  10.             title: "Thumbnails",
  11.             html: '<h1>tunes view</h1'
  12.         }, {
  13.             title: "Grid",
  14.             html: '<h1>tunes grid</h1>'
  15.         }]
  16.     })

Take note of the +activeItem+ config that specifies which tab displays by default.