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

Затем примените View к сетке:

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

Ну, небольшое подтверждение концепции (нажмите на сортировку «Последнее обновление»)

Демо

Answer 2

Ответ Тарншафа был верным, я просто думал, что выложу свою окончательную модифицированную версию его кода для полноты. Так я и сделал. Спасибо Тарншаф!

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, я мог сохранить предыдущую функцию без изменений и изменять параметры только в соответствии с ответом Тарншафа. Кроме того, этот метод работает, даже если столбцы переупорядочены - нет жестко заданного colIndex. Более того, он автоматически применяется к каждому столбцу, который имеет средство визуализации formatDateTime (моя функция форматирования даты / времени) и переключает formatDate groupRenderer, чтобы заголовки групп выглядели чище.

Answer 3

Я думаю, вы можете указать формат даты, когда вы определяете тип записи для магазина. Это может решить вашу проблему.

Что-то вроде

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

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

Answer 4

В определении столбца сетки определите groupRenderer config:

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

Answer 5

Вам действительно нужно ссылаться на временную часть даты? Если нет, вы можете использовать функцию преобразования в поле для вызова clearTime () для объекта даты.