Jump to content

Recommended Posts

Posted

Implements a familiar UX where typing letters moves the selection to the first matching item, similar to Windows Explorer.

I thought someone might find this useful...

UniListBox.ClientEvents.ExtEvents ->

function afterrender(sender, eOpts)
{
    var lb = sender,
        store = lb.getStore(),
        field = lb.displayField || 'val';

    lb._searchBuffer = '';

    lb.on('keypress', function(e){

        var ch = e.event.key;

        if (!ch || ch.length !== 1)
            return;

        lb._searchBuffer += ch.toLowerCase();

        Ext.defer(function(){
            lb._searchBuffer = '';
        }, 1000);

        var idx = store.findBy(function(rec){
            var text = rec.get(field);
            return text && text.toLowerCase().startsWith(lb._searchBuffer);
        });

        if (idx !== -1) {
            lb.boundList.getSelectionModel().select(idx);
            lb.boundList.getNavigationModel().setPosition(idx);
        }

    });
}

 

  • Like 3

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...