How to add a toolbar to a viewport?

Question

I'm trying to add a toolbar to a viewport, but when trying to accomplish this with the code below it doesn't appear at all (only tab panel is shown).

Ext.define(CONFIG.APP_NS+'.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout: {
        type: 'border'
    },
    this.dockedItems = [
        {
            xtype: 'maintoolbar'
        }
    ],
    this.items = [
        {
            region: 'center',
            xtype: 'maintabpanel'
        }
    ];
});

// MainToolbar
Ext.define(CONFIG.APP_NS+'.view.MainToolbar', {
    extend: 'Ext.toolbar.Toolbar',
    alias: 'widget.maintoolbar',

    initComponent: function () {
        this.items = [
            // <...>
        ]
    }
});

I know I could add it to north region, but then it appears with border and border: false does nothing.

What am I doing wrong?

JamesHalsall JamesHalsall · Accepted Answer · 2011-11-17T13:15:33

An Ext.container.ViewPort doesn't have a property called dockedItems, only an Ext.panel.Panel has that. That's why your toolbar isn't showing, its being ignored completely because the viewport doesn't know what to do with dockedItems.

I would put the toolbar in the north region like you suggested.

The border: false config doesn't work in the toolbar at the moment, and it is a known bug. It might be worth posting a help article on the Sencha forum where you will get some assistance from the ExtJS team.

How to add a toolbar to a viewport?

1 Answers