1. #1
    Sencha User
    Join Date
    Jun 2013
    Posts
    6
    Vote Rating
    0
    danielat is on a distinguished road

      0  

    Default Unanswered: Grid Panel Grouping by formatted Date column

    Unanswered: Grid Panel Grouping by formatted Date column


    Hello,

    I have a grid panel with a grouping feature. I want my grid to be by default grouped by a date column. This column is in the format 'Y-m-d H:i', but I want my grouping to be limited to the format 'Y-m-d', so I would have the rows grouped without the timestamp, by day.
    I managed to do so by using a custom grouper and overwritting it's getGroupString method, like this:
    Code:
     var grouper = Ext.create('Ext.util.Grouper', {
                    direction: 'DESC',
                    root:'data',
                    property:'initDate',
                    getGroupString: function(instance) {
                        return Ext.Date.format(instance.get('initDate'), 'Y-m-d');
                    }
    });
    This works fine and I have the grid display on render the data grouped correctly.
    The problem is that if I group my grid by a different column, and afterwards group again by the 'initDate' column, my data is grouped by the whole date, including the timezone.

    Do you have any suggestion about resolving this issue?

    Thanks in advance,
    Daniela.

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,062
    Vote Rating
    215
    Answers
    486
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    The header menu's group by handler is pretty straight-forward - just groups by the dataIndex of the column.
    I suspect you'll need to either:
    listen to the groupchange event (there is not a beforegroupchange event) and clear / set your own grouper
    http://docs.sencha.com/extjs/4.2.1/#...nt-groupchange

    or you can extend the grouping feature and override the behavior of onGroupMenuItemClick. That is a private method and as always, changing / extending private class members means you're taking on the ownership of maintenance as new frameworks come out as they may or may not change private class internals without notice (standard disclaimer).


    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager:
    sheryl@sencha.com

  3. #3
    Sencha User
    Join Date
    Jun 2013
    Posts
    6
    Vote Rating
    0
    danielat is on a distinguished road

      0  

    Default


    Thanks for your reply. I have tried the first approach you've mentioned and listened to the groupchange event. The problem is I don/t know how to set my gruoup to the value I want. I've tried overridding the getgroupstring function to return the date in the right format. Although this approach works, and the grid has the rows grouped by the formatted date, I have problems with the grid afterwards. Somehow the store doesn't have the records grouped by the formatted date values, but by the unformatted date values.
    This is my code in the listener:
    Code:
                
    this.store.on('groupchange', function(store, groupers, eOpts) {        
          if(groupers) {
                   if (groupers.items[0]) {
                            console.dir(store);                        
                            if (groupers.items[0].property == 'initDate'){
                                groupers.items[0].getGroupString = function(instance) {                                            
                                    return Ext.Date.format(instance.get('initDate'),'Y-m-d');
                                };
                            }
                        }
                    }                
                });
    Do you have a different suggestion for doing this?
    Thanks,
    Daniela.

  4. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,062
    Vote Rating
    215
    Answers
    486
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    I haven't tried it, but was thinking in the groupchange event you could do:

    Code:
    // or whatever grouper you wanted to set up
    var grouper = Ext.create('Ext.util.Grouper', {
        direction: 'DESC',
        root: 'data',
        property: 'initDate',
        getGroupString: function (instance) {
            return Ext.Date.format(instance.get('initDate'), 'Y-m-d');
        }
    });
    store.clearGrouping();
    store.group(grouper);


    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager:
    sheryl@sencha.com

  5. #5
    Sencha User
    Join Date
    Jun 2013
    Posts
    6
    Vote Rating
    0
    danielat is on a distinguished road

      0  

    Default


    This doesn't work. Calling store.group() in the groupchange event makes the groupchange event being called in an infinite loop.
    Thanks.

  6. #6
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,062
    Vote Rating
    215
    Answers
    486
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Maybe a timer of some sort?

    Code:
    // or whatever grouper you wanted to set up
    if (store.regroup === true) {
        var grouper = Ext.create('Ext.util.Grouper', {
            direction: 'DESC',
            root: 'data',
            property: 'initDate',
            getGroupString: function (instance) {
                return Ext.Date.format(instance.get('initDate'), 'Y-m-d');
            }
        });
        store.regroup = true;
        store.clearGrouping();
        store.group(grouper);
        Ext.defer(function () {
            delete store.regroup
        }, 500);
    }


    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager:
    sheryl@sencha.com

Thread Participants: 1

Tags for this Thread