如何在 Ext.js 中的表头内实现下拉按钮

Question

一个月以来，我开始使用 Ext.Js 4，创建各种小部件。现在我正在为列标题实现一个下拉选项。

这可以基于这样的 ColorPicker https://docs.sencha.com/extjs/4.2.1/#!/api/Ext.menu.ColorPicker

我的代码在这个 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'
                        },
                    ]
                }
            }
        ]
    },
]