Imagine there is big book that we are reading and we want to quickly locate the topic of our interest. The very first thing that we look forward to is the Index page which can tell us the topics and their page numbers. Similarly, in a list, if items are huge, we can use the index bar functionality to quickly go to the item of our choice, and this recipe will walk us through the step.
Make sure that you have set up your development environment by following the recipes outlined in Chapter 1.
Carry out the following steps:
Create and open a new file named
ch06_06.jsand 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, indexBar : true, //use IndexBar store : store, floating : true, width : 350, height : 370...