загрузить различные виды в viewport

Question

Я использую основной видовой экран. Я использую северную панель для кнопок. Когда я нажимаю кнопку, я хочу загрузить панель в центральную область. Я сделал несколько просмотров в архитекторе allready.

mainviewport

Ext.define('MyApp.view.MyViewport', { 
extend: 'Ext.container.Viewport', 

layout: { 
    type: 'border' 
}, 

initComponent: function() { 
    var me = this; 

    Ext.applyIf(me, { 
     items: [ 
      { 
       xtype: 'container', 
       height: 65, 
       region: 'north', 
       items: [ 
        { 
         xtype: 'button', 
         height: 50, 
         maxHeight: 50, 
         maxWidth: 50, 
         minHeight: 50, 
         minWidth: 50, 
         style: 'margin: 5px;', 
         width: 50, 
         text: 'Home' 
        }, 
        { 
         xtype: 'button', 
         height: 50, 
         maxHeight: 50, 
         maxWidth: 50, 
         minHeight: 50, 
         minWidth: 50, 
         style: 'margin: 5px;', 
         width: 50, 
         text: 'Verkoop' 
        }, 
        { 
         xtype: 'button', 
         height: 50, 
         maxHeight: 50, 
         maxWidth: 50, 
         minHeight: 50, 
         minWidth: 50, 
         style: 'margin: 5px;', 
         width: 50, 
         text: 'Verhuur' 
        }, 
        { 
         xtype: 'button', 
         height: 50, 
         maxHeight: 50, 
         maxWidth: 50, 
         minHeight: 50, 
         minWidth: 50, 
         style: 'margin: 5px;', 
         width: 50, 
         text: 'Magazijn' 
        }, 
        { 
         xtype: 'button', 
         height: 50, 
         maxHeight: 50, 
         maxWidth: 50, 
         minHeight: 50, 
         minWidth: 50, 
         style: 'margin: 5px;', 
         width: 50, 
         text: 'TD' 
        }, 
        { 
         xtype: 'button', 
         height: 50, 
         maxHeight: 50, 
         maxWidth: 50, 
         minHeight: 50, 
         minWidth: 50, 
         style: 'margin: 5px;', 
         width: 50, 
         text: 'Planning' 
        }, 
        { 
         xtype: 'button', 
         height: 50, 
         maxHeight: 50, 
         maxWidth: 50, 
         minHeight: 50, 
         minWidth: 50, 
         style: 'margin: 5px;', 
         width: 50, 
         text: 'Facturen' 
        }, 
        { 
         xtype: 'button', 
         height: 50, 
         maxHeight: 50, 
         maxWidth: 50, 
         minHeight: 50, 
         minWidth: 50, 
         style: 'margin: 5px;', 
         width: 50, 
         text: 'Klachten' 
        }, 
        { 
         xtype: 'button', 
         height: 50, 
         maxHeight: 50, 
         maxWidth: 50, 
         minHeight: 50, 
         minWidth: 50, 
         style: 'margin: 5px;', 
         width: 50, 
         text: 'OPM' 
        } 
       ] 
      } 
     ] 
    }); 

    me.callParent(arguments); 
} 

, когда я нажимаю на кнопку «magazijn», например, я хочу, чтобы загрузить этот вид в центральную область:

Ext.define('MyApp.view.Magazijn', { 
extend: 'Ext.panel.Panel', 

layout: { 
    type: 'border' 
}, 
title: 'Magazijn', 

initComponent: function() { 
    var me = this; 

    Ext.applyIf(me, { 
     items: [ 
      { 
       xtype: 'panel', 
       layout: { 
        type: 'border' 
       }, 
       title: 'Pakbonnen', 
       region: 'center', 
       dockedItems: [ 
        { 
         xtype: 'toolbar', 
         region: 'center', 
         dock: 'top', 
         items: [ 
          { 
           xtype: 'button', 
           text: 'Beschadiging melden' 
          }, 
          { 
           xtype: 'button', 
           text: 'Vermissing melden' 
          } 
         ] 
        }, 
        { 
         xtype: 'gridpanel', 
         height: 150, 
         title: 'Uitgaande pakbonnen', 
         store: 'MyJsonStore', 
         region: 'north', 
         dock: 'top', 
         columns: [ 
          { 
           xtype: 'gridcolumn', 
           dataIndex: 'string', 
           text: 'String' 
          }, 
          { 
           xtype: 'numbercolumn', 
           dataIndex: 'number', 
           text: 'Number' 
          }, 
          { 
           xtype: 'datecolumn', 
           dataIndex: 'date', 
           text: 'Date' 
          }, 
          { 
           xtype: 'booleancolumn', 
           dataIndex: 'bool', 
           text: 'Boolean' 
          } 
         ], 
         viewConfig: { 

         }, 
         dockedItems: [ 
          { 
           xtype: 'pagingtoolbar', 
           width: 360, 
           displayInfo: true, 
           store: 'MyJsonStore', 
           dock: 'bottom' 
          } 
         ] 
        } 
       ], 
       items: [ 
        { 
         xtype: 'gridpanel', 
         title: 'Retour pakbonnen', 
         store: 'MyJsonStore', 
         region: 'center', 
         columns: [ 
          { 
           xtype: 'gridcolumn', 
           dataIndex: 'string', 
           text: 'String' 
          }, 
          { 
           xtype: 'numbercolumn', 
           dataIndex: 'number', 
           text: 'Number' 
          }, 
          { 
           xtype: 'datecolumn', 
           dataIndex: 'date', 
           text: 'Date' 
          }, 
          { 
           xtype: 'booleancolumn', 
           dataIndex: 'bool', 
           text: 'Boolean' 
          } 
         ], 
         viewConfig: { 

         }, 
         dockedItems: [ 
          { 
           xtype: 'pagingtoolbar', 
           width: 360, 
           displayInfo: true, 
           store: 'MyJsonStore', 
           dock: 'bottom' 
          } 
         ] 
        } 
       ] 
      } 
     ], 
     dockedItems: [ 
      { 
       xtype: 'toolbar', 
       width: 150, 
       region: 'west', 
       dock: 'top', 
       items: [ 
        { 
         xtype: 'button', 
         text: 'Product zoeken' 
        } 
       ] 
      } 
     ] 
    }); 

    me.callParent(arguments); 
} 

Как я могу это сделать?

Answer 1

1. Сделайте центральную область контейнера с картой (или соответствовать или вкладки) раскладка

2. Вызвать метод добавить в центральной области, добавив ваш компонент

Чтобы получить ссылка на вьюпорт:

var viewport = Ext.ComponentQuery.query('viewport')[0]; 

чтобы получить ссылку на центральную область:

var center = viewport.down('[region=center]'); 

var view = Ext.create('MyView'); 

center.add(view);