CODEWITHSUNDEEP
extjsextjs6
serg
serg

Reputation: 111275

How to expand combobox on focus in ExtJS6?

I'm trying to expand an editable combobox on focus:

{
    queryMode: 'local',
    triggerAction: 'all',
    forceSelection: true,
    editable: true,
    anyMatch: true,
    valueField: 'id',
    displayField: 'name',
    store: store,
    listeners: {
        focus: function(){
            this.expand();
        }
    },
}

This approach doesn't work well when you click an actual trigger of an unfocused combo - it opens and closes it right away.

Interestingly tagfield input by default has the behavior I'm trying to emulate, maybe there is an option I'm missing.

https://fiddle.sencha.com/#fiddle/17ok

Upvotes: 0

Views: 2185

Answers (2)

serg
serg

Reputation: 111275

This is what I ended up doing, it has an advantage over focus approach that the combo could be expanded on every click, not just the first one.

listeners: {
    render: function(el){
        el.getEl().down('input').on({
            scope: el,
            click: function(){
                if(!this.isExpanded) {
                    this.expand();
                }
            },
        });
    },
}

Upvotes: 2

Evan Trimboli
Evan Trimboli

Reputation: 30082

You could check the expanded state in the listener:

if (!this.isExpanded) {
    this.expand();
}

Upvotes: 2

Related Questions