How to create dropdown menu with form inside in Extjs 4

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

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

Answer 2

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);