ExtJS Toolbar with multiple rows

Seems you are working with the toolbar improperly:

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

Here you are telling this panel, "Take your one item, and make it as big as me". That is what layout "fit" does. So naturally, it will takes the toolbar you give it in the items and expand it as big as the panel.

Ext.Panel objects have a tbar config property that is designed to hold your toolbar. You don't need a panel for a toolbar and another panel for your content. Instead, add the toolbar to your content panel. Also, don't worry about rendering the toolbar explicitly, or adding items after the fact. It is better and more clear to write the objects together where they will be initialized (if this is possible)

Here is how I would recommend creating your content panel:

content = new Ext.Panel({
    baseCls: 'x-plain',
    layout:'fit',
    tbar: [
    {
        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'); }
    }],
    items: [
       { 
           title: 'blah',
           html: '<div>hello</div>'
       }  
    ]    
});

Note also that I took out your panel's height attribute, since it is being put in a window with layout "fit", so that window will do all the sizing (no need to specify on the panel itself).

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

Good luck!