O'Reilly logo

Sencha Touch 2 Mobile JavaScript Framework by Bryan P. Johnson, John Earl Clark

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Controlling the look with layouts

Layouts give you a number of options for arranging content inside containers. Sencha Touch offers five basic layouts for containers:

  • fit: This is a single item layout that automatically expands to take up the whole container
  • hbox: This arranges items horizontally in the container
  • vbox: This arranges items vertically in the container
  • card: This arranges items like a stack of cards, where only the active card is initially visible
  • docked: This places an item at the top or bottom or to the left or right of the display

In our previous example, we did not declare a layout. In general, you will always want to declare a layout for any container. If you don't, the components inside the container may not size themselves appropriately ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required