extjs4 - Add a custom button in column header dropdown menus {EXTJS 4}

Question

I want a button in column header dropdown menu of grid in extjs4. so that i can add or delete columns which are linked in database.

Any help will be appreciated... Thankyou..:)

Answer 1

Couple of months ago I had the same problem. I've managed to solve it by extending Ext.grid.header.Container (I've overrided getMenuItems method). However, recently, I've found another solution which requires less coding: just add menu item manualy after grid widget is created.

I'll post the second solution here:

Ext.create('Ext.grid.Panel', {
    // ...
    listeners: {
        afterrender: function() {
            var menu = this.headerCt.getMenu();
            menu.add([{
                text: 'Custom Item',
                handler: function() {
                    var columnDataIndex = menu.activeHeader.dataIndex;
                    alert('custom item for column "'+columnDataIndex+'" was pressed');
                }
            }]);           
        }
    }
});

Here is demo.?

UPDATE

Here is demo for ExtJs4.1.