text: Ext.define('TestProj.view.main.Main', {
      extend: 'Ext.tab.Panel',
      xtype: 'app-main',
  
      requires: [
          'Ext.plugin.Viewport',
          'Ext.window.MessageBox',
  
          'TestProj.view.main.ArchiveController',
          'TestProj.view.main.ArchiveViewModel',
          'TestProj.view.main.List'
      ],
  
      controller: 'archivecontroller',
      viewModel: 'archiveviewmodel',
  
      ui: 'navigation',
  
      tabBarHeaderPosition: 1,
      titleRotation: 0,
      tabRotation: 0,
  
      header: {
          layout: {
              align: 'stretchmax'
          },
          title: {
              bind: {
                  text: '{name}'
              },
              flex: 0
          },
          iconCls: 'fa-th-list'
      },
  
      tabBar: {
          flex: 1,
          layout: {
              align: 'stretch',
              overflowHandler: 'none'
          }
      },
  
      responsiveConfig: {
          tall: {
              headerPosition: 'top'
          },
          wide: {
              headerPosition: 'left'
          }
      },
  
      defaults: {
          bodyPadding: 20,
          tabConfig: {
              plugins: 'responsive',
              responsiveConfig: {
                  wide: {
                      iconAlign: 'left',
                      textAlign: 'left'
                  },
                  tall: {
                      iconAlign: 'top',
                      textAlign: 'center',
                      width: 120
                  }
              }
          }
      },
  
      items: [{
          title: 'Home',
          iconCls: 'fa-home',
          // The following grid shares a store with the classic version's grid as well!
          items: [{
              xtype: 'mainlist'
          }]
      }]
  });
  