Extjs Not able to navigate through keys in Month Picker

Question

i am using extjs month picker and i need to use keyboard keys to navigate through months or years . But neither Tab or up ,down left ,right arrow keys seems to be working .

i am using ext version 6.5.0 .

find the fiddle link

Answer 1

While this is a bug in the Sencha framework, you can work around it and add a KeyNav by yourself. A simple example, which may not exactly do what you want, but it's a start:

Ext.define('',{
    override: 'Ext.picker.Month',
    requires: [
        'Ext.util.KeyNav'
    ],
    afterRender: function() {
        var me = this;
        me.callParent(arguments);
        me.keyNav = new Ext.util.KeyNav({
            target: Ext.getBody(),
            scope: me,
            left: me.onLeftKey,
            right: me.onRightKey,
            up: me.onUpKey,
            down: me.onDownKey
        });
    },
    onLeftKey: function() {
        var value = this.getValue();
        value[1]--;
        this.adjustYear(value[1]);
        this.setValue(value);
    },
    onRightKey: function() {
        var value = this.getValue();
        value[1]++;
        this.adjustYear(value[1]);
        this.setValue(value);
    },
    onUpKey: function() {
        var value = this.getValue();
        value[0]--;
        this.setValue(value);
    },
    onDownKey: function() {
        var value = this.getValue();
        value[0]++;
        this.setValue(value);
    },

    doDestroy:function() {
        Ext.destroy(this.keyNav);
        this.callParent(arguments);
    }
});