I have merge some code from examples I found here on the forum, and in the examples in the ext app. In the toolbars & menu demo, the message that drops down is a small box, in mine it streches the length of my grid. It also pushes the grid down as the menu is display, and returns back to it's original position when the message dissapears. What could be causing this? Here is the js:

Code:
var myGrid = function() {
	return {
		init: function() {
			//we enable the QuickTips for the later Pagebar
			Ext.QuickTips.init();
			
			// Menus can be prebuilt and passed by reference
    			var dateMenu = new Ext.menu.DateMenu({
        		    handler : function(dp, date){
            			Ext.example.msg('Date Selected', 'You chose {0}.', date.format('M j, Y'));
        		    }
    			});

    			// Menus can be prebuilt and passed by reference
    			var colorMenu = new Ext.menu.ColorMenu({
        		    handler : function(cm, color){
            		        Ext.example.msg('Color Selected', 'You chose {0}.', color);
        		    }
    			});

			var menu = new Ext.menu.Menu({
        		   id: 'mainMenu',
        		   items: [
            		      new Ext.menu.CheckItem({
                	      text: 'Export to Excel',
                	      checked: true,
                	      checkHandler: onItemCheck
            		}),
            		new Ext.menu.CheckItem({
                	      text: 'Export to PDF',
                	      checked: true,
                	      checkHandler: onItemCheck
            		}),
            		new Ext.menu.CheckItem({
                	      text: 'Another Function',
               	 	      checked:false,
                	      checkHandler: onItemCheck
            	        }), '-', {
                	      text: 'Radio Options',
                	      menu: {        // <-- submenu by nested config object
                    	         items: [
                        		// stick any markup in a menu
                        		'<b class="menu-title">Choose a Something</b>',
                        new Ext.menu.CheckItem({
                            text: 'Aero Glass',
                            checked: true,
                            group: 'theme',
                            checkHandler: onItemCheck
                        }),
                        new Ext.menu.CheckItem({
                            text: 'Vista Black',
                            group: 'theme',
                            checkHandler: onItemCheck
                        }),
                        new Ext.menu.CheckItem({
                            text: 'Gray Theme',
                            group: 'theme',
                            checkHandler: onItemCheck
                        }),
                        new Ext.menu.CheckItem({
                            text: 'Default Theme',
                            group: 'theme',
                            checkHandler: onItemCheck
                        })
                    ]
                }
            },{
                text: 'Choose a Date',
                cls: 'calendar',
                menu: dateMenu // <-- submenu by reference
            },{
                text: 'Choose a Color',
                menu: colorMenu // <-- submenu by reference
            }
        ]
    });	

			// create the Data Store
			var ds = new Ext.data.Store({
			proxy: new Ext.data.HttpProxy({url: 'tutorial.php'}),
			reader: new Ext.data.JsonReader({
				root: 'myFriends',
				totalProperty: 'totalCount',
				id: 'id'
			},
			[
			{name: 'GC_ID', mapping: 'id', type: 'string'},
			{name: 'Date', mapping: 'date', type: 'string'},
			{name: 'Country', mapping: 'country', type: 'string'},
			{name: 'ZipCode', mapping: 'zipcode', type: 'string'},
			{name: 'Dialed', mapping: 'dialed'},
        		{name: 'DUR', mapping: 'dur'},
        		{name: 'PDD', mapping: 'pdd'},
        		{name: 'ISDN', mapping: 'isdn'},
        		{name: 'CallType', mapping: 'calltype'}		
			]),
			// turn on remote sorting
			remoteSort: true
		});
		//we set the deafault sort to the id ascending
		ds.setDefaultSort('GC_ID', 'asc');

		// example of custom renderer function
                function italic(value){
                        return '<i>' + value + '</i>';
                }

                // example of custom renderer function
                function dur(val){
                        if(val > 0){
                                return '<span style="color:green;">' + val + '</span>';
                        }else if(val = 0){
                                return '<span style="color:red;">' + val + '</span>';
                        }
                        return val;
                }

		// now we create the Grid Columns 
		var cm = new Ext.grid.ColumnModel([
			{header: "GC ID", dataIndex: 'GC_ID', width: 150, sortable: true, align: 'left'},
			{header: "Date", dataIndex: 'Date', width: 125, sortable: true},
			{header: "Ingress TG", dataIndex: 'Country', width: 160, sortable: true},
			{header: "Egress TG", dataIndex: 'ZipCode', width: 160, sortable: true},
			{header: "Dialed", dataIndex: 'Dialed', width: 80, sortable: true},
                        {header: "DUR", dataIndex: 'DUR', width: 50, sortable: true},
                        {header: "PDD", dataIndex: 'PDD', width: 70, sortable: true},
                        {header: "ISDN", dataIndex: 'ISDN', width: 70, sortable: true},
			{header: "Call Type", dataIndex: 'CallType', width: 70, sortable: true}
		]);
		// by default columns are sortable
		cm.defaultSortable = true;

		// create the grid
		var grid = new Ext.grid.Grid('tutorial-grid', {
			ds: ds,
			cm: cm,
			selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
			loadMask: true,
			enableColLock:true	
		});
		// render the Grid
		grid.render();
		
		var gridFoot = grid.getView().getFooterPanel(true);
                // add a paging toolbar to the grid's footer
                var pagbar = new Ext.PagingToolbar(gridFoot, ds, {pageSize: 12});

                ds.load({params:{start:0, limit:12}});
		
		var MyGridHeader = grid.getView().getHeaderPanel(true);
		var tb = new Ext.Toolbar(MyGridHeader);
        	tb.add({    
	         	cls:'x-btn-text-icon',
                 	text: 'File Menu',
                 	menu: menu 
               	       },
	       new Ext.Toolbar.MenuButton({
		   text: 'Another Button',
		   handler: onButtonClick,
		   tooltip: {text:'This sends that thing',title:'Thing', autoHide:false},
		   cls: 'x-btn-text-icon blist',
		   menu : {items: [
			       {text: '<b>bold</b>', handler: onItemClick},
			       {text: '<i>Italic</i>', handler: onItemClick},
                               {text: '<u>Underline</u>', handler: onItemClick}, '-',
			       {text: 'Pick a Color', handler: onItemClick, menu: {
                               items: [
                                	new Ext.menu.ColorItem({selectHandler:function(cp, color){
                                    	    Ext.example.msg('Color Selected', 'You chose {0}.', color);
                                	}}), '-',
                                	{text:'More Colors...', handler:onItemClick}
                               ]
                    	  }},
                    	  {text: 'Excellent!', handler: onItemClick}
		       ]}
		}), '-', {
        	text: 'Toggle Button',
        	enableToggle: true,
        	toggleHandler: onItemToggle,
        	pressed: true
    	});

         }
        };

	// functions to display feedback
    	function onButtonClick(btn){
           Ext.example.msg('Button Click','You clicked the "{0}" button.', btn.text);
    	}

    	function onItemClick(item){
           Ext.example.msg('Menu Click', 'You clicked the "{0}" menu item.', item.text);
    	}

    	function onItemCheck(item, checked){
           Ext.example.msg('Item Check', 'You {1} the "{0}" menu item.', item.text, checked ? 'checked' : 'unchecked');
    	}

    	function onItemToggle(item, pressed){
           Ext.example.msg('Button Toggled', 'Button "{0}" was toggled to {1}.', item.text, pressed);
    	}

}();
Ext.EventManager.onDocumentReady(myGrid.init, myGrid, true);