(For more resources on this topic, see here.)

The reader can benefit from the previous article on The Various Components in Sencha Touch.

The base component class

When we talk about components in Sencha Touch, we are generally talking about buttons, panels, sliders, toolbars, form fields, and other tangible items that we can see on the screen. However, all of these components inherit their configuration options, methods, properties, and events from a single base component with the startlingly original name of component. This can obviously lead to a bit of confusion, so we will refer to this as Ext.Component.

One of the most important things to understand is that you will never actually use Ext.Component directly. It is simply used as a building block for all of the other components in Sencha Touch. However, it is important to be familiar with the base component class, because anything it can do, all the other components can do. Learning this one class can give you a huge head start on everything else. Some of the more useful configuration options of Ext.Component are as follows:

• border
• cls
• disabled
• height/width
• hidden
• html
• margin
• padding
• scroll
• style
• ui

Ext.Component also contains a number of useful methods that will allow you to get and set properties on any Sencha Touch component. Here are a few of those methods:

• addCls and removeCls: Add or remove a CSS class from your component.
• destroy: Remove the component from memory.
• disable and enable: Disable or enable the component (very useful in forms).
• getHeight, getWidth, and getSize: Get the current height, width, or size of the component. Size returns both height and width. You can also use setHeight, setWidth, and setSize, to change the dimensions of your component.
• show and hide: Show or hide the component.
• setPosition: Set the top and left values for the component.
• update: Update the content area of a component.

Unlike our configuration options, methods can only be used once the component is created. This means we also need to understand how to get the component itself before we can begin using the methods. This is where the Ext class comes into play.

The Ext object and Ext.getCmp()

The Ext object is created, by default, when the Sencha Touch library is loaded. This object has methods that are used to create our initial application and its components. It also allows us to talk to our other components after they have been created. For example, let’s take a look at a code example:

new Ext.Application({
  name: 'TouchStart',
  launch: function() {
    var hello = new Ext.Container({
    fullscreen: true,
  html: '<div id="hello">Hello World</div>',
  id: 'helloContainer'
 });
 this.viewport = hello;
}
});

The configuration option, id: ‘helloContainer’ will allow us to grab the container, later on, using our Ext class and the method getCmp().

For example, we can add the following code after this.viewport = hello;:

var myContainer = Ext.getCmp('helloContainer');
myContainer.update('Hello Again!');

By using Ext.getCmp, we get back the component with an id value of helloContainer, which we then set to our variable myContainer. Using this method returns an actual component, in this case a container.

Since we get this object back as a container component, we can use any of the methods that the container understands. For our example, we used the update() method to change the content of the container to ‘Hello Again!’. Typically, these types of changes will be generated by a button click and not in the launch function. This example simply shows that we can manipulate the component on the fly even after it gets created.

The ID configuration
It’s a good idea to include an id configuration in all of your components. This makes it possible to use Ext.getCmp() to get to those components, later on, when we need them. Remember to keep the ID of every component unique. If you plan on creating multiple copies of a component, you will need to make sure that a unique ID is generated for each copy.

The Ext.getCmp() method is great for grabbing Sencha Touch components and manipulating them.

Layouts revisited

Layouts are another area we need to expand upon. When you start creating your own applications, you will need a firm understanding of how the different layouts affect what you see on the screen. To this end, we are going to start out with a demonstration application that shows how the different layouts work.

For the purposes of this demo application, we will create the different components, one at a time, as individual variables. This is done for the sake of readability and should not be considered the best programming style. Remember that any items created this way will take up memory, even if the user never views the component.

var myPanel = new Ext.Panel({ ...

items: [{ xtype: 'panel', ...

This allows Sencha Touch to render the components as they are needed, instead of all at once when the page loads.

The card layout

To begin with, we will create a simple card layout:

new Ext.Application({
 name: 'TouchStart',
 launch: function() {
  var layoutPanel = new Ext.Panel({
   fullscreen: true,
   layout: 'card',
  id: 'layoutPanel',
    cardSwitchAnimation: 'slide',
   items: [hboxTest]
   });
  this.viewport = layoutPanel;
 }
});

This sets up a single panel with a card layout. The card layout arranges its items similar to a stack of cards. Only one of these cards is active and displayed at a time. The card layout keeps any additional cards in the background and only creates them when the panel receives the setActiveItem() command.

Each item in the list can be activated by using setActiveItem() and the item number. This can be a bit confusing, as the numbering of the items is zero-indexed, meaning that you start counting at zero and not one. For example, if you want to activate the fourth item in the list, you would use:

layoutPanel.setActiveItem(3);

In this case, we are starting out with only a single card/item called hboxTest. We need to add this container to make our program run.

The hbox layout

Above the line that says var layoutPanel = new Ext.Panel({, in the preceding code, add the following code:

var hboxTest = new Ext.Container({
  layout: {
   type: 'hbox',
   align: 'stretch'
  },
  items: [{
   xtype: 'container',
   flex: 1,
   html: 'My flex is 1',
   margin: 5,
   style: 'background-color: #7FADCF'
 }, {
   xtype: 'container',
   flex: 2,
   html: 'My flex is 2',
   margin: 5,
   style: 'background-color: #7FADCF'
 }, {
   xtype: 'container',
   width: 80,
   html: 'My width is 80',
   margin: 5,
   style: 'background-color: #7FADCF'
 }]
});

This gives us a container with an hbox layout and three child items.

Child and parent
In Sencha Touch, we often find ourselves dealing with very large arrays of items, nested in containers that are in turn nested in other containers. It is often helpful to refer to a container as a parent to any items it contains. These items are then referred to as the children of the container.

The hbox layout stacks its items horizontally and uses the width and flex values to determine how much horizontal space each of its child items will take up. The align: ‘stretch’ configuration causes the items to stretch to fill all of the available vertical space.

If we run the code now, we should see this:

You should try adjusting the flex and width values to see how it affects the size of the child containers. You can also change the available configuration options for align (center, end, start, and stretch), to see the different options available. Once you are finished, let’s move on and add some more items to our card layout.