CODEWITHSUNDEEP
extjs
ThisIsMatt
ThisIsMatt

Reputation: 126

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

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

Upvotes: 1

Views: 3843

Answers (3)

jlindbergh
jlindbergh

Reputation: 11

This forum thread helped me: http://www.sencha.com/forum/showthread.php?177677-IE-displays-combobox-dropdown-in-the-top-left-corner-of-browser-window

Just give the combobox a (unique) name. Giving the combobox an inputId should also help

Seems like IE does not respect the position of the element if it does not have an explicit name/inputId. This thread goes more deeply into it: http://www.sencha.com/forum/showthread.php?154412-Combo-Box-options-appears-in-Top-Left-Corner-in-IE-9

Upvotes: 1

Brian Moeskau
Brian Moeskau

Reputation: 20429

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...

Upvotes: 1

Thevs
Thevs

Reputation: 3253

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

Upvotes: 1

Related Questions