Grouping in Combobox

[desp]

Hello,
wondering is it possible to make some combobox values unselectable? I need some grouping here, bolded group names should not be selectable.

[tvanzoelen]

The compobox has a property tpl. You can create your own template wich renders the picker.

[desp]

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>',
        '</tpl>',
    '</tpl>'
)

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!

[desp]

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.