如何擴展Button組件並允許空間事件

我想創建一個自定義組件。默認情況下，它會被摺疊並只顯示一個按鈕（因此，我想擴展Button而不是任何其他組件！）。當用戶點擊此按鈕時，它將展開並顯示其中的一些字段。我現在面臨的問題（看起來像一個bug），是不可能在這些字段中輸入空格字符。我儘量減少我的代碼只需幾行：如何擴展Button組件並允許空間事件

Ext.define('Ext.ux.CustomMenu', { 
     extend: 'Ext.button.Button', 
     alias: 'widget.custommenu', 
     requires: [ 
      'Ext.XTemplate' 
     ], 
     autoEl: {}, 
     baseCls: Ext.baseCSSPrefix + 'test-btn', 
     renderTpl: '<div class="foo"></div>', 
     afterRender: function() { 
      this.callParent(); 
      this.attachField(); 
     }, 
     attachField: function() { 
      Ext.create("Ext.form.field.Text",{ 
       renderTo: this.el.query('.foo')[0] 
      }); 
     } 
    }); 

    Ext.create("Ext.ux.CustomMenu",{ 
     renderTo: document.getElementById("button") 
    });

這裏是一個fiddle，這說明這種奇怪的行爲。那麼，我該如何解決它？請注意，我確實需要擴展Button組件。

來源

2017-06-13 Jacobian

你可能不會。只是描述問題，而不是你已經決定的解決方案。 –

Ext.button.Button默認捕獲全部SPACE和ENTER keydown事件並停止它們。所以，你的輸入字段沒有得到這些。您需要覆蓋此部分Ext.button.Button。

Ext.define('Ext.ux.CustomMenu', { 
    extend: 'Ext.button.Button', 
    ([...] 

    onEnterKey: function (e) { 
     if(e.type === 'keydown' && e.getKey() == e.SPACE) 
     { 
      return; 
     } 

     return this.callParent(arguments); 
    } 
});

下面是完整的例子：「我真的需要延長Button組件」
https://fiddle.sencha.com/#view/editor&fiddle/21em

來源

2017-06-13 21:58:03

非常感謝！有用！ – Jacobian

如何擴展Button組件並允許空間事件

回答

相關問題