ExtJs: Column Action For Summary Header

Steps:
1)Create css styles for the text grouping and action items.

.icon-edit {
.x-grid-group-hd div {
	position:relative;
	height: 16px;
}

.ux-grow-action-item {
	min-width:16px;
	height: 16px;
	background-repeat:no-repeat;
	background-position: 0 0 ! important;
	margin: 0 0 0 4px;
	padding: 0 ! important;
	cursor:pointer;
	float:left;
}
.x-ie .ux-grow-action-item {
	width:16px;
}
.ux-action-right {
	float:right;
	margin: 0 3px 0 2px;
	padding: 0 ! important;
}
.ux-grow-action-text {
	padding: 0 ! important;
	margin:0 ! important;
	background:transparent none ! important;
	float:left;
}	
	

2)Create css styles for icons you will use.

.icon-edit {
	    background-image: url(images/edit.png) !important;
	}
	
	.icon-up {
	    background-image: url(images/icon-up.gif) !important;
	}
	
	.icon-down {
	    background-image: url(images/icon-down.gif) !important;
	}
	
	.icon-delete {
	    background-image: url(images/delete.png) !important;
	}	
	

3)Add a template for the Grouping feature in the initComponent.
Each icon is represented by the class ux-grow-action-item we defined earlier, you can additionaly add a tooltip with the data-qtip property.

Ext.define('ImpactoBTL.view.itempresupuesto.Grid', {
    extend: 'Ext.grid.Panel',
    alias : 'widget.itempresupuestogrid',
    title : 'Presupuesto',		
    selType: 'rowmodel',
...
...
...
initComponent : function() {

    var tpl = Ext.create('Ext.grid.feature.GroupingSummary',{
        groupHeaderTpl:  Ext.create('Ext.XTemplate',
            '{name:this.myCustomFunction}',
            {
                myCustomFunction: function (param) {

                    return '
' +  param + '
' +  
'
' + 
'
' +
'
' ;

                }}
            )
    });

    this.features = [ tpl ];
}
...
...
...
}

4)Override Ext.grid.feature.Grouping as follows in order to fire an event to the controller.

Ext.override(Ext.grid.feature.Grouping,{
	onGroupClick: function(view, rowElement, groupName, e) {				
				
		if (e.getTarget('.ux-grow-action-item'))
		{	
			this.grid.fireEvent('groupaction', view, rowElement, groupName, e);
			return false;
		}
		
		
        var me = this,
            groupCache = me.groupCache,
            groupIsCollapsed = !me.isExpanded(groupName),
            g;

        if (me.collapsible) {

            // CTRL means collapse all others
            if (e.ctrlKey) {
                Ext.suspendLayouts();
                for (g in groupCache) {
                    if (g === groupName) {
                        if (groupIsCollapsed) {
                            me.expand(groupName);
                        }
                    } else {
                        me.doCollapseExpand(true, g, false);
                    }
                }
                Ext.resumeLayouts(true);
                return;
            }

            if (groupIsCollapsed) {
               me.expand(groupName);
            } else {
                me.collapse(groupName);
            }
        }
    }
});

5)Catch the event on the controller.

init: function(app) {
    	
	var me = this;
	this.control({
        	'grid':{ 
			'groupaction': this.onGroupAction,
		},
	});
},

onGroupAction: function(view, node, group, e, eOpts){    	
    				
	if (e.getTarget('.icon-edit'))
	{
		//catch the edit click
		console.log("You click the edit action");
	}

	if (e.getTarget('.icon-delete'))
	{
		//catch the delete click
		console.log("You click the delete action");
		return;
	}

}