In previous recipes, we looked at the different container layouts which are available with Sencha Touch. Given the different layouts, a question that arises is whether these layouts are compatible with each other to an extent where they can be nested. For example, is it valid to use the hbox layout at the parent container level but use vbox inside the subcontainer? The answer is, Yes. Technically, it is feasible to combine multiple layouts to create complex looking views. For example, we can have a panel with a card layout, with each item having an hbox layout and each of its items having a vbox layout and the final container having an auto layout with few docked items defined.

In this recipe, we will see how we can mix different layouts and the important points that we need to keep in mind when we use these combinations.