Extjs grid column header, add dropdown menu item t

问题:

I'm trying to add a button to the column header drop-down menus in my grid. However, I only want to add it to columns with certain itemId. So far I've got it working to add the button to all columns, see code below. I dont see where I could check each column's itemId though, it doesn't seem to iterate through the columns. Is there any workaround for this? Thank you!

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");
                                    }
                            }]);           
                    }
            }
    }],

回答1:

The grid column menu exists in one instance which is shared for all columns. Because of this you can not add menu item only for one column.

However you can show/hide menu item in this menu for specific column. You can use menu beforeshow event and get information about column from 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();
            }
        });
    }
}

Fiddle with live example: https://fiddle.sencha.com/#fiddle/3fm