How to add additional keys to the itemselector keymap EXTjs?

Question

Is there a solution to extend the KeyMap of the ItemSelector? I would like to add a keymap(like pageUp and pageDown keyEvent in itemselector) that when I press the letter 'A-Z' will take me to the item that starts with the letter pressed and select it.

Answer 1

You can use the following override (fiddle sample) to achieve it. It will not work correctly on view sore reload. And you will have to define the record search record field. In case of complicated view templates you can remove hardcoded search function and use it as a setting.

Ext.define('overrides.view.NavigationModel', {
    override: 'Ext.view.NavigationModel',
    searchRecordField: false,
    
    initKeyNav: function (view) {
        var me = this;

        // Drive the KeyNav off the View's itemkeydown event so that beforeitemkeydown listeners may veto.
        // By default KeyNav uses defaultEventAction: 'stopEvent', and this is required for movement keys
        // which by default affect scrolling.
        var keyNavConfig = {
            target: view,
            ignoreInputFields: true,
            eventName: 'itemkeydown',
            defaultEventAction: 'stopEvent',
            processEvent: me.processViewEvent,
            up: me.onKeyUp,
            down: me.onKeyDown,
            right: me.onKeyRight,
            left: me.onKeyLeft,
            pageDown: me.onKeyPageDown,
            pageUp: me.onKeyPageUp,
            home: me.onKeyHome,
            end: me.onKeyEnd,
            space: me.onKeySpace,
            enter: me.onKeyEnter,
            A: {
                ctrl: true,
                // Need a separate function because we don't want the key
                // events passed on to selectAll (causes event suppression).
                handler: me.onSelectAllKeyPress
            },
            F: me.onAlphabetKeyPress,
            scope: me
        };

        if(this.view.searchRecordField) {
            keyNavConfig = Ext.Object.merge(keyNavConfig, this.getAdditionalKeyNav());
        }
        me.keyNav = new Ext.util.KeyNav(keyNavConfig);
    },
    
    getAdditionalKeyNav: function() {
        var keyNav = {};
        this.view.getStore().each(function(record) {
            var firstLetter = record.get(this.view.searchRecordField)[0].toUpperCase();
            if(!keyNav[firstLetter]) {
                keyNav[firstLetter] = this.onAlphabetKeyPress
            }
        }, this);
        return keyNav;
    },
    
    onAlphabetKeyPress: function(keyEvent) {
        const key = keyEvent.event.key;
        var foundRecordIndex = this.view.getStore().findBy(function(record) {
            return record.get('title').toLowerCase().indexOf(key) === 0;
        }, this);
        if(foundRecordIndex > -1) {
            this.setPosition(foundRecordIndex, keyEvent);
        }
    }
});

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.define('ListItem', {
            extend: 'Ext.data.Model',
            fields: [{
                name: 'src',
                type: 'string'
            }, {
                name: 'caption',
                type: 'string'
            }]
        });

        Ext.create('Ext.data.Store', {
            id: 'ListItemsStore',
            model: 'ListItem',
            data: [{
                title: "One"
            }, {
                title: "Two"
            }, {
                title: "Three"
            }, {
                title: "Four"
            }, {
                title: "Three"
            }, ]
        });

        var imageTpl = new Ext.XTemplate(
            '<tpl for=".">',
            '<div style="margin-bottom: 10px;" class="thumb-wrap">',
            '<span>{title}</span>',
            '</div>',
            '</tpl>'
        );

        Ext.create('Ext.view.View', {
            store: Ext.data.StoreManager.lookup('ListItemsStore'),
            tpl: imageTpl,
            itemSelector: 'div.thumb-wrap',
            emptyText: 'No images available',
            // Search Record Field
            searchRecordField: 'title',
            renderTo: Ext.getBody()
        });
    }
});