Sencha Touch Cookbook

Grouping items in a List

In a list, you may want to see items grouped on certain criteria, for example, in our contact list, we may want to see our names grouped alphabetically. For this, the list allows us to group the data using the criteria and this recipe will show exactly how this can be achieved.

Getting ready

Make sure that you have setup your development environment by following the recipes outlined in Chapter 1.

How to do it...

Carry out the following steps:

1. Create and open a new file named ch06_05.js and paste the following code in it:

   var list = new Ext.List({ itemTpl: '<tpl for="."><div class="contact">{firstName} <strong>{lastName}</strong></div></tpl>', grouped : true, store: store, floating : true, width : 350, height : 370, centered ...