Hands-On Sencha Touch 2

Chapter 3. The Fundamentals

Before we create a real-life Sencha Touch application, let’s focus on the fundamentals. This chapter will cover all the Sencha Touch basics: how to create a component, how to reference it (creating a selector), and how to listen to their events.

All of the Sencha Touch visual components (like panels, lists, and toolbars) extend from the Ext.Component class. This base class gives every component the ability to set certain standard layout-related properties, such as height, width, margin, padding, and style, or set content with the html or template (tpl) configs. Every component in Sencha Touch can be rendered to the DOM.

In this chapter, you’ll learn:

• How to instantiate a basic component
• How to implement templates
• How to make references to components
• How component traversing works
• How to make references to DOM nodes
• How to fire and remove events using event handling

Note

You can test the examples in this chapter from my GitHub repo or you can open a Sencha Fiddle and try it out yourself. (When using the Sencha Fiddle, make sure you choose the Sencha 2.3.x framework.)

Instantiating a Basic Component

The first technique we’ll discuss is how to instantiate and configure a basic component. In Sencha Touch 2 (and in Ext JS 4), this works a little different than how you do it with native JavaScript code.

In native JavaScript, you use the new operator to create a new object instance:

var helloworld = new Object();
helloworld.html = "Hello World!";

JavaScript is ...