如何在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 
      } 
     ] 
    }) 
},

有沒有其他方法可以實現呢？

來源

2014-03-04 Jamol

試試這個，讓我知道發生了什麼（防止加入延遲鬆動）

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

來源

2014-03-04 07:23:05

這沒有奏效。我需要的是禁用鼠標懸停事件中的菜單項。他們應該只關注點擊。 – 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(); 
       } 
      }

來源

2016-11-25 10:18:35 TCH

如何在Extjs 4中創建包含表單的下拉菜單

回答

相關問題