Как реализовать выпадающую кнопку внутри заголовка таблицы в Ext.js

Question

В течение месяца я начал работать с Ext.Js 4, создавая все виды виджетов. Прямо сейчас я пытаюсь реализовать опцию раскрывающегося списка для заголовка столбца.

Это может быть основано на чем-то вроде этого ColorPicker https://docs.sencha.com/extjs/4.2.1/#!/api/Ext.menu.ColorPicker

Мой код создает Grid Panel, как в этом img

Ext.apply(me, {
    items : [{
        xtype : 'gridpanel',
        itemId : 'gridpanelId',
        margin : '0 0 0 0',
        layout : 'fit',
        viewConfig : {
            emptyText : '',
            deferEmptyText : false,
            markDirty : false
        },
            ftype : 'filters'
    }],
    store : errorstore,
    plugins : [Ext.create('Ext.grid.plugin.CellEditing', {
    pluginId : 'celledit',
    clicksToEdit : 1
    })],
    tbar : [{
        xtype : 'ixbutton',
        itemId : 'tbarswitcha',
        text : '',
        bgCls : 'but-image-base tbar_error_quit',
        height : 60,
        width : 90,
        margin : '0 10 0 10'
    }],
    columns : [{
        header : 'Startdate',
        itemId : 'ColumnStartdate',
        dataIndex : 'startdate',
        flex : 2,
        sortable : true,
        renderer : function(value) {
            return MyApp.app.formatDate(value);
                }
        },{
        header : 'Source',
        itemId : 'ColumnSource',
        dataIndex : 'source',
        flex : 3,
        sortable : false
        }
    ],
    bbar : {
        xtype : 'ixpagingtoolbar',
        itemId : 'ixpt',
        margin : '5 10 5 10',
        numbButtons : 4,
        width : 400
        }
    }]
});

Я пытаюсь создать для пользователя возможность выбора определенного типа «Источник». Что-то вроде фильтра, где у пользователя есть предопределенные опции, из которых можно выбирать, а не вводить.

Как мне определить раскрывающийся список внутри этого

columns : {
        header : 'Source'
}

Answer 1

Все элементы, которые вы помещаете в столбец, помещаются в заголовок.Простой пример без какого-либо стиля:

columns = [
    {
        header: 'Source',
        items: [
            {
                xtype: 'button',
                text: 'Options',
                menu: {
                    items: [
                        {
                            text: 'Item1'
                        },
                        {
                            text: 'Item2'
                        },
                    ]
                }
            }
        ]
    },
]