This Git repository includes all of the source code used in creating a tutorial about layouts in Sencha Touch.

Each of the links below represents a snapshot of the code at a point in the video (timestamps are in brackets). You'll find instructions below on how to check out each snapshot from this git repository.

Auto

• auto (0:56)
• auto "Lorem ipsum" (1:09)

Fit

• fit with 1 panel (1:17)
• fit with 2 panels (1:30)

Card

• card with 3 panels (2:00)

TabPanel

• TabPanel with 3 panels (2:48)
• TabPanel with fade transition (3:07)

Carousel

• Carousel (3:37)
• Carousel {direction: 'vertical'} (4:02)

Box layouts

• Vbox (4:33)
• Vbox {align: 'stretch'} (4:48)
• Vbox {pack: 'center'} (5:05)
• Vbox {defaults: {flex: 1}} (5:49)
• Hbox {defaults: {flex: 1}} (5:58)

Mix and match

• Traffic light carousels (6:48)
• Exquisite corpse (7:18)
• Exquisite corpse with credits (7:48)
• Exquisite corpse with docked credits (8:12)

Using this repository to follow the screencast

First, you'll have to clone this repository:

git clone git://github.com/nelstrom/Sencha-Touch-layouts-demo.git

Change into the directory:

cd Sencha-Touch-layouts-demo

By default, the git clone command will only create the master branch locally. If you want to study the code at each checkpoint, you will have to fetch each of the other branches. You can do so by running the following:

git checkout -b 00_blank_slate origin/00_blank_slate
git checkout -b 01a_auto_layout origin/01a_auto_layout
git checkout -b 01b_auto_layout origin/01b_auto_layout
git checkout -b 02a_fit_layout origin/02a_fit_layout
git checkout -b 02b_fit_layout origin/02b_fit_layout
git checkout -b 03_card_layout origin/03_card_layout
git checkout -b 04a_tab_panel origin/04a_tab_panel
git checkout -b 04b_tab_panel origin/04b_tab_panel
git checkout -b 05a_carousel origin/05a_carousel
git checkout -b 05b_carousel origin/05b_carousel
git checkout -b 06a_box_layout origin/06a_box_layout
git checkout -b 06b_box_layout origin/06b_box_layout
git checkout -b 06c_box_layout origin/06c_box_layout
git checkout -b 06d_box_layout origin/06d_box_layout
git checkout -b 06e_box_layout origin/06e_box_layout
git checkout -b 07_traffic_light_carousel origin/07_traffic_light_carousel
git checkout -b 08a_exquisite_corpse origin/08a_exquisite_corpse
git checkout -b 08b_exquisite_corpse origin/08b_exquisite_corpse
git checkout -b 08c_exquisite_corpse origin/08c_exquisite_corpse

You can review the list of local branches by running:

git branches

And you can switch between branches with the checkout command. For example, to check out the 03_generated_golden_spiral branch, run:

git co 08c_exquisite_corpse

Live demo

Here is a live demo of the Exquisite corpse example. You can also find the source code on github.