ExtJS toolbar not rendering correctly
I have a window where I'd like to add a toolbar at the top, and a panel for loading content in the remaining area. Unfortunately, the toolbar expands to a disproportionate size when I add the content panel. I've tried hardcoding the size, but that doesn't seem to work. What am I doing wrong?

Thanks in advance for responses:

      // 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);
       }
    
      })
ExtJS toolbar not rendering correctly
===

I have a window where I'd like to add a toolbar at the top, and a panel for loading content in the remaining area. Unfortunately, the toolbar expands to a disproportionate size when I add the content panel. I've tried hardcoding the size, but that doesn't seem to work. What am I doing wrong?

Thanks in advance for responses:

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