combobox displays list on top of page on first time click

[shailykamboj]

Hello ,
In one of my application screens i have few combo boxes , the last in these acts weird when clicked first time after page load , the list of the combobox is displayed on the top right corner of the screen .Any help ??
Also if the list size is small , like around 5-6 elements then it works fine but when the size grows to 20 elements i can see the issue.

Browser with issue : IE9 and FF ( chrome is fine)
EXT version : 4.0.7

Layout of the page is - a panel with several items and layout as 'anchor' (though i have tried other layouts too the problem persists)
items for the panel 1.iframe 2. combobox 3. fieldSet with some textfields and combo box

Here's the code -- combobox with problem is the one having 'itemId: 'dlh_field'
layout:'anchor',
autoScroll : true,
items: [
{
html: '<div id="Rules_Likelihood" ></div>',
xtype: 'panel',
flex:1,
anchor:'100% 60%',
border : 0
},

{
xtype: 'combo',
itemId: 'analytic_group',
name:'analytic_test',
anchor:'100% 5%',
editable: false,
readOnly:true,
fieldLabel: IA.util.LocaleMgr.get("AnalyticGroup"),
queryMode:'local',
store: Ext.create('Ext.data.Store', {
fields: [ 'ID', 'name'],
data : []
}),
displayField: "name",
valueField: "ID",
listeners:{
select: function(combo, records, opts){
this.parentPanel.setDirty(true);
}
}
},

{
xtype:'fieldset',
columnWidth: 0.5,
anchor:'100% 45%',
title: IA.util.LocaleMgr.get('DefaultLikelihood'),
collapsible: false,
defaults: {anchor: '100%,15%'},
layout: 'anchor',
items: [

{
xtype: 'combo',
itemId: 'dlh_type',
name:'dlh_type_test',
editable: false,
readOnly : true,
fieldLabel: IA.util.LocaleMgr.get('Type'),
queryMode:'local',
store: Ext.create('Ext.data.Store', {
fields: [ 'ID', 'name'],
data : [
{ ID: 0, "name": IA.util.LocaleMgr.get('noneLabel') },
{ ID: 1, "name": IA.util.LocaleMgr.get('Type_Percentage') },
{ ID: 2, "name": IA.util.LocaleMgr.get('Type_ProfileField') }
]
}),
displayField: "name",
valueField: "ID",
listeners:{
select: function(combo, records, opts){
var ID = records[0].data.ID ;
if(ID == 1) //Percentage
{
combo.ownerCt.getComponent('dlh_percentage').enable();
combo.ownerCt.getComponent('dlh_profile').disable();
combo.ownerCt.getComponent('dlh_profile').clearInvalid();
combo.ownerCt.getComponent('dlh_field').disable();
combo.ownerCt.getComponent('dlh_field').clearInvalid();
}
else if(ID == 2) //Profiled Field
{
combo.ownerCt.getComponent('dlh_percentage').disable();
combo.ownerCt.getComponent('dlh_profile').enable();
combo.ownerCt.getComponent('dlh_field').enable();
}
else //None
{
combo.ownerCt.getComponent('dlh_percentage').disable();
combo.ownerCt.getComponent('dlh_profile').disable();
combo.ownerCt.getComponent('dlh_profile').clearInvalid();
combo.ownerCt.getComponent('dlh_field').disable();
combo.ownerCt.getComponent('dlh_field').clearInvalid();

}

combo.parentPanel.setDirty(true);
}
}
},

{
xtype: 'numberfield',
// anchor: '100%',
itemId: 'dlh_percentage',
fieldLabel: IA.util.LocaleMgr.get('Type_Percentage'),
value: 0,
readOnly:true,
maxValue: 100,
minValue: 0,
listeners: {
change: function(thisField, newVal, oldVal, opts) {
this.parentPanel.setDirty(true);

}
}
},

//Profile ( profile selection listener only works the first time! )
{
xtype: 'combo',
itemId: 'dlh_profile',
name:'dlh_profile_test',
editable: false,
readOnly:true,
fieldLabel: IA.util.LocaleMgr.get("Profile"),
queryMode:'local',
store: Ext.create('Ext.data.Store', {
fields: [ 'name'],
data : []
}),
displayField: "name",
valueField: "name",
msgTarget:'under',
validator:function(val){
if(Ext.isEmpty(val)){
return IA.util.LocaleMgr.get('requiredErrorMsg');
}
else
return true;
},
listeners:{
change : function(combo,newVal ,oldVal , opts){
var profile = newVal;
var dlhFieldComponent = combo.ownerCt.getComponent('dlh_field');
dlhFieldComponent.enable();
dlhFieldComponent.setValue('');
dlhFieldComponent.store.clearFilter(false);
dlhFieldComponent.store.filter('profile', profile);
this.parentPanel.setDirty(true);
}

}

},

//Field
{
xtype: 'combo',
itemId: 'dlh_field',
name:'dlh_field_test',
editable: false,
readOnly:true,
fieldLabel: IA.util.LocaleMgr.get("ProfileField"),
queryMode:'local',
triggerAction: 'all',
lastQuery: '',
store: Ext.create('Ext.data.Store', {
fields: ['profile', 'field'],
data : []
}),
msgTarget:'under',
displayField: "field",
valueField: "field",
disabled : true,
validator:function(val){
if(Ext.isEmpty(val)){
return IA.util.LocaleMgr.get('requiredErrorMsg');
}
else
return true;
},
listeners:{
select: function(combo, records, opts){
this.parentPanel.setDirty(true);
}

[scottmartin]

This has been corrected in 4.1

Regards,
Scott.

[shailykamboj]

Hello Scott !
thanks for replying to the question...
is there any workaround for it ? we have to release our product soon with 4.0.7 version and this issue looks really bad .

[scottmartin]

IIRC, this is a layout issue and it was not a simple fix for 4.07. I will check our bug tracking system to verify.

Scott.

[shailykamboj]

great ! thanks very much !

[scottmartin]

In reviewing the bug reports, there were several mentions, but all the solutions mention that it was not present in the latest version. (corrected in 4.1)

I also reviewed a ticket I worked that mentions by adding the 'name' property, it corrected the issue for them in 4.07. I would take that with a grain of salt. ;)

regards,
Scott.

[shailykamboj]

Yes , I also read about that fix and did try it but it didn't help me :(

[scottmartin]

I would recommend moving to 4.1 if possible. There have been many fixes (scrollbars, layouts, and your issue).The issue of non GA may be s blocker for you.

Regards,
Scott.

[shailykamboj]

Sure We will be upgrading to 4.1 but we cannot go for it in this release , so any quick fix will be appreciated !

[miroperez]

I'm running into this too. It would be nice to have it fixed in 4.0.7 for folks in the middle of a deployment and can't switch to a newer version - even if it was a hack override.

This makes change management more difficult. If it were a 4.0.8 release I'd have no problem that that answer but the cool performance enhancements in 4.1 do require some code changes based on what I've heard and read and we can't change this late for our release.