Question

我想创建一个表单，为Ext js 4中的搜索查询提供可选参数。到目前为止，我已经使用menuitem实现了这一点。它工作正常，但它有奇怪的行为，我需要摆脱：

鼠标悬停在文本字段（即菜单项）上，无需等待点击即可获得焦点，并且无法专注于鼠标输出。这意味着，如果我想输入一些东西，我应该将其悬停，如果我将鼠标移动到其他地方，它会失去焦点，我不能继续打字，直到我把鼠标拉回来。这对于菜单项实际上是正确的，因为它应该是按钮。

{
    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
            } 
        ]
    })
},

有没有其他方法可以实现这个目标？

Answer 1

试试这个，让我知道发生了什么（通过增加延迟防止丢失）

{
    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
            } 
        ]
    })
},

或者只是尝试通过ComponentQuery并设置focus()方法值：

var txtField = Ext.ComponentQuery.query('textfield[name=login]');
txtField.focus(false, 500);

Answer 2

我遇到了同样的问题。我尝试了许多解决方法，但没有真正奏效。我最终在按钮菜单上添加了一个监听器来捕获鼠标悬停事件，然后每次都关注文本字段。仅当您有一个文本字段时才有效，否则您必须添加测试以确定要将鼠标悬停在哪个文本字段上。让我们试试这个：

,listeners: {
                mouseover : function (menu, item, e, eOpts) {
                    //fix bug of loosing focus on combo
                    menu.down("combo[name=myComboName]").focus();
                }
            }

如何在Extjs 4中创建带有表单的下拉菜单

2 个答案: