How to create dropdown menu with form inside in Extjs 4 - extjs

Question

I want to create a form to provide optional parameters for search query in Ext js 4.
I have implemented this by using menuitem so far. It works fine but it has strange behavior which I need to get rid of:
In mouse over textfield, which is menu item, it gets focus without waiting for click and it loses focus on mouse out. That means, if I want to type something I should hover it, and if I move my mouse to somewhere else it loses focus and I cannot continue typing until I bring my mouse back. This is actually correct for menu item because it is supposed to be button.
{
xtype: 'button',
action: 'chooseOptions',
text: 'Options',
menu: new Ext.menu.Menu({
plain: true,
allowOtherMenus: true,
items: [
{
xtype: 'textfield',
name: 'login',
fieldLabel: 'Login',
labelWidth: 100,
margin: '10 10 10 10',
width: 300
},
{
xtype: 'combobox',
fieldLabel: 'Type',
name: 'type_id',
store: 'MyStore',
displayField: 'value',
valueField: 'id',
editable: false,
labelWidth: 100,
margin: '0 10 10 10',
width: 300
},
{
xtype: 'combobox',
fieldLabel: 'Agent',
name: 'a_id',
store: 'Agents',
displayField: 'name',
valueField: 'id',
editable: false,
labelWidth: 100,
margin: '0 10 10 10',
width: 300
}
]
})
},
Is there any alternatives to implement this?

Answer 1

Try this and let me know what's happening ( prevent loosing by adding delay )
{
xtype: 'button',
action: 'chooseOptions',
text: 'Options',
menu: new Ext.menu.Menu({
plain: true,
allowOtherMenus: true,
items: [
{
xtype: 'textfield',
name: 'login',
fieldLabel: 'Login',
labelWidth: 100,
margin: '10 10 10 10',
width: 300,
listeners: {
afterrender: function(field) {
field.focus(false, 1000)
// or try without parameter
}
}
},
{
xtype: 'combobox',
fieldLabel: 'Type',
name: 'type_id',
store: 'MyStore',
displayField: 'value',
valueField: 'id',
editable: false,
labelWidth: 100,
margin: '0 10 10 10',
width: 300
},
{
xtype: 'combobox',
fieldLabel: 'Agent',
name: 'a_id',
store: 'Agents',
displayField: 'name',
valueField: 'id',
editable: false,
labelWidth: 100,
margin: '0 10 10 10',
width: 300
}
]
})
},
Or just try to get by ComponentQuery and set focus() method values:
var txtField = Ext.ComponentQuery.query('textfield[name=login]');
txtField.focus(false, 500);

Answer 2

I had the same problem.
I tried many workaround but nothing really worked.
I ended up to add a listener on the button menu to catch mouseover event and then focus the textfield everytime. This works only if you have ONE textfield otherwise you have to add tests to determine which textfield to focus on mouseover.
lets try this :
,listeners: {
mouseover : function (menu, item, e, eOpts) {
//fix bug of loosing focus on combo
menu.down("combo[name=myComboName]").focus();
}
}