1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    3
    Vote Rating
    4
    PeteGGB is on a distinguished road

      2  

    Default Unanswered: How to group by day when showing datetime in grid using Grouping Feature

    Unanswered: How to group by day when showing datetime in grid using Grouping Feature


    Hi,

    I have a grid with a few grid columns and a date column with a date time value displayed. I have applied the Grouping feature and it works well up until the date column is grouped, at which point the grid is grouped by down to the second, so effectively not grouping the results as the end user would expect. How do I alter the value being grouped on when it is a date time type?

    I have seen an example that works for ExtJS 3.4 but I am none the wiser how to implement in ExtJS 4.1

    I am not a Javascript developer but I am having to do my best as there is no one else to do this instead so a simple(ish) answer would be greatly appreciated.

    Regards,

    Pete

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Answers
    3540
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      -2  

    Default


    What ever you return in the groupFn is what will be grouped on

    Code:
    grouper : {
        groupFn : function (record) {
            return Ext.Date.format(record.get('date'), 'l');
        }
    }
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    3
    Vote Rating
    4
    PeteGGB is on a distinguished road

      2  

    Default


    Hi Mitchell,

    Thanks for your response, but I am still a bit puzzled.

    I have added the below to my store but the groupFn is not being reached when grouping on the grid, where should I be putting the groupFn?

    groupers: {
    grouper: {
    groupFn: function (record) {
    return Ext.Date.format(record.get('date'), 'l');
    }
    }
    },

    Thanks

    Pete

  4. #4
    Sencha Premium Member natedsaint's Avatar
    Join Date
    Jul 2012
    Location
    Fort Worth, TX
    Posts
    21
    Vote Rating
    3
    natedsaint is on a distinguished road

      1  

    Exclamation Code does not contain grouperFn or groupFn

    Code does not contain grouperFn or groupFn


    Grepping the entire codebase for "groupFn" and "grouperFn" has revealed nothing, however looking at the documentation reveals that groupers are an extension of sorters. It therefore stands to reason that the configs available there (sorterFn, which actually sorts the values, and transform, which supposedly converts those values before sorting) would be available. My tests of providing both of these configs to a grouper before passing them to the store via the group() method shows this is not the case, as neither method was called.

    Looking at the source for the group method, we see the following (regardless of whether you are remotely grouped or only locally, this is eventually called after initializing the groupers):

    Code:
    me.fireGroupChange();
    For the table feature "grouping" this results in a call to the "onGroupChange" method of the feature which simply refreshes the gridview with an abstracted method (refreshIf()). This refresh will either expect remoteGrouping to handle the work of grouping the store and then using your groupers, or will group locally based on that, as far as I can tell. At no point does this seem to take the sorterFn or transform config into account, which to me only furthers the confusion. Please advise with how to use this feature, as it appears to be undocumented or at least documented differently from how it's recommended to use it here.
    Last edited by natedsaint; 21 May 2013 at 12:01 PM. Reason: clarifying grep criteria in search

  5. #5
    Sencha Premium Member natedsaint's Avatar
    Join Date
    Jul 2012
    Location
    Fort Worth, TX
    Posts
    21
    Vote Rating
    3
    natedsaint is on a distinguished road

      1  

    Lightbulb Workaround (not ideal)

    Workaround (not ideal)


    For anyone else struggling with this problem we were able to create a workaround in the model rather than on the grid:
    Code:
        {
          displayText: 'Generated Date',
          name: '__OriginalDate',
          dateFormat: 'c',
          type: 'date',
          convert: function(v, rec) {
            var cDate = rec.get('OriginalDate');
            return cDate ? new Date(cDate.toDateString()) : null;
          }
        },
        {
          displayText: 'Original Date',
          name: 'OriginalDate',
          dateFormat: 'c',
          type: 'date'
        },
    By doing this, our groups by can be built with a dropdown that just adds __ to the date you REALLY want to group by, and they will be converted into whatever format you prefer in the convert function. This is not ideal because it has some overhead of conversion whenever you work with the model, we'd rather perform this conversion on the grid and preferably within the grouping feature.

Thread Participants: 2