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

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();
    }
  }]
    });

Answer 1

Try to add shim: true to combo-box control.

Answer 2

Older versions of Ext had issues like this in certain browsers (FF 2.x) in certain situations dealing with nested positioning, the specifics of which escape me now. If that's the case, search the Ext forums for more info. If not, then I'm not sure...