So far, we have seen various components which the Sencha Touch framework offers and how to use them to model our application. However, for all practical reasons, there may be a need to create new components or extend the capability of an existing component. This recipe walks us through the steps to create a new component.
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
PhotoAlbum.js
and paste the following code in it:Ext.ns('Touch.book.ux'); Touch.book.ux.PhotoAlbum = Ext.extend(Ext.DataView, { tpl : new Ext.XTemplate( '<tpl for=".">', '<div class="thumb-wrap" id="{title}">', '<div class="thumb"><img src="{url}" title="{title}"></div>', '<span>{about}</span></div>', '</tpl>', '<div class="x-clear">...