Ext JS GroupingStore组的DateTime列仅按日期显示吗？

Question

我在订单列表上有一个Ext GroupingStore 。 列之一是DateTime。 我希望用户能够按DateTime列进行分组，并将所有天数归为一组。 此刻，每个日期，时，分和秒都是一组...不太有用:-)

缺少两列即可完成此操作吗？

Answer 1

您可以修改GroupingView方法来完成此操作。

首先创建GroupingView对象：

var gview = new Ext.grid.GroupingView({
        forceFit: true,
        groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
    });

然后修改（实际上是“私有”）方法：

gview.getGroup = function(v, r, groupRenderer, rowIndex, colIndex, ds){
    // colIndex of your date column
if (colIndex == 2) {
            // group only by date
    return v.format('m.d.Y');
}
    else {
 // default grouping
     var g = groupRenderer ? groupRenderer(v, {}, r, rowIndex, colIndex, ds) : String(v);
     if(g === ''){
         g = this.cm.config[colIndex].emptyGroupText || this.emptyGroupText;
     }
     return g;
    }
};

然后将“视图”应用于网格：

var grid = new Ext.grid.GridPanel({
 ...
 view: gview,
 ...
});

嗯，概念验证一下（点击“最后更新”排序）

演示版

Answer 2

我认为您在定义商店的记录类型时可以指定日期格式。 它可以解决您的问题。

就像是

    var reader = new Ext.data.JsonReader(
    fields:[{
        type: 'date',
        dateformat: 'd M Y'
    },{
        .............
        ..............
    },
    .............
    .............
    ]
)

var store = new Ext.data.Store({
    reader: reader,
    data: []
})

Answer 3

Tarnschaf的回答是正确的，我只是认为我会发布他的代码的最终，修改版本以求完整。 这就是我最终做到的方式。 谢谢塔恩沙夫！

g.view.getGroup = g.view.getGroup.wrap(function(normal,v, r, groupRenderer, rowIndex, colIndex, ds)
{
    var cm = g.getColumnModel();
    var id=cm.getColumnId(colIndex);
    var col=cm.getColumnById(id);

    if(col.renderer == formatDateTime)
    {
        v = (new Date(v)).format('m/d/yy');
        groupRenderer = formatDate;
    }

    return normal(v, r, groupRenderer, rowIndex, colIndex, ds);
});

其中g是GridView。 我发现通过使用g.view.getGroup.wrap可以保持先前的功能完整，并且仅像Tarnschaf的答案那样修改参数。 另外，即使对列进行了重新排序，此方法也可以工作-无需对colIndex硬编码。此外，它会自动将其自身应用于具有formatDateTime渲染器（我的日期/时间格式化函数）的每个列，并将其切换到formatDate groupRenderer因此组标题看起来更干净。

Answer 4

您实际上是否需要参考日期的时间部分？ 如果不是，则可以在字段上使用转换函数在date对象上调用clearTime（）。

Answer 5

在网格列定义中，定义一个groupRenderer配置：

{
  groupRenderer : function(v, u, r, row, col, store) {                        
     return //your custom group value
   }
}