Extjs 网格列标题，将下拉菜单项添加到特定列

Question

我正在尝试向网格中的列标题下拉菜单添加一个按钮。但是，我只想将它添加到具有特定 itemId 的列中。到目前为止，我已经将按钮添加到所有列中，请参阅下面的代码。我不知道在哪里可以检查每列的 itemId，但它似乎没有遍历列。有什么解决方法吗？谢谢!

items:[{
            region:'center',
            xtype:'grid',
            columns:{
                    items: COLUMNS, //defined in index.php
            },
            store:'Items',
            selType: 'checkboxmodel',
            listeners: {
                    afterrender: function() {        
                            var menu = Ext.ComponentQuery.query('grid')[0].headerCt.getMenu();
                            menu.add([{
                                    text: 'edit',
                                    handler: function() {
                                            console.log("clicked button");
                                    }
                            }]);           
                    }
            }
    }],

Answer 1

网格列菜单存在于所有列共享的一个实例中。因此，您不能只为一列添加菜单项。

但是，您可以在此菜单中为特定列显示/隐藏菜单项。您可以使用菜单beforeshow事件并从 menu.activeHeader 获取有关列的信息属性(property):

listeners: {
    afterrender: function(c) {                                        
        var menu = c.headerCt.getMenu();

        // add menu item  into the menu and store its reference
        var menuItem = menu.add({
            text: 'edit',
            handler: function() {
                console.log("clicked button");
            }
        });

        // add listener for beforeshow menu event
        menu.on('beforeshow', function() {

           // get data index of column for which menu will be displayed
           var currentDataIndex = menu.activeHeader.dataIndex; 

            // show/hide menu item in the menu
            if (currentDataIndex === 'name') {
                menuItem.show();
            } else {
                menuItem.hide();
            }
        });
    }
}

摆弄现场示例: https://fiddle.sencha.com/#fiddle/3fm