Ext JS GroupingStore Gruppe Datetime-Spalte von gerade aktuell?

Question

Ich habe eine Ext GroupingStore auf einer Liste von Aufträgen. Eine der Säulen ist ein Datetime. Ich möchte der Benutzer von der Datetime-Spalte zu gruppieren zu können und haben alle Tage unter einer Gruppe. Im Moment jeden Tag, Stunde, Minute und Sekunde ist eine Gruppe ... nicht sehr nützlich: -)

Jede Art und Weise kurz von zwei Spalten, dies zu erreichen?

Answer 1

Sie können eine GroupingView Methode ändern, dies zu erreichen.

Zuerst das GroupingView-Objekt erstellen:

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

Ändern Sie dann die (in der Tat "private") Methode:

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

Dann die Sicht auf das Netz gelten:

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

Ach ja, ein wenig Proof of Concept (Klicken Sie auf Art 'zuletzt aktualisiert')

Demo

Answer 2

Ich glaube, Sie das Datumsformat angeben können, wenn Sie den Datensatztyp für den Speicher definieren. Es kann Ihr Problem lösen.

So etwas wie

    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 Antwort richtig war, dachte ich, ich würde meine letzte, modifizierte Version seines Code für Vollständigkeit veröffentlichen. Dies war, wie ich es zu tun endete. Dank 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);
});

wo g ist die Gridview. Ich fand, dass durch g.view.getGroup.wrap ich mit der vorherige Funktion intakt halten konnte, und ändere nur die Parameter wie Tarnschaf Antwort hat. Außerdem funktioniert diese Methode auch, wenn die Spalten neu geordnet werden - es gibt keine colIndex hart codiert in Des Weiteren gilt es sich automatisch auf jede Spalte, die einen Renderer von formatDateTime hat (mein Datum / Zeit-Formatierungsfunktion) und schaltet diejenigen zum formatDate groupRenderer. so dass die Gruppenüberschriften aussehen saubere.

Answer 4

Sie benötigen tatsächlich die Zeit Teil des Datums zu verweisen? Wenn nicht, könnten Sie eine Konvertierungsfunktion auf dem Feld verwenden clearTime () am Tag Objekt aufrufen.

Answer 5

In Ihrer Raster Spaltendefinition, definiert eine groupRenderer config:

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