In this tutorial I am going to discuss and show you how to customize the look and feel of the default Sencha List control. As you might know the normal list control that Sencha provides has a basic structure which looks like the image on the left below. You can see that it has got individual list items which are laid down vertically and can be scrolled down to see more items. List uses an Ext.XTemplate as its internal templating mechanism which defines the look and feel. The data for the List comes from a Ext.data.Store which is bound to it. Whenever there is a change in data in the Store the change is automatically reflected in the List since it is bounded. I have discussed about how to create basic List in my previous tutorials. Now let’s modify the look of the List control. We will make a List that looks like the image on the right. You can see in the new list, it is complete customization of each items. So, now we have more of a <div> block with custom styles and images. Let’s see how this can be done.
