How to sort the EXT JS Grid Panel grouped data by its sortOrder

{Grouped data}                {Sort Order}

Audi                            [3]
    col11 col22 xol33
    col21 col23 cole3
Benz                            [1]
    col23 col32 cos32
    col32 dos34 sdfd2
Citron                          [4]
    jkj23 dfd23 fds23
    jkjkk jjkkk jkkkk
Nissan                          [2]
    col23 col32 cos32
    col32 dos34 sdfd2

Fot the above data I want to by sort its sort order (as i got sort order for each group element in my groupdatastore) as below

 Benz                            [1]
    col23 col32 cos32
    col32 dos34 sdfd2
 Nissan                          [2]
    col23 col32 cos32
    col32 dos34 sdfd2
 Audi                            [3]
    col11 col22 xol33
    col21 col23 cole3
 Citron                          [4]
    jkj23 dfd23 fds23
    jkjkk jjkkk jkkkk

How to sort the EXT JS Grid Panel grouped data by its sortOrder

{Grouped data}                {Sort Order}

Audi                            [3]
    col11 col22 xol33
    col21 col23 cole3
Benz                            [1]
    col23 col32 cos32
    col32 dos34 sdfd2
Citron                          [4]
    jkj23 dfd23 fds23
    jkjkk jjkkk jkkkk
Nissan                          [2]
    col23 col32 cos32
    col32 dos34 sdfd2

Fot the above data I want to by sort its sort order (as i got sort order for each group element in my groupdatastore) as below

 Benz                            [1]
    col23 col32 cos32
    col32 dos34 sdfd2
 Nissan                          [2]
    col23 col32 cos32
    col32 dos34 sdfd2
 Audi                            [3]
    col11 col22 xol33
    col21 col23 cole3
 Citron                          [4]
    jkj23 dfd23 fds23
    jkjkk jjkkk jkkkk

• javascript
• extjs

4 Answers 4

Try setting these on the store:

remoteGroup:true,
remoteSort: true

And in you sql or what you use to get data out sort by grouping field first.

gridDataStoreObj = new Ext.data.GroupingStore(
{
    remoteGroup:true,
    remoteSort: true,
    proxy: new Ext.data.HttpProxy({url: 'index.php' }),
    method:'POST',
    groupField:'brandName',
    ...     
    sortInfo:{field: 'id', direction: "ASC"},
}); 

On the server:

select * from table order by brandName, id

This should sort groups themselves.

For extjs 4 and for local sorting, instede of using: groupField: 'mygroupfield' on the store

use:groupers: [{ property: 'tasklist_id', sorterFn: function(o1, o2){} }]

In the store use the sort order column as your groupField.

In the grid:

features: [
  {
    ftype: 'grouping',
    groupHeaderTpl: [
      '{[values.rows[0].groupId]}'
    ]
  }
]

Where groupId is the 'id' of the column that you want to display

in GroupingStore set property:

sortInfo: {field: 'Sort_order', direction: 'ASC'},

http://dev.sencha.com/deploy/dev/docs/?class=Ext.grid.GroupingView