articles

Home / DeveloperSection / Articles / Setting the group sorting direction in list component in Sencha Touch

Setting the group sorting direction in list component in Sencha Touch

Sumit Kesarwani 10026 20-Jun-2013

Setting the group sorting direction in list component in Sencha Touch

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 to the store through data configuration. Add a sorter to the store through sorters configuration and set the property 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.

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 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

Currently the list sorted in descending order but when you tap on groupDir=ASC button, the list will sort in ascending order like this:

Setting the group sorting direction in list component in Sencha Touch


Updated 03-Feb-2020

Leave Comment

Comments

Liked By