View Full Version : ComboBox with disabled options

19 Oct 2010, 5:31 AM

I have a form that is populated by a grid row selection and need to have a ComboBox of status values have unselectable, disabled options based upon the current value of status. Using the tpl parameter of ComboBox I've been able to make options unselectable and disabled but when an enabled option is selected, the wrong index is returned. Since in order to make options unselectable I needed to drop the x-combo-box-list item and this changes the values of this.view.store.fields to be only those that have the x-combo-box-list class. How can I have disabled, unselectable items in the ComboBox while returning the proper store index when enabled items are clicked?

Here's the ComboBox code snippet:

xtype: 'combo',
fieldLabel: 'Status *',
id: 'statusId',
name: 'statusId',
lazyInit: true,
forceSelection: true,
triggerAction: 'all',
mode: 'local',
store: this.statusStore,
valueField: 'statusId',
displayField: 'statusName',
width: 120,
tpl: '<tpl for="."><tpl if="isEnabled == 1"><div class="x-combo-list-item">{statusName}</div></tpl><tpl if="isEnabled == 0"><div class="humr-combo-list-item x-item-disabled">{statusName}</div></tpl></tpl>'

This method from Ext.form.ComboBox shows the getSelectedItems returning the wrong store index:

onViewClick: function(doFocus)
var index = this.view.getSelectedIndexes()[0],
s = this.store,
r = s.getAt(index);
this.onSelect(r, index);
}else {
if(doFocus !== false){

Here's a picture of the resulting ComboBox:

19 Oct 2010, 6:50 AM
Why don't you just filter the store so that disabled options gets hidden? Do you really need to have the disabled options visible?
If you do, maybe instead of removing the itemSelector class (x-combo-list-item) you can just listen to the beforeselect event of the combo dataview and return false to cancel the selection if it's a diabled item?

19 Oct 2010, 7:35 AM
I always want to have all the status values present to be consistent and so as not to confuse the user.

Thanks a lot for the idea of using the beforeselect event. This worked perfectly and was EXACTLY what I needed.

You rock!

19 Oct 2010, 11:40 AM
I'am glad I could help! ;)