Combobox failing to focus and therefore expand

Question

I have been fiddling with a few lines of code for two days now and for some reason I cannot get it running.

What I want:

A user selects a relation from a combobox and subsequently must select a person from a list of persons filtered by the first combobox. If there is only one person, it must be selected outright. If it has more than one, I want the combobox to expand and of course show the list of retrieved persons. Sounds pretty simple.

The onRelationContactSelect() is code which is normally executed when a person is selected. Since the select event isn't triggered when setting a value manually, I simply call it by hand. I have the code in the callback of the load event to ensure the data is retrieved from the server. That is required to expand in the first place or select a record.

The problem:

When I have one record (records.length == 1) everything works like a charm. When I have more than 1 record, the combobox contactCombo fails to expand. I debugged quite a bit through the ExtJs internal code and the reason is that is has no focus. No matter what I try with calling contactCombo.focus(), it does not focus. Therefore it won't expand. To make it even more annoying I can expand another combobox with the following code:

function onRelationContactSelect() {
categorieStore.load({ callback: function(r, options, success) {
    //debugger;
    //categorieCombo.focus();
    //categorieCombo.expand();
}});
categorieCombo.focus();
categorieCombo.expand();

}

As can be seen I call focus() and expand() outside of the callback but the mode of categorieStore is 'local'. The data in categorieStore is static but still retrieved from the server.

The code:

function onRelatieSelect() {
contactStore.baseParams = {"relatieId": relatieCombo.value };
contactStore.load({callback: function(records, options, success) {
    if(records.length == 1) {
        contactCombo.setValue(records[0].get('Id'));
        onRelationContactSelect();
    } else {
        contactCombo.clearValue();
        contactCombo.focus();
        contactCombo.expand();
    }
}}); 

openTicketRelationLabel.show();
gridTicketRelatie.show();
ticketRelatieStore.load({ params: {relatieId:relatieCombo.value}});
SetRelatieInfo();
SetContractsInfo();
setSfHoursOsab();
showRelationNotifications(relatieCombo.value);
}

I have tried for ages, but it seems I simply cannot focus a combobox from within the callback handler and outside of the callback handler I have no data yet.

Can anybody please help me out?

Answer 1

After sandboxing two different comboboxes I found the solution.

The solution turned out to be weird but simple:

categorieCombo.on('select', function() {
subcategorieCombo.focus();
subcategorieStore.load({ callback: function(r, options, success) {
    subcategorieCombo.focus();
    subcategorieCombo.expand();
} });

Focus before the load.

Focus again in the callback of the load.

The only dissatisfying about this solution except from needing to focus twice is that I have no clue whatsoever why this works, but it solved the problem for me.