Ext JS GroupingStore组DateTime列只是日期?

时间:2009-08-04 23:56:52

标签: javascript extjs grouping

我在订单列表上有一个Ext GroupingStore。其中一列是DateTime。我希望用户能够按DateTime列进行分组,并将所有日期都放在一个组下。目前,每个日期,小时,分钟和秒都是一组......不是很有用: - )

没有两列可以实现这个目标吗?

5 个答案:

答案 0 :(得分:2)

您可以修改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,
 ...
});

好吧,一点概念证明(点击排序'上次更新')

Demo

答案 1 :(得分:1)

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

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

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

答案 2 :(得分:1)

Tarnschaf的回答是正确的,我只是想我会发布我的代码的最终修改版本以获得完整性。这就是我最终做到的方式。谢谢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,以便组标题看起来更清晰。

答案 3 :(得分:0)

你真的需要参考日期的时间部分吗?如果没有,您可以在字段上使用转换函数来调用日期对象上的clearTime()。

答案 4 :(得分:-1)

在网格列定义中,定义groupRenderer config:

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