Как использовать общий код для пользовательского интерфейса Sencha?

Похоже, вы собираетесь создать приложение, которое сильно оптимизировано.

Лучшая практика:

1) Ваш MainView.js должен выглядеть так:

Ext.define('app.views.MainView', {
  extend: 'Ext.Container' // container is the best way almost time
  config: {
    layout: 'card' // just for example
    items: [
       {xtype: 'MainTopToolbar'},
       {xtype: 'DynamicView'},
       {xtype: 'MainTabBar'},
    ]
    // other configs go here...
  }
})

Цель этого шага - определить общий макет вашего приложения. Как видите, он содержит 3 основных компонента (второй - динамический - это то, что вы собираетесь менять в соответствии с взаимодействиями пользователя).

2) Определите свои xtypes , например MainTabBar :

Ext.define('app.views.MainTabBar', {
  extend: 'Ext.TabBar',
  xtype: 'MainTabBar'.
  config: {
    docked: 'bottom',
    items: [
       // your tabs are defined here, see Ext.TabBar docs for more details
    ]
    // other configs go here...
  }
})

3) Поместите все файлы определения xtypes, а также MainView.js в папку view .

4) В app.js вызовите Ext.create('app.views.MainView');

Это довольно общая и немного сложная проблема, поэтому, пожалуйста, проведите мозговой штурм. Если что-то ясно, дайте мне знать.