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.
0 comments:
Post a Comment