代码之家  ›  专栏  ›  技术社区  ›  Josh Andreas Rehm

Ext JS GroupingStore group DateTime列是否按日期?

  •  0
  • Josh Andreas Rehm  · 技术社区  · 16 年前

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

    要做到这一点,有没有缺少两列的方法?

    5 回复  |  直到 16 年前
        1
  •  2
  •   Tarnschaf    16 年前

    您可以修改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

        2
  •  1
  •   Arun P Johny    16 年前

    我认为,在定义存储的记录类型时,可以指定日期格式。

    差不多

        var reader = new Ext.data.JsonReader(
        fields:[{
            type: 'date',
            dateformat: 'd M Y'
        },{
            .............
            ..............
        },
        .............
        .............
        ]
    )
    
    var store = new Ext.data.Store({
        reader: reader,
        data: []
    })
    
        3
  •  1
  •   Josh Andreas Rehm    16 年前

    塔恩沙夫的回答是正确的,我只是想发布他的代码的最终修改版本,以确保其完整性。我就是这样做的。谢谢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使组标题看起来更清晰。

        4
  •  0
  •   Evan Trimboli Evan Trimboli    16 年前

        5
  •  -1
  •   Drenmi    10 年前

    groupRenderer 配置:

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