Custom column header menu

[frankbolviken]

Again, thank you for your replies!

Again, I can't seem to figure out how to solve this easy.
Let's say we want to create a custom feature, and enable this on the grid. How can we achieve this in a simple manner? You don't have any simple sample where this is achieved? Only need a button, which is supposed to trigger some action serverside. I've tried to get my head around the grouping code, but it's so much magic happening that i'm only getting confused

[frankbolviken]

Ok,

I managed to get a working code now, but I have a little problem. When I enable this feature on the grid, and also enable grouping, only grouping items is visible in the menu. If i disable grouping, my menuitem is correctly shown. Any idea why it's overwriting the other feature? My guess is that it's something wrong with the inject method, but I can't seem to figure out what.

Any idea?

Ext.define('app.feature.Entrytitle', {	extend: 'Ext.grid.feature.Feature',
	alias: 'feature.entrytitle',
	
	    constructor: function() {
	        var me = this;
	        
	        me.collapsedState = {};
	        me.callParent(arguments);
	    },
	    
	    entryTitleText : 'test',
	    enableEntrytitleMenu : true,
	    
	    // perhaps rename to afterViewRender
	    attachEvents: function() {
	        var me = this,
	            view = me.view;
	        if (me.enableEntrytitleMenu) {
	            me.injectEntryTitleMenu();
	        }
	    },


	    injectEntryTitleMenu: function() {
	        var me       = this,
	            view     = me.view,
	            headerCt = view.headerCt;
	        headerCt.showMenuBy = me.showMenuBy;
	        headerCt.getMenuItems = me.getMenuItems();
	    },
	    
	    showMenuBy: function(t, header) {
	        var menu = this.getMenu(),
	        	entryTitleMenuItem  = menu.down('#entryTitleMenuItem');
	            
	        Ext.grid.header.Container.prototype.showMenuBy.apply(this, arguments);
	    },
	    
	    getMenuItems: function() {
	        var me                 = this,
	        	entryTitleText     = me.entryTitleText,
	        	entryTitleClick    = Ext.Function.bind(me.onEntryTitleClick, me);
	        
	        // runs in the scope of headerCt
	        return function() {
	            var o = Ext.grid.header.Container.prototype.getMenuItems.call(this);
	            o.push('-', {
	                itemId: 'entryTitleMenuItem',
	                text: entryTitleText,
	                handler: entryTitleClick
	            });
	            return o;
	        };
	    },


	    onEntryTitleClick: function(menuItem, e) {
	    	 var me = this,
	            menu = menuItem.parentMenu,
	            hdr  = menu.activeHeader;
	    	app.events.fireEvent('entrytitle', hdr.dataIndex)
	    },
	    
	    /**
	     * Gets the related menu item for a dataIndex
	     * @private
	     * @return {Ext.grid.header.Container} The header
	     */
	    getMenuItem: function(dataIndex){
	        var view = this.view,
	            header = view.headerCt.down('gridcolumn[dataIndex=' + dataIndex + ']'),
	            menu = view.headerCt.getMenu();
	            
	        return menu.down('menuitem[headerId='+ header.id +']');
	    },


	});