CODEWITHSUNDEEP
javascriptextjsextjs4
mik
mik

Reputation: 1575

ExtJs simulate TAB on ENTER keypress

I know it is not the smartest idea, but I still have to do it. Our users want to use ENTER like TAB. So, the best I came up with is this:

Ext.override(Ext.form.field.Base, {
            initComponent: function() {
                this.callParent(arguments);

                this.on('afterrender', function() {
                    var me=this;
                    this.getEl().on('keypress',function (e){
                        if(e.getKey() == 13) {
                            me.nextNode().focus();
                        }
                    });
                });
            }
        });

But it still does not work exactly the same way as TAB. I mean, it works OK with input fields, but not other controls. May be there is some low-level solution. Any ideas?

Upvotes: 4

Views: 10907

Answers (4)

Styles
Styles

Reputation: 11

For Ext.form.field.Text and similar xtypes there is a extra config enableKeyEvents that needs to be set before the keypress/keydown/keyup events fire. The enableKeyEvents config option needs to be set to true as it's default to false.

ExtJS API Doc

Upvotes: 1

egerardus
egerardus

Reputation: 11486

In the past I've attached the listener to the document, something like this:

Ext.getDoc().on('keypress', function(event, target) {

    // get the form field component
    var targetEl = Ext.get(target.id),
        fieldEl = targetEl.up('[class*=x-field]') || {},
        field = Ext.getCmp(fieldEl.id);

    if (
        // the ENTER key was pressed...
        event.ENTER == event.getKey() &&

        // from a form field...
        field &&

        // which has valid data.
        field.isValid()

        ) {

        // get the next form field
        var next = field.next('[isFormField]');

        // focus the next field if it exists
        if (next) {
            event.stopEvent();
            next.focus();
        }                   
    }
});

Upvotes: 3

Varun Achar
Varun Achar

Reputation: 15109

You could try this

if (e.getKey() === 13) {
    e.keyCode = Ext.EventObject.TAB
    this.fireEvent(e, {// any additional options
   });
}

Haven't really tried this ever myself.

Upvotes: 0

Anthony Mills
Anthony Mills

Reputation: 8784

Disclaimer: I'm not an expert on ExtJs.

That said, maybe try something like:

if (e.getKey() === 13) {
    me.blur();
    return false;  // cancel key event to prevent the [Enter] behavior
}

Upvotes: 0

Related Questions