我在订单列表上有一个 Ext GroupingStore 。其中一列是日期时间。我希望用户能够按 DateTime 列进行分组,并将所有天都归为一组。目前,每个日期、小时、分钟和秒都是一组......不是很有用:-)
有没有两列可以做到这一点?
我在订单列表上有一个 Ext GroupingStore 。其中一列是日期时间。我希望用户能够按 DateTime 列进行分组,并将所有天都归为一组。目前,每个日期、小时、分钟和秒都是一组......不是很有用:-)
有没有两列可以做到这一点?
您可以修改 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,
...
});
嗯,一个小小的概念证明(点击排序“最后更新”)
我认为您可以在定义商店的记录类型时指定日期格式。它可能会解决您的问题。
就像是
var reader = new Ext.data.JsonReader(
fields:[{
type: 'date',
dateformat: 'd M Y'
},{
.............
..............
},
.............
.............
]
)
var store = new Ext.data.Store({
reader: reader,
data: []
})
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
。我发现通过使用g.view.getGroup.wrap
我可以保持以前的功能完好无损,并且只像 Tarnschaf 的回答那样修改参数。此外,即使列重新排序,此方法也有效——没有colIndex
硬编码。此外,它会自动将自身应用于具有formatDateTime
(我的日期/时间格式化函数)渲染器的每一列,并将它们切换到formatDate
groupRenderer 以便组标题看起来更干净。
你真的需要参考日期的时间部分吗?如果没有,您可以使用字段上的转换函数在日期对象上调用 clearTime()。
在您的网格列定义中,定义一个groupRenderer
配置:
{
groupRenderer : function(v, u, r, row, col, store) {
return //your custom group value
}
}