The HBox layout organizes its children horizontally across the container. You can set two optional configurations to organize the child's width and height across the parent's body.
The flex configuration will tell the parent Component how to organize the child Components horizontally, based on the relative flex configuration. The align configuration will tell the child Components how to use the height across the parent. Let's consider that we have two panels and we want to display these panels inside a Window:
In the Window declaration, we have the layout config. It tells the Window that we are going to use the hbox layout and align of the child Components will be stretch, meaning that we can use the full height of the window's vertical space.
When we execute the code, the following will be the output:
If we try to resize the Window, children will be resized as well, according to their configuration.
The flex configuration will tell the parent Component how to organize the child Components horizontally, based on the relative flex configuration. The align configuration will tell the child Components how to use the height across the parent. Let's consider that we have two panels and we want to display these panels inside a Window:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Extjs 4 HBox Layout Example</title>
<link rel="stylesheet" type="text/css" href="http://extjs-public.googlecode.com/svn/extjs-4.x/release/resources/css/ext-all.css" />
<script type="text/javascript" src="http://extjs-public.googlecode.com/svn/extjs-4.x/include/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var panel1 = Ext.create('Ext.panel.Panel', {
title: 'Panel 1',
html: 'Panel 1',
flex: 1
});
var panel2 = Ext.create('Ext.panel.Panel', {
title: 'Panel 2',
html: 'Panel 2',
flex: 3
});
var hbox = Ext.create('Ext.window.Window', {
title: 'HBox Layout - Tutorial Jinni',
width: 300,
height:100,
layout: {
type: 'hbox',
align: 'stretch'
},
defaults: {
bodyStyle: 'padding:10px'
},
items: [panel1, panel2]
});
hbox.show();
});
</script>
</head>
<body>
</body>
</html>
In the preceding code, we have two panels. Each panel has its title and HTML content. Each one also has a flex configuration. The first panel configured flex as 1 and the second panel configured the flex config as 3. The Window will sum these flex configs (in this example, the total will be 4) and will distribute the horizontal space relative to each child. The first panel will get one-fourth (25%) of the window's horizontal space and the second panel will get three-fourths (75%) of the window's horizontal space.
In the Window declaration, we have the layout config. It tells the Window that we are going to use the hbox layout and align of the child Components will be stretch, meaning that we can use the full height of the window's vertical space.
When we execute the code, the following will be the output:
If we try to resize the Window, children will be resized as well, according to their configuration.
