Multiple level of grouping in grids

**StaticVoidMain** · 14 Oct 2011 4:54 AM

Originally Posted by Hari1611

Excellent plugin!! im using similar one on ext 3.
Do you have any for ext 4??
looking for such a one desperately..

Any one please help!!

Thanks in advance.

Hi, Hari1611, Ext4 supports multi grouping natively now, you don't need a plugin for that, check the docs for Store.groupers.

Hope that helps.
Jerónimo Milea

**Hari1611** · 14 Oct 2011 6:21 AM

Thanks for the reply Jerónimo Milea
Ya i found that, but thats not working..it only group data with first item in the groupers collection.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
    <link type="text/css"  href="../../Core/scripts/ext/4.0.0/resources/css/ext-all.css" rel="stylesheet"  />
    <script type="text/javascript" src="../../Core/scripts/ext/4.0.0/ext-all-debug.js" ></script>
    <script type="text/javascript">

        Ext.onReady(function(){
        
            var groupers = [{
                    property : 'name',
                    direction: 'ASC'
                },{
                    property : 'email',
                    direction: 'ASC'
                }];
            
            Ext.create('Ext.data.Store', {
                storeId:'simpsonsStore',
                fields:['name', 'email', 'phone'],
                groupField: 'name',
                groupers : [],
                data:[
                    { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
                    { 'name': 'Lisa',  "email":"test@simpsons.com",  "phone":"555-111-1224"  },
                    { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
                    { 'name': 'Bart',  "email":"test2@simpsons.com",  "phone":"555-222-1234" },
                    { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
                    { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
                ],
            });
            
            var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
                groupHeaderTpl: 'Group: {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()
            });
            
            grid.store.group(groupers, "DESC");
            
        });
        

    </script>
 </head>

 <body>
  
 </body>
</html>

Any thing wrong with the code??

**Hari1611** · 16 Oct 2011 8:48 PM

Already posted a thread regarding the groupers.. but i cant find the solution for my problem..link to the thread is here
http://www.sencha.com/forum/showthre...Level-Grouping

Any suggestion's???

**psianil9** · 15 Nov 2011 9:41 AM

So far i haven;t found any solution with Ext JS 4 for multi-level grouping. It's strange that it is consistently requested by several forums since 2009, and still not part of framework!

Does anyone has found solution?

**leolox69** · 8 Dec 2011 2:47 AM

It takes time to load when handling large amounts of data/rows. It sometimes trigger the browser's javascript run time error. Any solution to this?

**yyogev** · 8 Dec 2011 2:49 AM

Originally Posted by leolox69

It takes time to load when handling large amounts of data/rows. It sometimes trigger the browser's javascript run time error. Any solution to this?

Yes - rewrite in ExtJS 4... Unfortunately no one has taken this challenge yet.
In my application I am forced to give up the use of this extension and use single-level grouping as it is blocking my move to Ext 4.

**justusvm** · 8 Dec 2011 4:35 AM

Please update the multigrouping in grid using extjs 4

**roman.savko** · 8 Dec 2011 10:27 AM

Can anyone adapt Multilevel grouping plugin for ExtJs 4? Please!!!!

**leolox69** · 8 Dec 2011 7:34 PM

Originally Posted by yyogev

Yes - rewrite in ExtJS 4... Unfortunately no one has taken this challenge yet.
In my application I am forced to give up the use of this extension and use single-level grouping as it is blocking my move to Ext 4.

I have now a solution to prevent javscript runtime errors. Instead of reloading the store, just use the Ext.Ajax.request to get the JSON data. I then use the Ext.TaskMgr to add the records using store.add(record) method.

Code:

revenue_audit.app.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'}
                ]);

store = new Ext.ux.grid.MultiGroupingStore({
                    reader: revenue_audit.app.reader,
                    sortInfo: {field: 'customer', direction: 'ASC'},
                    groupField: ['country', 'customer', 'progproj', 'activity']
});

Ext.Ajax.timeout = 3600000;
                Ext.Ajax.request({
                    url: "data.php",
                    params: params,
                    method:'POST', 
                    success: function(f, a)
                    {
                         var decode = Ext.util.JSON.decode(f.responseText);
                        
                        if( !decode.data ){
                            return;
                        }
                        if( decode.data.length == 0 ){
                            return;
                        }
                        
                        var r = 0;
                        var task = {
                            interval: 1,
                            scope: this,
                            run: function(){
                                var Data = decode;
                                if( r == Data.data.length ){
                                    return;
                                }
                                
                                var rec = new rowDataDef({
                                    'country': Data.data[r].country,
                                    'customer': Data.data[r].customer,
                                    'progproj': Data.data[r].progproj,
                                    'activity': Data.data[r].activity,
                                    'activity_count': Data.data[r].activity_count,
                                    'frequency': Data.data[r].frequency,
                                    'date': Data.data[r].date,
                                    'qty': Data.data[r].qty,
                                    'price': Data.data[r].price,
                                    'amt': Data.data[r].amt,
                                    'encoded_by': Data.data[r].encoded_by,
                                    'date_encoded': Data.data[r].date_encoded,
                                    'modified_by': Data.data[r].modified_by,
                                    'date_modified': Data.data[r].date_modified
                                });
                                
                                store.add(rec);
                                r++;
                            }
                        };
                        
                        Ext.TaskMgr.start( task );
                    },
                    failure: function(f,a){}
                });

I learned it from here http://werxltd.com/wp/2009/07/03/cleaning-up-unresponsive-script-errors/

**justusvm** · 8 Dec 2011 9:41 PM

Hi leolox69
Kindly post the code for multigroupingstore and grid

Multiple level of grouping in grids

Thread Tools

Search Thread

Display

Multilevel Groupping

Multilevel Groupping