The HBox layout is a powerful layout option that arranges items horizontally across a container. You can divide the space between child items in various ways giving you powerful layout options. Consider the following screenshot:
In this screenshot, we have four different Panels, each with four buttons (though any components, including Panels could have been used instead of buttons). Each Panel, however, has a different HBox configuration applied to it to achieve the different horizontal layouts.
Let's look at each one in turn, starting from the top-most Panel of buttons and working our way down:
<ext:Panel runat="server" Layout="HBox" BodyPadding="5" DefaultMargins="0 5 0 0">
<Items>
<ext:Button Text="Button 1" />
<ext:Panel BaseCls="x-plain" Flex="1" />
<ext:Button Text="Button 2" />
<ext:Button Text="Button 3" />
<ext:Button Text="Button 4" Margins="0" />
</Items>
</ext:Panel>
In the previous code...