Hello, I have created a form with a select field as one of the elements in it.

When I navigate from one form panel to another (by clicking a image another panel is opened up), select field drop down mark is down on that panel.

Code written for the form is as follows:

var myform=new Ext.form.FormPanel({
scroll: 'vertical',
standardSubmit:true,
items:[
{
html: 'Action Taken',
},
{
xtype: 'textfield',
name: 'action',
},
{
html: 'Preconfigured comments',
},
{
xtype: 'selectfield',
useClearIcon: true,
name: 'preconfiguredComments',
options:[
{
text: 'Configuration1',
value: 'Configuration1',
},
{
text: 'Configuration2',
value: 'Configuration2',
},
{
text: 'Configuration3',
value: 'Configuration3',
},
],
},
{
html: 'Comments',
},
{
xtype:'textareafield',
name:'comments',
align:'center',
},


],
});

new Ext.Panel({
fullscreen: true,
layout: 'fit',
items: myform,
dockedItems:[
{
xtype: 'toolbar',
dock: 'top',
height: '90',
items: [
{
xtype: 'button',
name: buttonText,
text: buttonText,
width: 130,
handler: function()
{
//perform handler operation
}
},
{
xtype: 'spacer',
},
{
xtype: 'button',
name: 'cancel',
text: 'Cancel',
width: 110,
handler: function()
{
// handler operations
}
}


]
}
]
});

Any help is appreciated