Remove typing cursor from combobox

Question

I am using an ExtJS combobox. There is a typing cursor when focusing on the combobox. I tried to implement editable: false when creating the combobox, but it helped only for chrome.

Also tried clearListeners() function to see if this works on that cursor - didn't help, it still appears in FireFox and IE.

The other idea is to set disabled on the input field in combobox. When I did it manually, it helped.

But when I wrote the next

Ext.get('bu-encodingcount-combobox').select('input').set({disabled:'disabled'});

it didn't help - don't know, maybe the expression is wrong.

Answer 1

The reason you see a cursor is because the combobox gets the focus, so the easiest way to handle this is to move the focus onto the drop down picker whenever the combo gets the focus.

Simply add this onFocus config to your combobox configuration:

// example combobox config
xtype: 'combo',
allowBlank: false,
forceSelection: true,
valueField:'id',
displayField:'name',
store: myStore,

// add this "onFocus" config
onFocus: function() {
    var me = this;

    if (!me.isExpanded) {
        me.expand()
    }
    me.getPicker().focus();
},

Also, I would only recommend doing this if this is a forceSelection: true combobox. It will ruin a users ability to type anything into the field.

Answer 2

You can add the config,

editable:false

Then behaves as the normal Combo .

Answer 3

Try -

For IE

combo.inputEl.set({disabled:'disabled'});

For Firefox -

combo.inputWrap.set({disabled:'disabled'});

For Chrome -

combo.inputCell.set({disabled:'disabled'});