Ext.form.combobox inside ext.window displays values at top left of screen

Programmer Question

I have a combobox inside of a ext.panel, inside of an ext.window. When I click the down arrow to show the possible SELECT options, the options pop up at the top-left of the browser window, instead of below the SELECT box. The funny thing is if I attach the drugDetailsPanel (see code below) to a div on the page (instead of inside an ext.window), the combobox works correctly. This also happens when I change ext.panel to ext.form.formpanel, by the way.

Any ideas?

My code:

drugDetailsPanel = new Ext.Panel({
 layout:'form',
 id:'drug-details-panel',
 region:'center',
 title:'Drug Details',
 height:200,
 collapsed:false,
 collapsible:false,
 items:[
         new Ext.form.ComboBox({

          fieldLabel:'What is the status of this drug?',
          typeAhead:false,
       store:drugStatusStore, 
       displayField:'lookup', 
       mode:'remote', 
       triggerAction:'all',
       editable:false,
       allowBlank:false,
       emptyText:'Select a status..',
       name:'/drug/drug-status',
       id:'drug-status'
      })

 ]       
});

newDrugWindow = new Ext.Window({
    title: 'Add Drug',
    closable:true,
    width:650,
    height:650,
    //border:false,
    plain:true,
    layout: 'border',
    items: [drugDetailsPanel],
  closeAction:'hide',
  modal:true,
  buttons: [
   {
    text:'Close',
    disabled:false,
    handler: function(){
    newDrugWindow.hide();
    }
   },
   {
    text:'Save Drug',
    handler: function(){
      newDrugDialog.hide();
    }
  }]
    });

Find the answer here