In this article, I’m explaining the index bar in sencha touch.

Index bar is a component used to display a list of data which can be easily navigable either in ascending or descending order. 

Step 1:

First add a store to the project.

Ext.define('MyApp.store.MyStore', {

    extend: 'Ext.data.Store',
 
    config: {
        data: [
            {
                firstname: 'Alex',
                lastname: 'Stewart'
            },
            {
                firstname: 'Bill',
                lastname: 'Gates'
            },
            {
                firstname: 'Chris',
                lastname: 'Harris'
            },
            {
                firstname: 'Dwayne',
                lastname: 'Smith'
            },
            {
                firstname: 'Emon',
                lastname: 'Morgan'
            },
            {
                firstname: 'Frank',
                lastname: 'Smith'
            },
            {
                firstname: 'Garry',
                lastname: 'Jones'
            },
            {
                firstname: 'Henry',
                lastname: 'Paul'
            },
            {
                firstname: 'Ian',
                lastname: 'Bishop'
            },
            {
                firstname: 'Joseph',
                lastname: 'Skew'
            },
            {
                firstname: 'Kevin',
                lastname: 'Peterson'
            },
            {
                firstname: 'Lance',
                lastname: 'Klusener'
            },
            {
                firstname: 'Mathew',
                lastname: 'Donald'
            },
            {
                firstname: 'Nathan',
                lastname: 'Stewart'
            },
            {
                firstname: 'Orlando',
                lastname: 'Bloom'
            },
            {
                firstname: 'Prince',
                lastname: 'Jackyard'
            },
            {
                firstname: 'Qatar',
                lastname: 'Dew'
            },
            {
                firstname: 'Rose',
                lastname: 'Philips'
            },
            {
                firstname: 'Sam',
                lastname: 'Simpson'
            },
            {
                firstname: 'Tandy',
                lastname: 'Peter'
            }
        ],
        storeId: 'MyStore',
        fields: [
            {
                name: 'firstname'
            },
            {
                name: 'lastname'
            }
        ],
        sorters: {
            property: 'firstname'
        },
        grouper: {
            groupFn: function(item) {
                return item.get('firstname')[0];
            }
        }
    }
});

 Create two fields ‘firstname’ and ‘lastname’ through field configuration and sorters to sort the records, set it to firstname means we sort our records according to firstname and add a grouper- it includes a grouper function which returns the records according to the firstname.

Step 2:

Next drag-n-drop a list from the toolbox and add the store to it.

Ext.define('MyApp.view.MyList', {

    extend: 'Ext.dataview.List',
 
    config: {
        fullscreen: true,
        store: 'MyStore',
        grouped: true,
        indexBar: true,
        itemTpl: [
            '<div>{firstname} {lastname}</div>'
        ]
    }
});

 Set the indexBar and grouped configuration to true.

Output

Index Bar in Sencha Touch

  Modified On Nov-24-2017 06:25:56 AM

Leave Comment