Hands-On Sencha Touch 2

Chapter 11. View Components

This chapter is all about view components. I will discuss how to implement messageboxes, lists, panels, toolbars, charts, and maps. Of course, there are many other components included in Sencha Touch, such as tabpanels, carousels, dataviews, progressbars, and touch grids.

Whatever view component you choose, the implementation for all components is more or less the same because components all extend from Ext.Component. To display views on your screen, you will either nest them via the xtype property (the object literal way), or you create an instance via Ext.create(). You can also define your own blueprint of a view component by extending from an existing Sencha Touch view component.

Nobody knows all the component class properties off the top of her head, and the thing is, you don’t need to. This is where the API docs come into play. Just open the docs, search for the view component (e.g., Ext.List) and browse through all its configs and methods.

The FindACab app does not have a face yet. We need to start creating views. This chapter will show you a couple of techniques for creating view component instances used for the FindACab app. Knowing these, you can easily master all the view components in general. Let’s start with the very early basics, such as implementing a messagebox.

In this chapter, you’ll learn how to implement:

• A messagebox
• Toolbars and title bars
• Buttons
• Lists
• A Google Map

• Overlays
• Charts

Implementing a Messagebox

Unlike the standard JavaScript ...