1. #1
    Sencha User
    Join Date
    Sep 2010
    Posts
    51
    Vote Rating
    2
    ExTriqui is on a distinguished road

      1  

    Default MultiGrouping and MultiGroupingSummary

    MultiGrouping and MultiGroupingSummary


    Hi.
    I have an implementation of the Grouping and GroupingSummary extensions with support for multiple groupers.
    All the files needed are attached.
    The code has been kept as unmodified as possible compared to the original features.
    The files attached are.

    ext-patch-4.1.js
    • A patch for the Store.aggregate function that executes the aggregation function for every group level.
    • A couple of patches for AbstractSummary as explained in this post: http://www.sencha.com/forum/showthre...fixes&p=836776
    • An improvement for Summary to allow showing the summary above or below the grid content.
    • A patch to avoid that the Summary feature interferes with the MultiGrouping feature. Using {%this.recursive = true%}{[this.recurse(values)]} in the MultiGrouping template allows this patch to detect recursive calls and not modify them.
    • A patch for Summary to stop using different parameters for summaryRenderer and use the same that are used in the standard renderer function. It will now call summaryRenderer or renderer if summaryRenderer is not set and summaryType is not false.
    • A patch for Summary to store the total values using the column dataIndex instead of the column id.
    MultiGrouping.js and MultiGrouping.css
    Works exactly the same as Grouping but supports multiple groups in the store.
    A new pair of events are fired at the view: enablegrouping and disablegrouping.
    A couple of bugs have been fixed:
    startCollapsed didn't work quite well.
    groupchange events were not fired properly.
    some html markup that was not needed has been removed.
    Known issues: Modifications of the store are not fully supported: the new events onAdd, onUpdate and onRemove have not been modified to work with multiple groups. I still have to work on those, but for not modifiable stores it's not needed (that's why it's not done yet) .

    MultiGroupingSummary.js
    A new method printGroupSummary has been added to avoid conflicts with the Summary feature, so both can work together, MultiGroupingSummary will print summaries for groups and Summary should print the summary for the whole grid.
    It can be modified but the default behavior is to show the calculated totals for every group in its header row, instead of adding a new one.
    It can be modified but if the last level of grouping has only one child row, that row is removed and the group is made not expandable (the data of the child is still shown in the group summary so the child is removed to avoid having two row with the exact same information).
    It uses the same modifications added to the Summary feature to use the same type functions for renderer and summaryRenderer and to save the data using the dataIndex instead of the column id.


    I think that's all I hope you find it useful.
    Of course any bugs you find or improvements, please report them so I can fix them.


    Update 2012/09/21: New you can set startCollapsed with the depth level.
    startCollapsed: true is equivalent to startCollapsed: 0
    startCollapsed: 1 will expand the first level and collapse everything else.
    Attached Files
    Last edited by ExTriqui; 21 Sep 2012 at 2:54 AM. Reason: Fixed a bug with icons

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,982
    Vote Rating
    453
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Thank you for the contribution!

    Scott.

  3. #3
    Touch Premium Member
    Join Date
    Sep 2011
    Posts
    2
    Vote Rating
    1
    bwelting is on a distinguished road

      0  

    Default


    Great function works perfect for my application.

    The css has been changed for 4.1.1 though
    the plus and minus image are not rendered correctly,
    I changed the css to:
    Code:
    .x-grid-group-hd .x-grid-group-title {
        background:transparent no-repeat 0 -1px;
        background-image: url(http://cdn.sencha.io/ext-4.1.1-gpl/resources/themes/images/default/grid/group-collapse.gif);
        padding: 0 0 0 14px;
    }
    .x-grid-group-title {
        background-image: none;
        padding: 0px;
    }
    
    /* line 510, ../themes/stylesheets/ext4/default/widgets/_grid.scss */
    .x-grid-group-hd-collapsed .x-grid-group-title {
        
        background-image: url(http://cdn.sencha.io/ext-4.1.1-gpl/resources/themes/images/default/grid/group-expand.gif);
    }
    .x-grid-group-no-expand .x-grid-group-title {
        background-image: none !important;
    }
    
    
    /* Decoration only not need for multigrouping */
    .x-grid-group-hd.group-depth-0 .x-grid-group-title {
        color: black;
        font-size: 12px;
    }
    I'm not sure if i need to change more code in the css, but it works fine for me.

    furthermore on line 894 of MultiGrouping.js you say if a group has one record it should not bij expandable, not sure about the thought behind this decission but for my application I want to show the rows of the group even if it has only one row. I changed it to the following code:
    Code:
                       group.children = group.records;
                        if (group.children.length == 0) {
                            group.noExpandCls = me.noExpandCls;
                            me.getGroupRows(group, [], preppedRecords, fullWidth);
                        } else {
                            me.getGroupRows(group, records, preppedRecords, fullWidth);
                        }
    Maybe you could add to the explain part how to define a multigroup.
    To integrate the multigroup I defined the groupers in my store. In the features part of the grid I defined it like this.
    Code:
    features: [
                           { ftype: 'multigrouping',             
                             groupHeaderTpl: 'Subject: {name}',
                               
                          }],

    I'm not sure how to use multiple templates. The firstgroup and secondgroup should have different templates, how can you identify which group is used in your template?


    Thank you for the function!

  4. #4
    Sencha User
    Join Date
    Sep 2010
    Posts
    51
    Vote Rating
    2
    ExTriqui is on a distinguished road

      0  

    Default


    I have updated the code to work with version 4.1.1.

    bwelting, glad you find it useful. Regarding your comments.
    The css has been changed and the noExpandCls has been remove and now it makes use of the new hdCollapsibleCls css class.

    Regarding non expandible groups when there is only one child, it comes from the fact that following the standard behavior, having groups and summaries would result in three rows (header, row and summary) with the same data for every group with only one child. So to make the data easier to read, this extension puts the summary in the header and removes the child, resulting in only one row. This only happens for the last level though.
    I have plans to make it possible to configure both these "features". So you could choose to include the summary in the header or displaying it after the children and you could choose to make the group expandable even if it has only one child.
    I haven't had a lot of time to keep working on this, but I expect to revisit it soon.

    I don't know what you exactly want me to explain about how to define a multigroup.
    Basically you define the groupers you want to use in your store or the user selects "group by this field" in the column headers to add a new level of grouping. There is no way to remove a column from the grouping, you have to clear all groups and start adding groups again. I have not needed this, but it's something I will have to implement for sure, so I will work on this too.

    Using multiple templates is not possible at this moment, but I will have a look at it. But templates are the part that gave me more headaches when writing the code.
    I guess you know that you can define different styles for every group level using the group-depth-# class:
    Code:
    .x-grid-group-hd.group-depth-0 .x-grid-group-title { ... }
    where 0 is the group depth

    Sorry for the brief answers, but I'm a bit busy.
    Let me know if you have any other question or suggestion.

    Cheers.

  5. #5
    Sencha User
    Join Date
    Jun 2011
    Location
    Russia
    Posts
    34
    Vote Rating
    1
    icemanovich is on a distinguished road

      0  

    Default


    Hi, ExTriqui !

    Thanks for sharing and I have some questions about this feature. I want to group by 2 fields, one inside another (in example data "departments ->seniority"). First of all, it is possible to implement it into ext-4.0.7 and how should I write groupeField?

    Thanks!

  6. #6
    Sencha User
    Join Date
    Sep 2010
    Posts
    51
    Vote Rating
    2
    ExTriqui is on a distinguished road

      0  

    Default


    Well there are little differences between 4.0.7 and 4.1.x, so I think it should work properly. Maybe you have to change some little things, but I don't think so.


    Grouping with this plugin works exactly the same as the official ext plugin (only you can group by two or more columns). So in order to enable it, you only need to specify your groupers in the store.


    groupField is shorthand for
    Code:
    groupers = [{ property : groupField, direction: config.groupDir || me.groupDir }];
    So, to use multiple grouping you have to use groupers instead of groupField, like this:
    Code:
    groupers: ["departments", "seniority"]

    PS: In case it doesn't work with 4.0.7, let me know and we will see what to change in order to have it working.

  7. #7
    Sencha User
    Join Date
    Jun 2011
    Location
    Russia
    Posts
    34
    Vote Rating
    1
    icemanovich is on a distinguished road

      0  

    Default


    Thanks for reply, ExTriqui! But feature does not work for me. May be you can help me with that issue.
    As you say, I use "groupers" instead of "groupField". But when I try to switch ftype from

    Code:
    features: [{
        ftype:'grouping',
    }]
    to
    Code:
    features: [{
        ftype:'multigrouping',
    }]
    firebug display 2 error messages:
    TypeError: this.grid is null
    o.data = record.getData(); MultiG...9951875 (line 837)

    TypeError: record.getData is not a function
    o.data = record.getData();
    Here is my code:
    Code:
    var store = Ext.create('Ext.data.Store', {
            storeId:'employeeStore',
            fields:['name', 'seniority', 'department', 'phone'],
    
    //        groupField: 'department',
            groupers: ["departments", "seniority"],
            data: {'employees':[
                { "name": "Michael Scott",  "seniority": 7, "department": "Management", phone: '777-55-5124' },
                { "name": "Dwight Schrute", "seniority": 2, "department": "Sales", phone: '777-55-5100' },
                { "name": "Jim Halpert",    "seniority": 3, "department": "Sales", phone: '777-78-5124' },
                { "name": "Kevin Malone",   "seniority": 4, "department": "Accounting", phone: '771-55-5124' },
                { "name": "Angela Martin",  "seniority": 5, "department": "Accounting", phone: '777-55-5124' }
            ]},
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'employees'
                }
            }
        });
    
        Ext.create('Ext.grid.Panel', {
            id: 'myGrid',
            title: 'Employees',
            store: Ext.data.StoreManager.lookup('employeeStore'),
            columns: [
                { text: 'Name',     dataIndex: 'name', flex: 1 },
                { text: 'Seniority', dataIndex: 'seniority', flex: 1 },
                { text: 'Phone', dataIndex: 'phone', flex: 1 }
            ],
            features: [ 
                {
    //                ftype:'grouping',
                    ftype:'multigrouping',
                    groupHeaderTpl: 'Dept: {department} {phone} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})'
                }
            ],
            width: 450,
            height: 275,
            renderTo: Ext.getBody()
        });

  8. #8
    Sencha User
    Join Date
    Sep 2011
    Location
    Russia
    Posts
    10
    Vote Rating
    1
    azesm is on a distinguished road

      0  

    Default


    Hi
    Here the working code for 4.0.7 and above
    http://www.sencha.com/forum/showthre...id-and-Summary

  9. #9
    Sencha User
    Join Date
    Sep 2010
    Posts
    51
    Vote Rating
    2
    ExTriqui is on a distinguished road

      0  

    Default


    Cool! I was checking my code to see what I had from 4.0.7 but all I had was a non working version, the first working version I have is for 4.1.0. So it's great you made that version.
    I hope some day we see this features in the official release.

  10. #10
    Sencha User
    Join Date
    Sep 2010
    Posts
    51
    Vote Rating
    2
    ExTriqui is on a distinguished road

      0  

    Default


    record.getData is only available since 4.1 (http://docs.sencha.com/ext-js/4-1/#!...method-getData) so you can use the 4.0.7 version posted by azesm.