View Full Version : Disabling items in ComboBox drop down list

Musical Shore
9 Mar 2010, 5:09 PM

I would like to disable items in the ComboBox drop down list. the drop down list is actually broken up into two sections, and there is an item that acts as a separator. With a normal <select /> box, I can set the disabled attribute on the <option />. In this way, the item will be unselectable and focus will slide over it when navigating with a keyboard. How can I accomplish this with ExtJs?

Here's how I'm doing it right now:

new Ext.XTemplate(
'<tpl for=".">',
'<tpl if="itemType==1">',

'<div class="x-combo-list-item search-suggestions">{term}</div>',
'<tpl if="this.isFirstRecentItem(itemType)">',
'<div disabled="disabled" class="x-combo-list-item recent-items-header x-unselectable">My Recent Items</div>',
'<tpl if="itemType==2">',
'<div class="x-combo-list-item recent-items">{term}</div>',
'</tpl>'This renders the DropDown list properly, although I'm not sure if I should be adding the inactive item to the template. That seems like bad form. I figure that I should insert the element after the DataView is rendered, but I haven't figured that out yet.

Also, I know that I can set an element to be unselectable. However, I still need to render the component to get the element.

What is the best approach? Is there an easy way to disable list items of a combobox?



9 Mar 2010, 11:47 PM

May be you will be surprised, but you successfully discovered that ComboBox dropdown list is a template!

So here is the best way, I'll show you the example of tooltip for item inside combobox dropdown list.

1st. Combobox is a view. Ext.data.Store is a model. Usually store contains 2 fields: id and value. You must add at least one more field. Let say the field is named 'disabled'. So now your store contains something like

[{id:1,name:'option1',disabled:false},{id:2,name:'dont select me!',disabled:true},{id:3,name:'me again!',disabled:false}]

2nd. Combobox has a tpl field which is an Ext.Template config. tpl is applied for rendering each item in dropdown list.

xtype: 'combobox',
name: 'role',
fieldLabel: 'Role',
fields:['Id','Name','qtip']//<-- of course this fields should be in store config, I just want to show you that 3rd field is required
tpl:'<tpl for="."><div ext:qtip="{qtip}" class="x-combo-list-item">{Name}</div></tpl>',
allowBlank: false

You can read the default tpl in Ext.form.ComboBox source file.

3nd. If user clicks on disabled item then 'beforeselect' event is raised. One of the parameters of that event is a record in store which is going to be selected. You have to subscribe your combobox to that event and just return false for disabled item and do nothing for normal one.

That is the easiest way to make the behavior you want. Make it as a plugin or as child of Ext.form.Combobox and publish in user extensions. Feel free to ask me for help.

Musical Shore
10 Mar 2010, 8:50 PM
Thanks, this is helpful. However, the element that is in the list that I want to disable is of a different "type" than the other elements. The other elements are of type "list-item" whereas the element I want to insert is of element type "list-item-header". I mean, theoretically I could do it, but it doesn't seem good form to put the header in the data store. I think I should be adding the header to the dataview before it renders. After the template renders the list into html, I want to insert my header before the list-item of my choosing.

I think I can apply your solution to the DataView, but how? I think I need to add the element after the DataView is rendered but before it is shown. Is that possible?