ExtJS Symbolleiste nicht korrekt Rendern

Habe ich ein Fenster wo ich möchte hinzufügen eine Symbolleiste an der Spitze, und ein panel für das laden von Inhalten in den verbleibenden Bereich. Leider ist die Symbolleiste erweitert, um eine unverhältnismäßige Größe, wenn ich das Fenster "Inhalt". Ich habe versucht hartzucodieren die Größe, aber das scheint nicht zu funktionieren. Was mache ich falsch?

Dank im Voraus für die Antworten:

  //Main application entry point
  Ext.onReady(function() {
    var loginWin;
    var mainWin;
    var content;

    var form = new Ext.form.FormPanel({
        baseCls: 'x-plain',
        labelWidth: 70,
        //url:'',
        defaultType: 'textfield',

        items: [{
            fieldLabel: ' User Name',
            name: 'username',
            anchor:'100%'  //anchor width by percentage
        },{
        inputType: 'password',
        fieldLabel: ' Password',
            name: 'password',
            anchor: '100%'  //anchor width by percentage
        }]
    });

    content = new Ext.Panel({
        baseCls: 'x-plain',
        layout:'fit',
        anchor:'90%',
        height: 500,
        items: [
           { 
               title: 'blah',
               html: '<div>hello</div>'
           }  
        ]    
    });

    var tb = new Ext.Toolbar({
        height: 100,
        //renderTo: mainWin
    });
    tb.render('toolbar');

    var toolbarPanel = new Ext.Panel({
        layout:'fit',
        anchor:'10%',
        width:100,
        items: tb
    });

    var menu = new Ext.menu.Menu({
        id: 'mainMenu',
        style: {
            overflow: 'visible'     //For the Combo popup
        },
        items: [
            { text: 'blah'
            },
            { text: 'blah2'
            }
        ]
    }); 

    tb.add(
        {
            text: 'Classes',
            iconCls: 'bmenu',  
            handler: function(){ alert('blah'); }
        },
        {
            text: 'GPA',
            iconCls: 'bmenu', 
            handler: function(){ alert('blah'); }
        },
        {
            text: 'Semester Schedule',
            iconCls: 'bmenu', 
            handler: function(){ 
            }
        },
        {
            text: 'Help',
            iconCls: 'bmenu',  //<-- icon
            handler: function(){ alert('blah'); }
        }
    );
    tb.doLayout();

    if(!mainWin){
        mainWin = new Ext.Window({
            applyTo:'main-win',
            resizable: false,
            modal: true,
            layout:'fit',
            width:'80%',
            height:'100%',
            y: 0,
            closeAction:'hide',
            plain: true,
            items: [ toolbarPanel, content ]
        });
    }

    if(!loginWin){
        loginWin = new Ext.Window({
            applyTo:'hello-win',
            closable:false,
            layout:'fit',
            width:300,
            height:130,
            closeAction:'hide',
            plain: true,

            items: form,

            buttons: [{
                text:'Login',
                    handler: function(){
                loginWin.hide();
                        mainWin.show();
            }
            },{
                text: 'Close',
                handler: function(){
                loginWin.hide();
            }
                }]
       });
       loginWin.show(this);
   }

  })