Sencha Touch: How to group list items in a List Component

Today, we are going to see how to apply group for model items in Ext.dataview.List Component. This list component is used to list the items based on Store. Here is the usage of List Component in Web App:

• List of messages in an email app
• Show latest news/tweets
• Tiled set of albums in an HTML5 music player 
• and so on ...

Let's consider the below code for our demonstration purpose. We are going to list the users and apply group using their date of birth.

Demonstration Code:

List Component:

Ext.define('MyApp.view.TestList', {
    extend: 'Ext.dataview.List',
    alias: 'widget.testlist',

    requires: [
        'Ext.XTemplate'
    ],

    config: {
        store: 'MyStore',
        grouped: true,
        itemTpl: [
            '<div>List Item {name}</div>'
        ]
    }
});

Data Store:

Ext.define('MyApp.store.MyStore', {
    extend: 'Ext.data.Store',

    requires: [
        'Ext.data.Field',
        'Ext.util.Grouper'
    ],

    config: {

        data: [
            {
                id: 1,
                name: 'suresh',
                age: 21,
                dob: '10/1/2014'
            },
            {
                id: 2,
                name: 'suresh1',
                age: 25,
                dob: '10/1/2014'
            },
            {
                id: 3,
                name: 'suresh2',
                age: 35,
                dob: '11/1/2014'
            },
            {
                id: 4,
                name: 'suresh3',
                age: 59,
                dob: '11/1/2014'
            },
            {
                id: 5,
                name: 'suresh4',
                age: 25,
                dob: '11/1/2014'
            },
            {
                id: 6,
                name: 'suresh5',
                age: 65,
                dob: '12/1/2014'
            }
        ],
        storeId: 'MyStore',
        fields: [
            {
                name: 'id',
                type: 'int'
            },
            {
                name: 'name',
                type: 'string'
            },
            {
                name: 'age',
                type: 'int'
            },
            {
                defaultValue: 'new Date()',
                name: 'dob',
                type: 'date'
            }
        ],

        grouper: {
            groupFn: function(item) {
                return Ext.Date.format(item.get('dob'),'F d, Y');
            }
        }
    }
});

Explanation:

In order to enable the Ext.List component for grouping list items, we need to set grouped configuration property to true. In Store, grouping items can be applied to the model records using grouper configuration property.

Inside grouper configuration, we can add grouper function using groupFn configuration which will return the value for the grouped item. Grouping can be applied to list component based on the groupFn return value. In our above case, we are applying grouping for the user record field 'dob'.

Final Output:

From above output, you can see that the list items are grouped and rendered based on the users Date Of Birth (dob) record field.

Hope, you enjoyed this Post.