如何在Extjs 4中创建包含表单的下拉菜单

问题描述：

我想创建一个表单来为Ext js 4中的搜索查询提供可选参数。我已经通过使用menuitem实现了此目的。它工作正常，但它有我需要摆脱的奇怪的行为：如何在Extjs 4中创建包含表单的下拉菜单

在鼠标悬停在文本框，这是菜单项，它获得焦点，无需等待点击，它失去了重点放在鼠标。这意味着，如果我想键入某个东西，我应该将其悬停，如果将鼠标移动到其他位置，则会失去焦点，直到我将鼠标移回时才能继续打字。这对于菜单项来说实际上是正确的，因为它应该是按钮。

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

有没有其他方法可以实现呢？

答

试试这个，让我知道发生了什么（防止加入延迟松动）

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

这没有奏效。我需要的是禁用鼠标悬停事件中的菜单项。他们应该只关注点击。 – Jamol

然后，你可以通过https://fiddle.sencha.com/创建一个Extjs小提琴吗？ –

答

我有同样的问题。我尝试了很多解决方法，但没有真正起作用。我最终在按钮菜单上添加了一个侦听器来捕获mouseover事件，然后每次都关注文本字段。这只适用于你有一个文本框，否则你必须添加测试来确定哪个文本框需要关注鼠标悬停。让试试这个：

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

如何在Extjs 4中创建包含表单的下拉菜单

相关推荐