Добавляем простую группировку в ComboBox

Группировка значений списков Ext.form.field.ComboBox помогает систематизировать элементы. Эта функция уже доступна в Ext.grid.Panel, но, к сожалению, недоступна для Ext.form.field.ComboBox. Для реализации данной доработки, мы будем наследоваться от ComboBox’a.

Ext.define('app.view.city.cmp.GroupComboBox', {
    extend: 'Ext.form.field.ComboBox',
    alias: ['widget.groupcombobox', 'widget.groupcombo'],

    groupListConfig: {
        groupItemCls: Ext.baseCSSPrefix + 'boundlist-group-item',
        lastGroupField: false,

        renderTpl: [
            '<div id="{id}-listWrap" data-ref="listWrap"',
                    ' class="{baseCls}-list-ct ', Ext.dom.Element.unselectableCls, '">',
                '<ul id="{id}-listEl" data-ref="listEl" class="', Ext.baseCSSPrefix, 'list-plain"',
                    '<tpl foreach="ariaAttributes"> {$}="{.}"</tpl>',
                '>',
                '</ul>',
            '</div>',
            '{%',
                'var pagingToolbar=values.$comp.pagingToolbar;',
                'if (pagingToolbar) {',
                    'Ext.DomHelper.generateMarkup(pagingToolbar.getRenderTree(), out);',
                '}',
            '%}',
            {
                disableFormats: true
            }
        ],

        generateTpl: function () {
            var me = this;

            me.tpl = new Ext.XTemplate(
                '<tpl for=".">',
                    '<tpl if="this.showGroupTitle(' + me.groupField + ')">',
                        '<li class="' + me.groupItemCls + '"> ' + me.getGroupInnerTpl(me.groupField) + '</li>',
                    '</tpl>',
                    '<li style="padding-left: 20px;" role="option" unselectable="on" class="' + me.itemCls + '">' + me.getInnerTpl(me.displayField) + '</li>',
                '</tpl>',
                {
                    lastGroupTitle: false,
                    showGroupTitle: function(groupTitle) {
                        if(groupTitle == this.lastGroupTitle) {
                            return false;
                        } else {
                            this.lastGroupTitle = groupTitle;
                            return true;
                        }
                    }
                }
            );
        },

        getInnerTpl: function(displayField) {
            return '{' + displayField + '}';
        },

        getGroupInnerTpl: function(groupField) {
            return '{' + groupField + '}';
        }
    },

    initComponent: function() {
        this.listConfig = Ext.apply(
            this.groupListConfig,
            this.listConfig
        );
        this.callParent();
        this.listConfig.groupField = this.store.groupField;
    }
});

Ext.data.Store который привязан к combobox должен быть с включенной группировкой (см. свойство groupField). Так же вам необходимо создать новый css класс, похожий на .x-boundlist-item, который будет называться — .x-boundlist-group-item (для темы Triton). Что бы изменить разметку элемента группировки, вам придется изменить метод GroupComboBox:getGroupInnerTpl().

Например:

getGroupInnerTpl: function (groupField) {
    return '<b>Group:</b> {' + groupField + '}';
}

Fiddle: