Просто разместив панель инструментов внутри панели - Ext JS

Question

Я создаю панель инструментов в моем коде ниже. Мне интересно, как разместить их внутри панели?

var toptoolbar = Ext.create('Ext.toolbar.Toolbar', { 
    id: 'ttool', 
    width: '100%', 
    items: [ 
     { text : 'MetaCenter', 
      menu : { 
      items: [ 
       { text : 'Wiki' }, 
       { text : 'JIRA' }, 
       { text : 'SVN' }, 
       { text : 'Sharepoint', 
        menu : { 
         items: [ 
          {text : 'text 1'}, 
          {text : 'text 2'} 
         ] 
        } 
       }] 
      } 
     }   
    ]   

}); 

То, что я хочу сделать что-то вроде:

Ext.create.('Ext.panel.Panel', { 
    id: 'panel', 
    tbar: { //code to create the toptoolbar } 
    .... 

EDIT:

То, что я хочу иметь очень обширный выпадающее меню с подменю на панели инструментов, Я пытаюсь не размещать весь этот код для создания этой панели инструментов внутри моего приложения. Вместо этого я хочу иметь возможность называть его переменной (или, еще лучше, классом?). Вид как абстракция/инкапсуляция.

Является ли это стандартным способом создания экземпляра компонента или существуют более эффективные методы?

Cheers!

Answer 1

Заканчивать Документы ExtJS для dockedItems, они дают именно этот сценарий в качестве примера: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-cfg-dockedItems

Answer 2

Вы можете задать панель инструментов в методе InitComponent панели.

Ext.define('MyApp.view.MyPanel', { 
    extend: 'Ext.panel.Panel', 
    height: 250, 
    width: 400, 
    title: 'My Panel', 

    initComponent: function() { 
     var me = this; 

     Ext.applyIf(me, { 
      dockedItems: [ 
       { 
        xtype: 'toolbar', 
        dock: 'top' 
       } 
      ] 
    }); 

    me.callParent(arguments); 
} 

});