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
Leave a Comment
1 Comments