View Full Version : Grouping in Combobox

5 Nov 2012, 6:20 AM
wondering is it possible to make some combobox values unselectable? I need some grouping here, bolded group names should not be selectable.

6 Nov 2012, 2:44 AM
The compobox has a property tpl. You can create your own template wich renders the picker.

26 Nov 2012, 7:53 AM
I tried this template:

tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
"<tpl if=\"type == 'group'\">",
'<div style="padding: 2 0 2 2"><b>{name}</b></div>',
'<tpl else>',
'<div class="x-boundlist-item" style="padding:1 0 1 12">{name}</div>',

In template code I use if to check if is current item text is group name, so I know I can not use x-boundlist-item class here, cause it must be not selectable. It renders good, however something goes wrong when I try to select items - combobox displays not same value as selected, probably of index mismatch or something. Need help here! :)

26 Nov 2012, 8:20 AM
I got temporary and trivial workaround with event:

listeners: {
beforeselect: function(cb, record) {
if (record.get('type') == 'group') {
return false;

return true;

But I would like to remove :hover effect on them, so more xtemplate way solution is needed here.