Simply placing a toolbar inside of a Panel - Ext JS

Question

I am creating a toolbar in my code below. What I'm wondering is how to place these inside a panel?

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'}
                        ]
                    }
                }]
            }
        }           
    ]        

});

What I want to do is something like:

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

EDIT:

What I want to have is a very extensive drop down menu with sub menus on a toolbar, I'm trying to avoid putting all of that code to create that toolbar inside of my application. Instead I want to be able to call it from a variable (or better yet, a class?). Kind of like abstraction/encapsulation.

Is this a standard way of component instantiation or are there more-efficient methods?

Cheers!

Answer 1

Check out the ExtJS docs for dockedItems, they give exactly this scenario as an example: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-cfg-dockedItems

Answer 2

You can define the toolbar in the initComponent method of the panel.

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);
}

});