如何将提交按钮设置为表单的默认按钮

Question

I have a form in ExtJs 6, I need to set the submit button as the default button to push when enter is pushed in the textfield, here is the code

{
    xtype: 'panel',
    animCollapse: true,
    collapseDirection: 'top',
    collapsible: true,
    iconCls: 'fa fa-filter',
    title: 'By Mac Address',
    items: [{
        xtype: 'textfield',
        id: 'macaddressValue',
        itemId: 'macaddressValue',
        padding: 10,
        fieldLabel: 'Mac Address'
    }, {
        xtype: 'button',
        width: 150,
        iconCls: 'fa fa-search',
        text: 'Search',
        listeners: {
            click: 'onSearchClick4'
        }
    }]
}

I used references but no success, what can I use or look at as a potential answer

Answer 1

Write one a keypress listeners in text field. and call the handler function of submit button.

Below you can find the code.

{
xtype: 'panel',
animCollapse: true,
collapseDirection: 'top',
collapsible: true,
iconCls: 'fa fa-filter',
title: 'By Mac Address',
items: [{
    xtype: 'textfield',
    id: 'macaddressValue',
    itemId: 'macaddressValue',
    padding: 10,
    fieldLabel: 'Mac Address',
     listeners: {
        keypress : function(textfield,eventObject){
            if (eventObject.getCharCode() == Ext.EventObject.ENTER) {
                me.onSearchClick4(); // Call the handler of your Submit button.
            }
        }
    }
}, {
    xtype: 'button',
    width: 150,
    iconCls: 'fa fa-search',
    text: 'Search',
    listeners: {
        click: {
            scope : me,
            fn : me.onSearchClick4();
        }
    }
}]}

Answer 2

Found the answer

I just had to add a specialkey event to the textfield and fire the submit button like this

if (e.getKey()  ==  e.ENTER)  {
   var myBtn = Ext.getCmp('macSearch');
   myBtn.fireEvent('click', myBtn);
}