Question

I have a view that contains 3 different views (Top Toolbar, Content Panel, Bottom Toolbar),
The problem is that the Content Panel (Panel with Dataview) hides behind \ hides the toolbars (depend on the order of the items).

the main view is:

Ext.define("myapp.view.myview", {
    extend: "Ext.Panel",
    alias: "widget.myview",
    requires: [
        'myapp.view.topMenu',
        'myapp.view.bottomMenu',
        'myapp.view.DataContainer'
   ],
   config: {
       fullscreen: true,
       layout: {
            type: 'fit',
       },
       items: [                                
          { xtype: 'DataContainer'},          
          { xtype: 'topMenu' }, 
          { xtype: 'bottomMenu' }
       ]
   }
});

I’ve tried to use Container and also tried Spacers but it didn’t change a thing.
Thanks.

Answer 1

Got it – I had to put the toolbar inside Container and Dock the Container to the top / bottom:

Ext.define("App.view.topMenu", {
extend: "Ext.Container",
alias: "widget.topMenu",

config: {          
    docked: "top",
    items: [
    {
        xtype: "toolbar",