Sencha Touch 2 Up and Running

Chapter 3. Views

Views are the most visible element of any application; using view components, developers can assemble and create the UIs of their applications, the same ones their users will learn to love (or hate) as they use their software—although the team at Sencha seems to have done all it can to make sure users love the applications built with this framework!

Sencha Touch has an unprecedented number of high-level components, ready to be used in your applications; these components fit together quite nicely and have a vast array of events that can be used to provide interactivity. This chapter will delve into all of these aspects in detail and will provide an overview of the most important UI classes available in the framework.

Components, Containers, and Panels

All the visual components of Sencha Touch inherit from a base class called Ext.Component. Components can draw themselves on the screen; they can be shown and hidden, enabled and disabled at any time; they can be resized, moved, and animated; and finally they can also trigger events, allowing developers to react to user input or to changing conditions.

However, if you look at the class inheritance of most Sencha Touch view components, you are going to see that many inherit also from Ext.Container. It turns out that containers are a special kind of component that can also contain (hence the name) other child components inside. This means that containers can add and remove child components, as well as arranging them in layouts. ...