Multiple level of grouping in grids

[leolox69]

I used the basic gridpanel in this. Not the Ext.ux.grid.MultiGroupingGrid

                var rowDataDef = Ext.data.Record.create([
                    {name: 'country', type: 'string'},
                    {name: 'customer', type: 'string'},
                    {name: 'progproj', type: 'string'},
                    {name: 'activity', type: 'string'},
                    {name: 'activity_count'},
                    {name: 'frequency'},
                    {name: 'date'},
                    {name: 'qty'},
                    {name: 'price'},
                    {name: 'amt'},
                    {name: 'encoded_by'},
                    {name: 'date_encoded'},
                    {name: 'modified_by'},
                    {name: 'date_modified'}
                ]);
                
               var reader = new Ext.data.JsonReader(
                    {
                        totalProperty: 'totalCount',
                        root: 'data'
                    },
                    rowDataDef
                );
                
                var conn = new Ext.data.Connection({
                    timeout : 3600000,
                    url: "<?php echo url_for('reports/GetRevenueAudit') ?>",
                    method : 'POST'
                });
                
                var mainStore = new Ext.ux.grid.MultiGroupingStore({
                    proxy : new Ext.data.HttpProxy(conn),
                    reader: reader,
                    sortInfo: {field: 'customer', direction: 'ASC'},
                    groupField: ['country', 'customer', 'progproj', 'activity']
                });
                
                var mainView = new Ext.ux.grid.MultiGroupingView({
                    hideGroupedColumn: false,
                    displayEmptyFields: true,
                    startCollapsed: true,
                    emptyGroupText: ' ',
                    getRowClass: function(rec, rowIndex, meta, store){
                        if( rec.data.date.charAt(0) == '<' )
                            return 'total';
                    },
                    groupTextTpl: '{[values.groupName != "progproj" ? [values.groupName != "activity" ? [values.group] : [values.group] + " [ " + [values.rs[0].data["frequency"] + " ] "]] : [values.group] + " ( " + [values.rs[0].data["activity_count"] == 1 ? values.rs[0].data["activity_count"] + " Billing Activity" : values.rs[0].data["activity_count"] + " Billing Activities"] + " )"]}'
                });
                
                var mainGrid = new Ext.grid.GridPanel({
                    id: 'mainGrid',
                    store: mainStore,
                    view: mainView,
                    stripeRows: true,
                    stateful: true,
                    loadMask: true,
                    enableColumnMove: false,
                    height: 500,
                    style: 'margin-left: 10px;',
                    sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
                    columns:[
                        {header: "Country", dataIndex: 'country', width: 100, align: 'left', hidden: true},
                        {header: "Customer", dataIndex: 'customer', width: 200, align: 'left', hidden: true},
                        {header: "Program/Project", dataIndex: 'progproj', width: 200,  align: 'left', hidden: true},
                        {header: "Activity", dataIndex: 'activity', width: 150, align: 'left', hidden: true},
                        {header: "Date", dataIndex: 'date', width: 75, align: 'center'},
                        {header: "Qty", dataIndex: 'qty', width: 100, align: 'right'},
                        {header: "Price", dataIndex: 'price', width: 100, align: 'right'},
                        {header: "Amount", dataIndex: 'amt', width: 100, align: 'right'},
                        {header: "Encoded By", dataIndex: 'encoded_by', width: 130, align: 'left'},
                        {header: "Date Encoded", dataIndex: 'date_encoded', width: 130, align: 'center'},
                        {header: "Modified By", dataIndex: 'modified_by', width: 130, align: 'left'},
                        {header: "Date Modified", dataIndex: 'date_modified', width: 130, align: 'center'}
                    ],
                    tbar: [
                        {
                            xtype: 'label',
                            html: '<div style="height: 20px;"></div>',
                            id: 'infoLabel'
                        }
                    ]
                });

[justusvm]

Hi leolox69
Please give me the code for multigroupingstore and multigroupingview

[justusvm]

Hi leolox69,
The above code is work fine in ExtJS 4..?

[leolox69]

Hi leolox69
Please give me the code for multigroupingstore and multigroupingview

It's already right there. Just take a look again,

[leolox69]

Hi leolox69,
The above code is work fine in ExtJS 4..?

I don't know. I haven't tried it on ExtJS 4. How I wish to try it on 4. Anyways, it'll work with a few changes and don't forget to include your plugins

[roman.savko]

Hi leolox69,
Can you adapt this awesome plugin for ExtJS 4?
It's a killing feature, which a lot of people need. Please....

[fvchapa]

Buenos dias...soy principiante en estoy y no logro hacer funcionar este grid. me podrian dar unos paso a seguir. Estoy usando extj.3.3.1. saludos

[pardhu]

hi,
i am new to extjs .presently i am working grids. in grids i want display multi Grouping in a grids .

so plz sent me any simple and basic example.

[Golden.Vulture]

Can somebody please update it for EXTJS 4 ?? It will be of lot of help seriously !!!!!!
Really need this guys !

[miha]

Hi, everyone!

I have been trying to make Multi-Grouping functionality for extjs 4, based on "groupers" property in Ext.data.Store. And this is the first result. It is very draft. but it works.
I have overload three functions: getGroups in Ext.data.Store and getGroupRows, getFeatureTpl in Ext.grid.feature.Grouping
Hope it would be useful for someone. And you can be free with your comments and correction, etc.

