Layouts have been vastly improved in EXT JS 4. The whole layout engine was rewritten, although the API is still the same; in other words, layouts are backward-compatible. The generated HTML was also updated in Ext JS 4.
The Auto Layoutis the default layout manager applied to a Container when no layout is specified.
For example, consider we have four panels and we want to organize these panels into an outer container (for example, 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 Auto Layout</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',
height: 60,
width: 100
});
var panel2 = Ext.create('Ext.panel.Panel', {
title: 'Panel 2',
html: 'Panel 2',
height: 80,
width: 60
});
var panel3 = Ext.create('Ext.panel.Panel', {
title: 'Panel 3',
html: 'Panel 3',
height: 65,
width: 100
});
var panel4 = Ext.create('Ext.panel.Panel', {
title: 'Panel 4',
html: 'Panel 4',
height: 70,
width: '90%'
});
var auto = Ext.create('Ext.window.Window', {
title: 'Auto Layout Example - Tutorial Jinni',
width: 100,
height: 320,
/*layout:'auto',*/
/* it is a good practice to define layout */
/* for this example purpose we comment it */
defaults: {
bodyStyle: 'padding:15px'
},
items: [panel1, panel2, panel3, panel4]
});
auto.show();
});
</script>
</head>
<body>
</body>
</html>
In the preceding code, we have four simple panels; each one has a title, HTML content, height, and width. Then, we have a Window object called auto, which has a title, height, and width. We also specified the layout as auto, but you do not need to specify a layout at all. We want every child Panel(panels we declared before) content to have a padding of 15 pixels. The defaults option applies all the config settings to all added items: panel1, panel2, panel3, and panel4 (whether added to the items config or via the add and insert methods). The auto panel contains four children (the panels we declared before)—panel1, panel2, panel3, and panel4.
When you run the above code you will see the below window.
Note that the child panels were added to the main Window(auto) in the order as they were declared; in other words, you must append children to the window in a specific order to use the auto layout correctly. If we try to re-size the Window, the panel will not change its size, even if we declared the last panel's (panel4) width to 90% of the Window's width, because of the properties of Auto Layout.
