在extjs网格上按月分组

Question

我有一个网格，其中有一个付款商店。 它在商店中使用的“付款”模型具有一个日期字段。

我已经实现了按日期分组，但是每天给我一组条目，就像这样……

我想做的是每个月而不是每天都有一个小组。

有关如何执行此操作的任何想法？

Answer 1

好吧，那算了。 我只是找到了一种方法。 我使用convert创建了一个字段来查找付款月份，并将该字段用作分组字段。

如果有人需要，我将其保留。

这是付款模式...

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];

            }

        }
    ]
})

这是付款商店...

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

这是groupingFeature配置...

var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
            groupHeaderTpl:'{name}'
        });

网格还应该设置以下属性features: [groupingFeature]并且如果您因分组错误而陷入困境，则有关getRowStyleTableEl为null的问题...该问题有一种解决方法...

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; 
  } 
});