---
title: "Setting the group sorting direction in list component in Sencha Touch"  
description: "In this article, I’m explaining how to set the group sorting direction in list component in sencha touch."  
author: "Sumit Kesarwani"  
published: 2013-06-20  
updated: 2026-05-13  
canonical: https://www.mindstick.com/articles/1345/setting-the-group-sorting-direction-in-list-component-in-sencha-touch  
category: "sencha touch"  
tags: ["sencha touch"]  
reading_time: 7 minutes  

---

# Setting the group sorting direction in list component in Sencha Touch

Setting the group sorting [direction](https://yourviews.mindstick.com/story/5034/10-animals-with-the-best-sense-of-direction) in list [component](https://www.mindstick.com/articles/12262/learn-how-to-make-a-component-in-magento-2) in [Sencha Touch](https://www.mindstick.com/blog/619/changing-sencha-touch-app-theme)

In this article, I’m explaining how to set the group sorting direction in list component in sencha touch.

If you want to learn how to create a list in sencha touch, you can read my previous article on list component:

http://www.mindstick.com/Articles/d6eaa43d-649b-4da3-a450-000fce8c2ae3/?List%20in%20Sencha%20Touch \
\
http://www.mindstick.com/Articles/0e03392f-fe6c-46dc-a1d9-bc7536704749/?Index%20Bar%20in%20Sencha%20Touch

##### Example

##### Step-1:

Firstly create a store and named it TeamStore and add three fields name, league and division then [add data](https://www.mindstick.com/forum/287/how-to-add-data-in-drop-down-list) to the store through data [configuration](https://www.mindstick.com/articles/13112/setting-up-the-perfect-configuration-for-your-work-computer). Add a sorter to the store through sorters configuration and set the [property](https://www.mindstick.com/articles/198559/an-ownership-of-property-in-hua-hin) to name so that the sorter will sort the data according to name field, also add a grouper to the store through grouper configuration and a grouper [function](https://www.mindstick.com/articles/43970/purchase-suitable-wedding-dresses-for-your-wedding-function).

```
Ext.define('MyApp.store.TeamStore', {    extend: 'Ext.data.Store',     config: {        data: [            {                name: 'New York Yankee',                league: 'AL',                division: 'East'            },            {                name: 'Tampa Bay',                league: 'AL',                division: 'East'            },            {                name: 'Boston',                league: 'AL',                division: 'East'            },            {                name: 'Toronto',                league: 'AL',                division: 'East'            },            {                name: 'Baltimore',                league: 'AL',                division: 'East'            },            {                name: 'Detroit',                league: 'AL',                division: 'Central'            },            {                name: 'CleveLand',                league: 'AL',                division: 'Central'            },            {                name: 'Chicago White Sox',                league: 'AL',                division: 'Central'            },            {                name: 'Kansas City',                league: 'AL',                division: 'Central'            },            {                name: 'Minniesota',                league: 'AL',                division: 'Central'            },            {                name: 'Texas',                league: 'AL',                division: 'West'            },            {                name: 'Los Angeles Angels',                league: 'AL',                division: 'West'            },            {                name: 'Oakland',                league: 'AL',                division: 'West'            },            {                name: 'Seattle',                league: 'AL',                division: 'West'            }        ],        groupDir: 'DESC',        storeId: 'TeamStore',        fields: [            {                name: 'name'            },            {                name: 'league'            },            {                name: 'division'            }        ],        sorters: {            property: 'name'        },        grouper: {            groupFn: function(item) {                return item.get('name')[0];            }        }    }});
```

Step-2:

Next add a list to the project and add store to it, drag-n-drop a toolbar to the list and [add two](https://www.mindstick.com/forum/480/add-two-number) buttons to the toolbar.

```
Ext.define('MyApp.view.MyList', {    extend: 'Ext.dataview.List',     config: {        store: 'TeamStore',        grouped: true,        itemTpl: [            '<div>{name}</div>'        ],        items: [            {                xtype: 'toolbar',                docked: 'top',                items: [                    {                        xtype: 'button',                        id: 'ASC',                        itemId: 'mybutton',                        text: 'groupDir=ASC'                    },                    {                        xtype: 'button',                        id: 'DESC',                        itemId: 'mybutton1',                        text: 'groupDir=DESC'                    }                ]            }        ],        listeners: [            {                fn: 'onASCTap',                event: 'tap',                delegate: '#ASC'            },            {                fn: 'onDESCTap',                event: 'tap',                delegate: '#DESC'            }        ]    },     onASCTap: function(button, e, eOpts) {        Ext.getStore('TeamStore').setGroupDir('ASC').sort();    },     onDESCTap: function(button, e, eOpts) {        Ext.getStore('TeamStore').setGroupDir('DESC').sort();    }});
```

Output

![Setting the group sorting direction in list component in Sencha Touch](https://www.mindstick.com/mindstickarticle/2fa296ac-11db-453e-995b-0164eaa66bcb/images/34c7b2c0-0d55-4c4b-bf3d-f88e3649b712.png)

Currently the list sorted in [descending order](https://www.mindstick.com/forum/160082/how-to-sort-the-results-of-an-sql-search-query-in-ascending-and-descending-order) but when you tap on groupDir=ASC button, the list will sort in [ascending order](https://www.mindstick.com/forum/157178/how-to-filter-1000-of-student-name-in-php-in-ascending-order) like this:

![Setting the group sorting direction in list component in Sencha Touch](https://www.mindstick.com/mindstickarticle/2fa296ac-11db-453e-995b-0164eaa66bcb/images/8d9ad5b3-ae47-4d7e-8eab-fd61aa31ada1.png)

---

Original Source: https://www.mindstick.com/articles/1345/setting-the-group-sorting-direction-in-list-component-in-sencha-touch

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.