Search code examples
extjspaneltoolbarxtype

Simply placing a toolbar inside of a Panel - Ext JS

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!

Solution

  • 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