Grouping by month on extjs grid - date

Question

I have a grid, which has a payments store. The Payment model, which it's store uses, has a field which is a date.
I've already implemented grouping by date, but that gives me a group of entries for each day, like this...
What I want to do is have a group for each month instead of each day.
Any ideas on how to do this?

Answer 1

Ok, nevermind. I just found a way to do this. I created a field using convert to find the month of the payment and used that field as the grouping field.
I'll leave this posted in case anyone ever needs it.
This is the Payment model...
Ext.define('Ext.model.Payment',{
extend: 'Ext.data.Model',
requires: [
'Ext.data.Field'
],
fields: [
{
name: 'n_id_payment',
type:'integer'
},{
name: 'n_amount',
type:'integer'
}.....,
..... Several other fields .....
},{
name:'payment_month',
type:'date',
convert:function(model, record){
var today = new Date(record.data.dt_date);
var dd = today.getDate();
var mm = today.getMonth();
var month=new Array();
month[0]="Enero";
month[1]="Febrero";
month[2]="Marzo";
month[3]="Abril";
month[4]="Mayo";
month[5]="Junio";
month[6]="Julio";
month[7]="Agosto";
month[8]="Septiembre";
month[9]="Octubre";
month[10]="Noviembre";
month[11]="Diciembre";
return month[mm];
}
}
]
})
And this is the payment store...
Ext.define('Ext.store.PaymentsStore', {
extend: 'Ext.data.Store',
requires: [
'Ext.model.Payment',
'Ext.data.proxy.Memory'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: false,
async:false,
groupField:'payment_month',
model: 'Ext.model.Payment',
method:'POST',
proxy: {
isSynchronous:true,
type: 'ajax',
url: 'http://localhost/index.php/TblPayment/fetch',
reader:{
type :'json',
method:'POST'
}
}
}, cfg)]);
}
});
This is the groupingFeature config...
var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
groupHeaderTpl:'{name}'
});
The grid should have this property set too features: [groupingFeature]
And in case you're stuck with an error with grouping, something about getRowStyleTableEl being null... There's a workaround for that issue...
Ext.override(Ext.view.Table, {
/*
Temporary fix for bug in ExtJS 4.2.1. See: sencha.com/forum/showthread.php?264657-Exception-When-Selecting-First-Grid-Row
*/
getRowStyleTableElOriginal: Ext.view.Table.prototype.getRowStyleTableEl,
getRowStyleTableEl: function() {
var el = this.getRowStyleTableElOriginal.apply(this, arguments);
if (!el) {
el = {
addCls: Ext.emptyFn,
removeCls: Ext.emptyFn,
tagName: {}
}
}
return el;
}
});