Ext.define('Ext.data.StoreEx', {
    extend: 'Ext.data.Store',
    
    getGroups: function(requestGroupString) {
        var me = this;
        var records = this.data.items,
            length = records.length,
            groups = [],
            pointers = {},
            record,
            groupStr,
            group,
            i;
        
        var len = 0;
        var fields = [];
        
        
        this.groupers.each(function(item){
            fields.push(item.property);
            len++;
        });
        
        var arr_val = new Array(len);
        
        var val, iter, new_per, grp_td;
        iter = groups;
        for (i = 0; i < length; i++) {
        
            record = records[i];            
            
            new_per = false;
            grp_td = "";
            for(var j=0; j<len; j++){
                val = record.get(fields[j]);
                if (val != arr_val[j] || new_per){
                    
                    iter.push({
                        name: val,
                        children: [],
                        last_grp: (j==len-1), // uses getGroupRows
                        grp_spn: me.col_len - j, // uses in getFeatureTpl. Suppose better approach can be found out
                        grp_td: grp_td // uses in getFeatureTpl. Suppose better approach can be found out
                    });
                    arr_val[j] = val;
                    new_per = true;
                    iter = iter[iter.length-1].children;
                }
                else {
                    iter = iter[iter.length-1].children;    
                }
                grp_td = grp_td + "<td></td>";
            }
            iter.push(record);    

            iter = groups;            
        }

        return groups;
    }
});

Ext.define('Ext.grid.feature.GroupingEx', {
    extend: 'Ext.grid.feature.Grouping',
    alias: 'feature.groupingex',
    
    getGroupRows: function(group, records, preppedRecords, fullWidth) {
        var me = this,
            children = group.children,
            rows = group.rows = [],
            view = me.view;
        group.viewId = view.id;

        if (group.last_grp){
            Ext.Array.each(records, function(record, idx) {
                if (Ext.Array.indexOf(children, record) != -1) {
                    rows.push(Ext.apply(preppedRecords[idx], {
                        depth: 1
                    }));
                }
            });
        }
        else {
            Ext.Array.each(children, function(chl, idx) {
                rows.push(me.getGroupRows(chl, records, preppedRecords, fullWidth));
            });
        }
        
        
        delete group.children;
        
        
        group.fullWidth = fullWidth;
        if (me.collapsedState[view.id + '-gp-' + group.name]) {
            group.collapsedCls = me.collapsedCls;
            group.hdCollapsedCls = me.hdCollapsedCls;
        }

        return group;
    }
    ,getFeatureTpl: function(values, parent, x, xcount) {
        var me = this;
        
        return [
            '<tpl if="typeof rows !== \'undefined\'">',
                
                '<tr class="' + Ext.baseCSSPrefix + 'grid-group-hd ' + (me.startCollapsed ? me.hdCollapsedCls : '') + ' {hdCollapsedCls}">{grp_td}<td class="' + Ext.baseCSSPrefix + 'grid-cell" colspan="{grp_spn}" {[this.indentByDepth(values)]}><div class="' + Ext.baseCSSPrefix + 'grid-cell-inner"><div class="' + Ext.baseCSSPrefix + 'grid-group-title">{collapsed}' + me.groupHeaderTpl + '</div></div></td></tr>',
                
                '<tr id="{viewId}-gp-{name}" class="' + Ext.baseCSSPrefix + 'grid-group-body ' + (me.startCollapsed ? me.collapsedCls : '') + ' {collapsedCls}"><td colspan="' + parent.columns.length + '">{[this.recurse(values)]}</td></tr>',
            '</tpl>'
        ].join('');
    }
    
});
 Ext.onReady(function(){
    
    var groupers = [{
            property : 'name',
            direction: 'ASC'
        },{
            property : 'email',
            direction: 'ASC'
        }];
    
    Ext.create('Ext.data.StoreEx', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        //groupField: 'name',
        groupers : groupers,
        col_len: 3,
        data:[
            { 'name': 'name1', "email":"em_1_1", "phone":"555-111-1224" },
            { 'name': 'name1', "email":"em_1_1", "phone":"555-111-1224" },
            { 'name': 'name1', "email":"em_1_2", "phone":"555-111-1224" },
            { 'name': 'name2', "email":"em_2_1", "phone":"555-222-1234" },
            { 'name': 'name2', "email":"em_2_1", "phone":"555-222-1234" },
            { 'name': 'name2', "email":"em_2_2", "phone":"555-222-1244" },
            { 'name': 'name2', "email":"em_2_2", "phone":"555-222-1254" }
        ],
    });
    
    var groupingFeature = Ext.create('Ext.grid.feature.GroupingEx', {
        //groupHeaderTpl: 'Group: {last_grp} {name} ({rows.length})'//, //print the number of items in the group
        //startCollapsed: true // start all groups collapsed
    });


    var grid = Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            { header: 'Name',  dataIndex: 'name' },
            { header: 'Email', dataIndex: 'email', flex: 1 },
            { header: 'Phone', dataIndex: 'phone' }
        ],
        height: 400,
        width: 600,
        features: [groupingFeature],
        renderTo: Ext.getBody()
    });
    
});