Home > DeveloperSection > Articles > Index Bar in Sencha Touch

Index Bar in Sencha Touch


Sencha Touch Sencha Touch 
Ratings:
1 Comment(s)
 3041  View(s)
Rate this:

Index Bar in Sencha Touch

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


Sencha touch IndexBar - get tapped index value

By dibeesh ks on   3 years ago

Don't want to miss updates? Please click the below button!

Follow MindStick