PDA

View Full Version : disabling expanding combobox when the label is clicked



yhosun
12 Aug 2013, 2:45 PM
The comobox expands the list of values when the label is clicked. (Ext JS 3.4.0)
It happens only when the editable config is true.

Do you know how to make a non-editable combobox not to expand by the label click?

JSFIDDLE: http://jsfiddle.net/yhosun/bRgnY/8/
If you click the label of first combobox "editable FALSE", the list will expand, and if the "editable TRUE" label is clicked, it will not expand.


items: [{
xtype: 'container',
layout: 'form',
items: [{
xtype: 'combo',
editable: false,
triggerAction: 'all',
mode: 'local',
store: store,
valueField: 'myId',
displayField: 'displayText',
fieldLabel: 'editable FALSE'
}]
},{
xtype: 'container',
layout: 'form',
items: [{
xtype: 'combo',
editable: true,
triggerAction: 'all',
mode: 'local',
store: store,
valueField: 'myId',
displayField: 'displayText',
fieldLabel: 'editable TRUE'
}]
}]

slemmon
19 Aug 2013, 7:27 AM
Clicking on the label will focus the field it's associated with - same as if you had clicked directly on the field itself. So, for the editable field clicking on it places the cursor active in the field. And on the non-editable field it expands the picker.

SurenderBhyan1
13 Feb 2017, 8:38 PM
You can prevent the click event for the label by finding the labels itself. It worked for me.



Ext.each(Ext.ComponentQuery.query("panel > container > combobox"), function (el) {
var id = el.labelEl && el.labelEl.id;
if (id) {
$('#' + id).on('click', function (e) {
e.preventDefault();
});
}
});