Remove input cursor from combobox

Question

I am using ExtJS combo box. When you focus on the drop-down list, an input cursor appears. I tried to implement editable: false when creating combobox, but this only helped for chrome.

I also tried the clearListeners() function to see if this works on this cursor - it didn’t help, it still appears in FireFox and IE.

Another idea is to set disabled in the input field to the combo box. When I did it manually, it helped.

But when I wrote the following

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

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

Answer 1

The reason you see the cursor is because combobox gets focus, so the easiest way to handle this is to move the focus to the drop-down shot when the combo gets focus.

Just add this onFocus configuration 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 recommend doing this only if it is a forceSelection: true bracket. This will destroy the ability of users to enter anything in the field.

Answer 2

You can add configuration,

editable: false

Then it behaves like a regular Combo.

Answer 3

Try it -

For IE

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

For Firefox -

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

For Chrome -

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

This work is wonderful.